Dropped IE7

.gitignore

@@ -1,2 +1,3 @@
 .sass-cache/*
-node_modules/*
+node_modules/*
+css/example.css

Gruntfile.js

@@ -21,7 +21,7 @@ module.exports = function(grunt) {
     },
     watch: {
       css: {
-        files: ['css/*.scss'],
+        files: ['css/*.scss', 'css/*/*.scss'],
         tasks: ['sass']
       }
     }

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;

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) {
+@function calculate-rem($px, $base: $base-font-size) {
-  $remSize: $size / $base-font-size;
+  $rem: $px / $base;
-  @return #{$remSize}rem;
+  @return #{$rem}rem;
 }
 
-@mixin font-size($size) {
+@mixin font-size($px) {
-  font-size: $size + px;
+  font-size: $px + px;
-  font-size: calculate-rem($size);
+  font-size: calculate-rem($px);
 }

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 {
+a {
-	//font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
+	color: $base-colour;
-	font-family: $base-font-stack;
+	text-decoration: none;
-	@include font-size($base-font-size);
-	line-height: $base-line-height;
 }
 
-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;
+	@include font-size($h2-font-size);
-	line-height: ($base-margin-bottom / $h2-font-size ) * 1em;
 }
 
 h3 {
-	font-size: ($h3-font-size / $base-font-size) * 1em;
+	@include font-size($h3-font-size);
-	line-height: ($base-margin-bottom / $h3-font-size ) * 1em;
 }
 
 h4 {
-	font-size: ($h4-font-size / $base-font-size) * 1em;
+	@include font-size($h4-font-size);
-	line-height: ($base-margin-bottom / $h4-font-size ) * 1em;
 }
 
 h5 {
-	font-size: ($h5-font-size / $base-font-size) * 1em;
+	@include font-size($h5-font-size);
-	line-height: ($base-margin-bottom / $h5-font-size ) * 1em;
 }
 
 h6 {
-	font-size: ($h6-font-size / $base-font-size) * 1em;
+	@include font-size($h6-font-size);
-	line-height: ($base-margin-bottom / $h6-font-size ) * 1em;
 }
 
 ul, ol {
-	margin-left: $list-margin-left * 1px;
+	margin-left: $base-margin-bottom * 1px;
 }
 
 ul ul, ol ol {

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 { 
+th {
-	border: 0;
+	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;
 }

css/objects/_forms.scss

@@ -1,45 +1,48 @@
-input, select, textarea {
+input, 
-	display: inline-block;
+select, 
-	font: inherit;
+textarea {
-	line-height: $base-margin-bottom + px;
-	padding: 4px 8px;
-	color: $base-colour;
 	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;
+	font-weight: bold;
-	width: 140px;
 }
 
 .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;
+	line-height: ($base-margin-bottom * 2) * 1px;
-	height: ($base-margin-bottom * 2) + px;
+	height: ($base-margin-bottom * 2) * 1px;
-	padding: 0 20px;
+	padding: 0 $base-margin-bottom;
 	width: auto;
 	&:hover {
 		background: $btn-background-hover;

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;
     }

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%;
   }

css/objects/_tables.scss

@@ -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;
-	}

css/style.scss

@@ -19,5 +19,5 @@ Author: Mike Francis
 
 @import 'objects/forms';
 @import 'objects/scaffolding';
-@import 'objects/nav';
+@import 'objects/scaffolding';
-@import 'objects/tables';
+@import 'objects/nav';