New grids

_/scss/_vars.scss

@@ -21,9 +21,9 @@ $list-margin-left:					24;
 
 // Scaffolding
 
-$column-gutter:							20;
-$column-count:							12;
-$container-max-width:				1200;
+$container-max-width: 			960;
+$column-count:				 			12;
+$column-gutter:				 			20;
 
 // Tables
 

_/scss/generic/_mixins.scss

@@ -1,12 +1,15 @@
 @mixin breakpoint($point) {
-  @if $point == desktop {
-    @media screen and (min-width: 1200px) { @content; }
-  }
-  @else if $point == tablet-landscape {
-    @media screen and (min-width: 1024px) { @content; }
+  @if $point == mobile {
+    @media screen and (max-width: 640px)  { @content; }
   }
   @else if $point == tablet-portrait {
-    @media screen and (min-width: 768px)  { @content; }
+    @media screen and (max-width: 768px)  { @content; }
+  }
+  @else if $point == tablet-landscape {
+    @media screen and (max-width: 1024px) { @content; }
+  }
+  @else if $point == desktop {
+    @media screen and (max-width: 1200px) { @content; }
   }
 }
 
@@ -17,10 +20,6 @@
 	        border-radius: $radius;
 }
 
-@mixin col-width ($span: 1) {
-	width: ((100 / $column-count) * $span) - ($column-gutter / $container-max-width) * 100%;
-}
-
 @mixin box-sizing ($box-model: 'border-box') {
 	-webkit-box-sizing: $box-model;
      -moz-box-sizing: $box-model;

_/scss/objects/_nav.scss

@@ -3,34 +3,11 @@
 	margin-left: 0;
 }
 
-	.nav > li, .nav > li > a {
+	.nav > li {
 		 display: inline-block;
 		*display: inline;
 	}
-	
-.nav-list {
-	border: solid 1px #ddd;
-	@include border-radius();
-	@include box-shadow();
-}
 
-	.nav-list > li, .nav-list > li > a {
-		display: block;
-	}
-	
-	.nav-list > li {
-		border-bottom: solid 1px #ddd;
-	}
-	
-	.nav-list > li:last-child {
-		border-bottom: none;
-	}
-	
-		.nav-list > li > a {
-			padding: 10px;
-			@include transition();
-		}
-		
-		.nav-list > li > a:hover {
-			background-color: #fafafa;
+		.nav > li > a {
+			display: block;
 		}

_/scss/objects/_scaffolding.scss

@@ -1,29 +1,51 @@
 .container {
-	padding: 0 ($column-gutter * 2) * 1px;
-	max-width: $container-max-width * 1px;
-	margin: 0 auto;
-	@extend .clearfix;
+  margin: 0 auto;
+  max-width: ($container-max-width - $column-gutter) * 1px;
+  padding: 0 20px;
+  @extend .clearfix;
+}
+
+.container-fluid {
+  width: 100%;
+  @extend .clearfix;
 }
 
 .row {
-	@include breakpoint(tablet-portrait) { margin-left: -($column-gutter / $container-max-width) * 100%; }
-	@extend .clearfix;
+  margin-left: -($column-gutter / $container-max-width) * 100%;
+  _overflow: hidden;
+  @extend .clearfix;
+  @include breakpoint(mobile) { 
+    margin-left: 0; 
+  }
 }
 
-.col {
-	display: block;
-	float: none;
-	width: auto;
-	@include breakpoint(tablet-portrait) { 
-		float: left;
-		margin-left: ($column-gutter / $container-max-width) * 100%;
-	}
+.column {
+  display: inline;
+  float: left;
+  margin-left: ($column-gutter / $container-max-width) * 100%;
+  vertical-align: top;
+  @include breakpoint(mobile) { 
+    display: block;
+    float: none;
+    margin-left: 0;
+    width: auto !important;
+  }
 }
 
 @for $i from 1 through $column-count {
-  .col#{$i} { 
-		@include breakpoint(tablet-portrait) { 
-			@include col-width($i); 
-		}
-	}
+  .column-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%;
+  }
+}
+
+.row-no-gutters .column {
+  margin-left: 0;
+}
+
+@for $i from 1 through $column-count {
+  .row-no-gutters .column-span-#{$i} { 
+    width: ((100 / $column-count) * $i) * 1%;
+    *width: ((100 / $column-count) * $i) - .02 * 1%;
+  }
 }

_/scss/style.scss

@@ -17,7 +17,7 @@ Author: Mike Francis
 
 // Objects
 
+@import 'objects/forms';
 @import 'objects/scaffolding';
 @import 'objects/nav';
-@import 'objects/tables';
-@import 'objects/forms';
+@import 'objects/tables';