From aa573e574c2ba8b7670af9f29ea88c3fbfe814b3 Mon Sep 17 00:00:00 2001
From: Mike Francis <mikeffrancis@gmail.com>
Date: Mon, 3 Feb 2014 22:10:54 +0000
Subject: [PATCH] Dropped IE7

---
 .gitignore                    |  3 ++-
 Gruntfile.js                  |  2 +-
 css/_vars.scss                | 14 +++----------
 css/generic/_mixins.scss      | 16 +++++++-------
 css/generic/_normalise.scss   | 29 ++++++++++----------------
 css/generic/_reset.scss       | 19 +++++++----------
 css/objects/_forms.scss       | 39 +++++++++++++++++++----------------
 css/objects/_nav.scss         |  3 +--
 css/objects/_scaffolding.scss |  2 +-
 css/objects/_tables.scss      | 21 -------------------
 css/style.scss                |  4 ++--
 style.css                     |  2 +-
 12 files changed, 60 insertions(+), 94 deletions(-)
 delete mode 100755 css/objects/_tables.scss

diff --git a/.gitignore b/.gitignore
index b8619fb..c2c5039 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 .sass-cache/*
-node_modules/*
\ No newline at end of file
+node_modules/*
+css/example.css
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
index 7d14cb0..748c27e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -21,7 +21,7 @@ module.exports = function(grunt) {
     },
     watch: {
       css: {
-        files: ['css/*.scss'],
+        files: ['css/*.scss', 'css/*/*.scss'],
         tasks: ['sass']
       }
     }
diff --git a/css/_vars.scss b/css/_vars.scss
index 59c2c85..e366080 100755
--- a/css/_vars.scss
+++ b/css/_vars.scss
@@ -1,12 +1,12 @@
 // Base
 
-$base-colour: 							#333;
+$base-colour: 							#444;
 $base-background-colour: 		#fff;
 
 $base-font-stack: 					'Helvetica Neue', Helvetica, Arial, sans-serif;
-$base-font-size: 						14;
+$base-font-size: 						16;
 $base-line-height: 					1.5;
-$base-margin-bottom: 				($base-font-size * $base-line-height);
+$base-margin-bottom: 				$base-font-size * $base-line-height;
 
 $h1-font-size: 							28;
 $h2-font-size: 							24;
@@ -19,20 +19,12 @@ $h6-font-size: 							16;
 
 $mobile:                    640px;
 
-// Lists
-
-$list-margin-left:					24;
-
 // Scaffolding
 
 $container-max-width: 			960;
 $column-count:				 			12;
 $column-gutter:				 			20;
 
-// Tables
-
-$table-border-colour:				#ddd;
-
 // Forms
 $input-border: 							solid 1px #ccc;
 $input-background:					#fff;
diff --git a/css/generic/_mixins.scss b/css/generic/_mixins.scss
index 0d93430..4b70c14 100755
--- a/css/generic/_mixins.scss
+++ b/css/generic/_mixins.scss
@@ -1,13 +1,15 @@
 @mixin media($size) {
-  @media screen and (max-width: $size)  { @content; }
+  @media screen and (max-width: $size) { 
+    @content; 
+  }
 }
 
-@function calculate-rem($size) {
-  $remSize: $size / $base-font-size;
-  @return #{$remSize}rem;
+@function calculate-rem($px, $base: $base-font-size) {
+  $rem: $px / $base;
+  @return #{$rem}rem;
 }
 
-@mixin font-size($size) {
-  font-size: $size + px;
-  font-size: calculate-rem($size);
+@mixin font-size($px) {
+  font-size: $px + px;
+  font-size: calculate-rem($px);
 }
\ No newline at end of file
diff --git a/css/generic/_normalise.scss b/css/generic/_normalise.scss
index c45c31a..febabd4 100755
--- a/css/generic/_normalise.scss
+++ b/css/generic/_normalise.scss
@@ -1,17 +1,15 @@
 html {
 	background-color: $base-background-colour;
 	color: $base-colour;
-	font-size: 62.5%;
+	font: #{($base-font-size * 6.25) * 1%}/#{$base-line-height} $base-font-stack;
 }
 
-body {
-	//font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
-	font-family: $base-font-stack;
-	@include font-size($base-font-size);
-	line-height: $base-line-height;
+a {
+	color: $base-colour;
+	text-decoration: none;
 }
 
-h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
+h1, h2, h3, h4, h5, h6, p, ul, ol {
 	margin-bottom: $base-margin-bottom * 1px;
 }
 
@@ -20,32 +18,27 @@ h1 {
 }
 
 h2 {
-	font-size: ($h2-font-size / $base-font-size) * 1em;
-	line-height: ($base-margin-bottom / $h2-font-size ) * 1em;
+	@include font-size($h2-font-size);
 }
 
 h3 {
-	font-size: ($h3-font-size / $base-font-size) * 1em;
-	line-height: ($base-margin-bottom / $h3-font-size ) * 1em;
+	@include font-size($h3-font-size);
 }
 
 h4 {
-	font-size: ($h4-font-size / $base-font-size) * 1em;
-	line-height: ($base-margin-bottom / $h4-font-size ) * 1em;
+	@include font-size($h4-font-size);
 }
 
 h5 {
-	font-size: ($h5-font-size / $base-font-size) * 1em;
-	line-height: ($base-margin-bottom / $h5-font-size ) * 1em;
+	@include font-size($h5-font-size);
 }
 
 h6 {
-	font-size: ($h6-font-size / $base-font-size) * 1em;
-	line-height: ($base-margin-bottom / $h6-font-size ) * 1em;
+	@include font-size($h6-font-size);
 }
 
 ul, ol {
-	margin-left: $list-margin-left * 1px;
+	margin-left: $base-margin-bottom * 1px;
 }
 
 ul ul, ol ol {
diff --git a/css/generic/_reset.scss b/css/generic/_reset.scss
index b6054f4..abbd669 100755
--- a/css/generic/_reset.scss
+++ b/css/generic/_reset.scss
@@ -1,4 +1,8 @@
-body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{
+* {
+	border: 0;
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+					box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 }
@@ -8,8 +12,9 @@ table {
 	border-spacing: 0;
 }
 
-fieldset, img { 
-	border: 0;
+th {
+	font-weight: bold;
+	text-align: left;
 }
 
 address, caption, cite, dfn, th, var {
@@ -17,10 +22,6 @@ address, caption, cite, dfn, th, var {
 	font-weight: normal;
 }
 
-caption, th {
-	text-align: left;
-}
-
 h1, h2, h3, h4, h5, h6 {
 	font-size: 100%;
 	font-weight: bold;
@@ -28,8 +29,4 @@ h1, h2, h3, h4, h5, h6 {
 
 q:before, q:after {
 	content: '';
-}
-
-abbr, acronym {
-	border: 0;
 }
\ No newline at end of file
diff --git a/css/objects/_forms.scss b/css/objects/_forms.scss
index faf47e9..54956c0 100755
--- a/css/objects/_forms.scss
+++ b/css/objects/_forms.scss
@@ -1,45 +1,48 @@
-input, select, textarea {
-	display: inline-block;
-	font: inherit;
-	line-height: $base-margin-bottom + px;
-	padding: 4px 8px;
-	color: $base-colour;
+input, 
+select, 
+textarea {
 	background: $input-background;
 	border: $input-border;
+	color: $base-colour;
+	display: inline-block;
+	font: inherit;
+	line-height: $base-margin-bottom * 1px;
+	padding: ($base-margin-bottom / 4) ($base-margin-bottom / 2);
 	width: 208px;
 }
 
+input[type="checkbox"], 
+input[type="radio"] {
+	background: transparent;
+	border: 0;
+	width: auto;
+}
+
 textarea {
-	min-height: ($base-margin-bottom * 4) + px;
+	min-height: ($base-margin-bottom * 4) * 1px;
 }
 
 .form__group {
-	margin-bottom: $base-margin-bottom + px;
+	margin-bottom: $base-margin-bottom * 1px;
 }
 
 .form__label {
-	float: left;
-	width: 140px;
+	font-weight: bold;
 }
 
 .form__controls {
-	margin-left: 160px;
 	@extend .clearfix;
 }
 
-	.checkbox input {
-		width: auto;
-	}
-
 .btn {
 	background: $btn-background;
 	border: $btn-border;
 	color: $btn-color;
 	cursor: pointer;
 	display: inline-block;
-	line-height: ($base-margin-bottom * 2) + px;
-	height: ($base-margin-bottom * 2) + px;
-	padding: 0 20px;
+	line-height: ($base-margin-bottom * 2) * 1px;
+	height: ($base-margin-bottom * 2) * 1px;
+	padding: 0 $base-margin-bottom;
 	width: auto;
 	&:hover {
 		background: $btn-background-hover;
diff --git a/css/objects/_nav.scss b/css/objects/_nav.scss
index 9fedfd5..3d7b5b3 100755
--- a/css/objects/_nav.scss
+++ b/css/objects/_nav.scss
@@ -1,9 +1,8 @@
 .nav {
 	list-style: none;
-	margin-left: 0;
+	margin: 0;
   >li {
       display: inline-block;
-      *display: inline;
     >a {
       display: block;
     }
diff --git a/css/objects/_scaffolding.scss b/css/objects/_scaffolding.scss
index d6997d7..99b706f 100755
--- a/css/objects/_scaffolding.scss
+++ b/css/objects/_scaffolding.scss
@@ -33,7 +33,7 @@
 }
 
 @for $i from 1 through $column-count {
-  .column-span-#{$i} { 
+  .col-span-#{$i} { 
     width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) * 1%;
     *width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) - .02 * 1%;
   }
diff --git a/css/objects/_tables.scss b/css/objects/_tables.scss
deleted file mode 100755
index faa77c6..0000000
--- a/css/objects/_tables.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.table {
-	width: 100%;
-	border-collapse: collapse;
-}
-
-	.table th, 
-	.table td {
-		text-align: left;
-		vertical-align: top;
-		border-top: 1px solid $table-border-colour;
-		padding: ($base-margin-bottom / 2) * 1px 10px;
-	}
-	
-	.table th {
-		font-weight: bold;
-		border-top: 0;
-	}
-
-	.table thead th {
-	  vertical-align: bottom;
-	}
\ No newline at end of file
diff --git a/css/style.scss b/css/style.scss
index e96211b..7b49d8a 100755
--- a/css/style.scss
+++ b/css/style.scss
@@ -19,5 +19,5 @@ Author: Mike Francis
 
 @import 'objects/forms';
 @import 'objects/scaffolding';
-@import 'objects/nav';
-@import 'objects/tables';
\ No newline at end of file
+@import 'objects/scaffolding';
+@import 'objects/nav';
\ No newline at end of file
diff --git a/style.css b/style.css
index 1557450..42a95a2 100644
--- a/style.css
+++ b/style.css
@@ -1 +1 @@
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold}q:before,q:after{content:''}abbr,acronym{border:0}html{background-color:#fff;color:#333;font-size:62.5%}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-size:1rem;line-height:1.5}h1,h2,h3,h4,h5,h6,p,ul,ol,table,pre,fieldset{margin-bottom:21px}h1{font-size:28px;font-size:2rem}h2{font-size:1.71429em;line-height:0.875em}h3{font-size:1.5em;line-height:1em}h4{font-size:1.28571em;line-height:1.16667em}h5{font-size:1.14286em;line-height:1.3125em}h6{font-size:1.14286em;line-height:1.3125em}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;max-width:100%;height:auto}.alignleft{float:left}img.alignleft{margin-right:20px}.alignright{float:right}img.alignright{margin-left:20px}.aligncenter{display:block;margin-left:auto;margin-right:auto}.clearfix,.form__controls,.container,.container-fluid,.row{*zoom:1}.clearfix:before,.form__controls:before,.container:before,.container-fluid:before,.row:before,.clearfix:after,.form__controls:after,.container:after,.container-fluid:after,.row:after{content:" ";display:table}.clearfix:after,.form__controls:after,.container:after,.container-fluid:after,.row:after{clear:both}input,select,textarea{display:inline-block;font:inherit;line-height:21px;padding:4px 8px;color:#333;background:#fff;border:solid 1px #ccc;width:208px}textarea{min-height:84px}.form__group{margin-bottom:21px}.form__label{float:left;width:140px}.form__controls{margin-left:160px}.checkbox input{width:auto}.btn{background:#eee;border:solid 1px #ccc;color:#333;cursor:pointer;display:inline-block;line-height:42px;height:42px;padding:0 20px;width:auto}.btn:hover{background:#ddd}.container{margin:0 auto;max-width:940px;padding:0 20px}.container-fluid{width:100%}.row{margin-left:-2.08333%;_overflow:hidden}@media screen and (max-width: 640px){.row{margin-left:0}}.column{display:inline;float:left;margin-left:2.08333%;vertical-align:top}@media screen and (max-width: 640px){.column{display:block;float:none;margin-left:0;width:auto !important}}.column-span-1{width:6.25%;*width:6.23%}.column-span-2{width:14.58333%;*width:14.56333%}.column-span-3{width:22.91667%;*width:22.89667%}.column-span-4{width:31.25%;*width:31.23%}.column-span-5{width:39.58333%;*width:39.56333%}.column-span-6{width:47.91667%;*width:47.89667%}.column-span-7{width:56.25%;*width:56.23%}.column-span-8{width:64.58333%;*width:64.56333%}.column-span-9{width:72.91667%;*width:72.89667%}.column-span-10{width:81.25%;*width:81.23%}.column-span-11{width:89.58333%;*width:89.56333%}.column-span-12{width:97.91667%;*width:97.89667%}.row-no-gutters .column{margin-left:0}.row-no-gutters .column-span-1{width:8.33333%;*width:8.31333%}.row-no-gutters .column-span-2{width:16.66667%;*width:16.64667%}.row-no-gutters .column-span-3{width:25%;*width:24.98%}.row-no-gutters .column-span-4{width:33.33333%;*width:33.31333%}.row-no-gutters .column-span-5{width:41.66667%;*width:41.64667%}.row-no-gutters .column-span-6{width:50%;*width:49.98%}.row-no-gutters .column-span-7{width:58.33333%;*width:58.31333%}.row-no-gutters .column-span-8{width:66.66667%;*width:66.64667%}.row-no-gutters .column-span-9{width:75%;*width:74.98%}.row-no-gutters .column-span-10{width:83.33333%;*width:83.31333%}.row-no-gutters .column-span-11{width:91.66667%;*width:91.64667%}.row-no-gutters .column-span-12{width:100%;*width:99.98%}.nav{list-style:none;margin-left:0}.nav>li{display:inline-block;*display:inline}.nav>li>a{display:block}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;vertical-align:top;border-top:1px solid #ddd;padding:10.5px 10px}.table th{font-weight:bold;border-top:0}.table thead th{vertical-align:bottom}
+*{border:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bold}q:before,q:after{content:''}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,ul,ol{margin-bottom:24px}h1{font-size:28px;font-size:1.75rem}h2{font-size:24px;font-size:1.5rem}h3{font-size:21px;font-size:1.3125rem}h4{font-size:18px;font-size:1.125rem}h5{font-size:16px;font-size:1rem}h6{font-size:16px;font-size:1rem}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;max-width:100%;height:auto}.alignleft{float:left}img.alignleft{margin-right:20px}.alignright{float:right}img.alignright{margin-left:20px}.aligncenter{display:block;margin-left:auto;margin-right:auto}.clearfix,.form__controls,.container,.container--fluid,.row{*zoom:1}.clearfix:before,.form__controls:before,.container:before,.container--fluid:before,.row:before,.clearfix:after,.form__controls:after,.container:after,.container--fluid:after,.row:after{content:" ";display:table}.clearfix:after,.form__controls:after,.container:after,.container--fluid:after,.row:after{clear:both}input,select,textarea{background:#fff;border:solid 1px #ccc;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6 12;width:208px}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__label{font-weight:bold}.btn{background:#eee;border:solid 1px #ccc;color:#333;cursor:pointer;display:inline-block;line-height:48px;height:48px;padding:0 24;width:auto}.btn:hover{background:#ddd}.container{margin:0 auto;max-width:940px;padding:0 20px}.container--fluid{width:100%}.row{margin-left:-2.08333%;_overflow:hidden}@media screen and (max-width: 640px){.row{margin-left:0}}.column{display:inline;float:left;margin-left:2.08333%;vertical-align:top}@media screen and (max-width: 640px){.column{display:block;float:none;margin-left:0;width:auto !important}}.col-span-1{width:6.25%;*width:6.23%}.col-span-2{width:14.58333%;*width:14.56333%}.col-span-3{width:22.91667%;*width:22.89667%}.col-span-4{width:31.25%;*width:31.23%}.col-span-5{width:39.58333%;*width:39.56333%}.col-span-6{width:47.91667%;*width:47.89667%}.col-span-7{width:56.25%;*width:56.23%}.col-span-8{width:64.58333%;*width:64.56333%}.col-span-9{width:72.91667%;*width:72.89667%}.col-span-10{width:81.25%;*width:81.23%}.col-span-11{width:89.58333%;*width:89.56333%}.col-span-12{width:97.91667%;*width:97.89667%}.row--no-gutters .column{margin-left:0}.row--no-gutters .column-span-1{width:8.33333%;*width:8.31333%}.row--no-gutters .column-span-2{width:16.66667%;*width:16.64667%}.row--no-gutters .column-span-3{width:25%;*width:24.98%}.row--no-gutters .column-span-4{width:33.33333%;*width:33.31333%}.row--no-gutters .column-span-5{width:41.66667%;*width:41.64667%}.row--no-gutters .column-span-6{width:50%;*width:49.98%}.row--no-gutters .column-span-7{width:58.33333%;*width:58.31333%}.row--no-gutters .column-span-8{width:66.66667%;*width:66.64667%}.row--no-gutters .column-span-9{width:75%;*width:74.98%}.row--no-gutters .column-span-10{width:83.33333%;*width:83.31333%}.row--no-gutters .column-span-11{width:91.66667%;*width:91.64667%}.row--no-gutters .column-span-12{width:100%;*width:99.98%}.container{margin:0 auto;max-width:940px;padding:0 20px}.container--fluid{width:100%}.row{margin-left:-2.08333%;_overflow:hidden}@media screen and (max-width: 640px){.row{margin-left:0}}.column{display:inline;float:left;margin-left:2.08333%;vertical-align:top}@media screen and (max-width: 640px){.column{display:block;float:none;margin-left:0;width:auto !important}}.col-span-1{width:6.25%;*width:6.23%}.col-span-2{width:14.58333%;*width:14.56333%}.col-span-3{width:22.91667%;*width:22.89667%}.col-span-4{width:31.25%;*width:31.23%}.col-span-5{width:39.58333%;*width:39.56333%}.col-span-6{width:47.91667%;*width:47.89667%}.col-span-7{width:56.25%;*width:56.23%}.col-span-8{width:64.58333%;*width:64.56333%}.col-span-9{width:72.91667%;*width:72.89667%}.col-span-10{width:81.25%;*width:81.23%}.col-span-11{width:89.58333%;*width:89.56333%}.col-span-12{width:97.91667%;*width:97.89667%}.row--no-gutters .column{margin-left:0}.row--no-gutters .column-span-1{width:8.33333%;*width:8.31333%}.row--no-gutters .column-span-2{width:16.66667%;*width:16.64667%}.row--no-gutters .column-span-3{width:25%;*width:24.98%}.row--no-gutters .column-span-4{width:33.33333%;*width:33.31333%}.row--no-gutters .column-span-5{width:41.66667%;*width:41.64667%}.row--no-gutters .column-span-6{width:50%;*width:49.98%}.row--no-gutters .column-span-7{width:58.33333%;*width:58.31333%}.row--no-gutters .column-span-8{width:66.66667%;*width:66.64667%}.row--no-gutters .column-span-9{width:75%;*width:74.98%}.row--no-gutters .column-span-10{width:83.33333%;*width:83.31333%}.row--no-gutters .column-span-11{width:91.66667%;*width:91.64667%}.row--no-gutters .column-span-12{width:100%;*width:99.98%}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block}