rewrite the grid system. Clean shit up tons - only generate 12 columns by default - custom builder will do differently if you request it.

7 files changed, 137 insertions, 647 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index c451d13a2..eccddc363 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index a5ebd1144..7b7a810d9 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -213,42 +213,6 @@
   .span12 {
     width: 724px;
   }
-  .span13 {
-    width: 786px;
-  }
-  .span14 {
-    width: 848px;
-  }
-  .span15 {
-    width: 910px;
-  }
-  .span16 {
-    width: 972px;
-  }
-  .span17 {
-    width: 1034px;
-  }
-  .span18 {
-    width: 1096px;
-  }
-  .span19 {
-    width: 1158px;
-  }
-  .span20 {
-    width: 1220px;
-  }
-  .span21 {
-    width: 1282px;
-  }
-  .span22 {
-    width: 1344px;
-  }
-  .span23 {
-    width: 1406px;
-  }
-  .span24 {
-    width: 1468px;
-  }
   .offset1 {
     margin-left: 82px;
   }
@@ -285,39 +249,6 @@
   .offset12 {
     margin-left: 764px;
   }
-  .offset13 {
-    margin-left: 826px;
-  }
-  .offset14 {
-    margin-left: 888px;
-  }
-  .offset15 {
-    margin-left: 950px;
-  }
-  .offset16 {
-    margin-left: 1012px;
-  }
-  .offset17 {
-    margin-left: 1074px;
-  }
-  .offset18 {
-    margin-left: 1136px;
-  }
-  .offset19 {
-    margin-left: 1198px;
-  }
-  .offset20 {
-    margin-left: 1260px;
-  }
-  .offset21 {
-    margin-left: 1322px;
-  }
-  .offset22 {
-    margin-left: 1384px;
-  }
-  .offset23 {
-    margin-left: 1446px;
-  }
   .row-fluid {
     width: 100%;
     *zoom: 1;
@@ -372,42 +303,6 @@
   .row-fluid > .span12 {
     width: 99.999999993%;
   }
-  .row-fluid > .span13 {
-    width: 108.563535904%;
-  }
-  .row-fluid > .span14 {
-    width: 117.12707181500001%;
-  }
-  .row-fluid > .span15 {
-    width: 125.690607726%;
-  }
-  .row-fluid > .span16 {
-    width: 134.254143637%;
-  }
-  .row-fluid > .span17 {
-    width: 142.817679548%;
-  }
-  .row-fluid > .span18 {
-    width: 151.381215459%;
-  }
-  .row-fluid > .span19 {
-    width: 159.94475137%;
-  }
-  .row-fluid > .span20 {
-    width: 168.508287281%;
-  }
-  .row-fluid > .span21 {
-    width: 177.071823192%;
-  }
-  .row-fluid > .span22 {
-    width: 185.635359103%;
-  }
-  .row-fluid > .span23 {
-    width: 194.19889501400002%;
-  }
-  .row-fluid > .span24 {
-    width: 202.762430925%;
-  }
   input.span1, textarea.span1, .uneditable-input.span1 {
     width: 32px;
   }
@@ -444,42 +339,6 @@
   input.span12, textarea.span12, .uneditable-input.span12 {
     width: 714px;
   }
-  input.span13, textarea.span13, .uneditable-input.span13 {
-    width: 776px;
-  }
-  input.span14, textarea.span14, .uneditable-input.span14 {
-    width: 838px;
-  }
-  input.span15, textarea.span15, .uneditable-input.span15 {
-    width: 900px;
-  }
-  input.span16, textarea.span16, .uneditable-input.span16 {
-    width: 962px;
-  }
-  input.span17, textarea.span17, .uneditable-input.span17 {
-    width: 1024px;
-  }
-  input.span18, textarea.span18, .uneditable-input.span18 {
-    width: 1086px;
-  }
-  input.span19, textarea.span19, .uneditable-input.span19 {
-    width: 1148px;
-  }
-  input.span20, textarea.span20, .uneditable-input.span20 {
-    width: 1210px;
-  }
-  input.span21, textarea.span21, .uneditable-input.span21 {
-    width: 1272px;
-  }
-  input.span22, textarea.span22, .uneditable-input.span22 {
-    width: 1334px;
-  }
-  input.span23, textarea.span23, .uneditable-input.span23 {
-    width: 1396px;
-  }
-  input.span24, textarea.span24, .uneditable-input.span24 {
-    width: 1458px;
-  }
 }
 @media (max-width: 979px) {
   body {
@@ -646,42 +505,6 @@
   .span12 {
     width: 1170px;
   }
-  .span13 {
-    width: 1270px;
-  }
-  .span14 {
-    width: 1370px;
-  }
-  .span15 {
-    width: 1470px;
-  }
-  .span16 {
-    width: 1570px;
-  }
-  .span17 {
-    width: 1670px;
-  }
-  .span18 {
-    width: 1770px;
-  }
-  .span19 {
-    width: 1870px;
-  }
-  .span20 {
-    width: 1970px;
-  }
-  .span21 {
-    width: 2070px;
-  }
-  .span22 {
-    width: 2170px;
-  }
-  .span23 {
-    width: 2270px;
-  }
-  .span24 {
-    width: 2370px;
-  }
   .offset1 {
     margin-left: 130px;
   }
@@ -718,39 +541,6 @@
   .offset12 {
     margin-left: 1230px;
   }
-  .offset13 {
-    margin-left: 1330px;
-  }
-  .offset14 {
-    margin-left: 1430px;
-  }
-  .offset15 {
-    margin-left: 1530px;
-  }
-  .offset16 {
-    margin-left: 1630px;
-  }
-  .offset17 {
-    margin-left: 1730px;
-  }
-  .offset18 {
-    margin-left: 1830px;
-  }
-  .offset19 {
-    margin-left: 1930px;
-  }
-  .offset20 {
-    margin-left: 2030px;
-  }
-  .offset21 {
-    margin-left: 2130px;
-  }
-  .offset22 {
-    margin-left: 2230px;
-  }
-  .offset23 {
-    margin-left: 2330px;
-  }
   .row-fluid {
     width: 100%;
     *zoom: 1;
@@ -805,42 +595,6 @@
   .row-fluid > .span12 {
     width: 100%;
   }
-  .row-fluid > .span13 {
-    width: 108.547008547%;
-  }
-  .row-fluid > .span14 {
-    width: 117.09401709400001%;
-  }
-  .row-fluid > .span15 {
-    width: 125.64102564100001%;
-  }
-  .row-fluid > .span16 {
-    width: 134.18803418800002%;
-  }
-  .row-fluid > .span17 {
-    width: 142.735042735%;
-  }
-  .row-fluid > .span18 {
-    width: 151.282051282%;
-  }
-  .row-fluid > .span19 {
-    width: 159.82905982900002%;
-  }
-  .row-fluid > .span20 {
-    width: 168.376068376%;
-  }
-  .row-fluid > .span21 {
-    width: 176.923076923%;
-  }
-  .row-fluid > .span22 {
-    width: 185.47008547000001%;
-  }
-  .row-fluid > .span23 {
-    width: 194.017094017%;
-  }
-  .row-fluid > .span24 {
-    width: 202.564102564%;
-  }
   input.span1, textarea.span1, .uneditable-input.span1 {
     width: 60px;
   }
@@ -877,42 +631,6 @@
   input.span12, textarea.span12, .uneditable-input.span12 {
     width: 1160px;
   }
-  input.span13, textarea.span13, .uneditable-input.span13 {
-    width: 1260px;
-  }
-  input.span14, textarea.span14, .uneditable-input.span14 {
-    width: 1360px;
-  }
-  input.span15, textarea.span15, .uneditable-input.span15 {
-    width: 1460px;
-  }
-  input.span16, textarea.span16, .uneditable-input.span16 {
-    width: 1560px;
-  }
-  input.span17, textarea.span17, .uneditable-input.span17 {
-    width: 1660px;
-  }
-  input.span18, textarea.span18, .uneditable-input.span18 {
-    width: 1760px;
-  }
-  input.span19, textarea.span19, .uneditable-input.span19 {
-    width: 1860px;
-  }
-  input.span20, textarea.span20, .uneditable-input.span20 {
-    width: 1960px;
-  }
-  input.span21, textarea.span21, .uneditable-input.span21 {
-    width: 2060px;
-  }
-  input.span22, textarea.span22, .uneditable-input.span22 {
-    width: 2160px;
-  }
-  input.span23, textarea.span23, .uneditable-input.span23 {
-    width: 2260px;
-  }
-  input.span24, textarea.span24, .uneditable-input.span24 {
-    width: 2360px;
-  }
   .thumbnails {
     margin-left: -30px;
   }
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index e9fb04f2d..41eeea9fa 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -173,42 +173,6 @@ a:hover {
 .span12 {
   width: 940px;
 }
-.span13 {
-  width: 1020px;
-}
-.span14 {
-  width: 1100px;
-}
-.span15 {
-  width: 1180px;
-}
-.span16 {
-  width: 1260px;
-}
-.span17 {
-  width: 1340px;
-}
-.span18 {
-  width: 1420px;
-}
-.span19 {
-  width: 1500px;
-}
-.span20 {
-  width: 1580px;
-}
-.span21 {
-  width: 1660px;
-}
-.span22 {
-  width: 1740px;
-}
-.span23 {
-  width: 1820px;
-}
-.span24 {
-  width: 1900px;
-}
 .offset1 {
   margin-left: 100px;
 }
@@ -245,39 +209,6 @@ a:hover {
 .offset12 {
   margin-left: 980px;
 }
-.offset13 {
-  margin-left: 1060px;
-}
-.offset14 {
-  margin-left: 1140px;
-}
-.offset15 {
-  margin-left: 1220px;
-}
-.offset16 {
-  margin-left: 1300px;
-}
-.offset17 {
-  margin-left: 1380px;
-}
-.offset18 {
-  margin-left: 1460px;
-}
-.offset19 {
-  margin-left: 1540px;
-}
-.offset20 {
-  margin-left: 1620px;
-}
-.offset21 {
-  margin-left: 1700px;
-}
-.offset22 {
-  margin-left: 1780px;
-}
-.offset23 {
-  margin-left: 1860px;
-}
 .row-fluid {
   width: 100%;
   *zoom: 1;
@@ -332,42 +263,6 @@ a:hover {
 .row-fluid > .span12 {
   width: 99.99999998999999%;
 }
-.row-fluid > .span13 {
-  width: 108.510638287%;
-}
-.row-fluid > .span14 {
-  width: 117.02127658399999%;
-}
-.row-fluid > .span15 {
-  width: 125.531914881%;
-}
-.row-fluid > .span16 {
-  width: 134.042553178%;
-}
-.row-fluid > .span17 {
-  width: 142.553191475%;
-}
-.row-fluid > .span18 {
-  width: 151.063829772%;
-}
-.row-fluid > .span19 {
-  width: 159.57446806899998%;
-}
-.row-fluid > .span20 {
-  width: 168.085106366%;
-}
-.row-fluid > .span21 {
-  width: 176.595744663%;
-}
-.row-fluid > .span22 {
-  width: 185.10638296000002%;
-}
-.row-fluid > .span23 {
-  width: 193.617021257%;
-}
-.row-fluid > .span24 {
-  width: 202.127659554%;
-}
 .container {
   margin-left: auto;
   margin-right: auto;
@@ -867,42 +762,6 @@ input.span11, textarea.span11, .uneditable-input.span11 {
 input.span12, textarea.span12, .uneditable-input.span12 {
   width: 930px;
 }
-input.span13, textarea.span13, .uneditable-input.span13 {
-  width: 1010px;
-}
-input.span14, textarea.span14, .uneditable-input.span14 {
-  width: 1090px;
-}
-input.span15, textarea.span15, .uneditable-input.span15 {
-  width: 1170px;
-}
-input.span16, textarea.span16, .uneditable-input.span16 {
-  width: 1250px;
-}
-input.span17, textarea.span17, .uneditable-input.span17 {
-  width: 1330px;
-}
-input.span18, textarea.span18, .uneditable-input.span18 {
-  width: 1410px;
-}
-input.span19, textarea.span19, .uneditable-input.span19 {
-  width: 1490px;
-}
-input.span20, textarea.span20, .uneditable-input.span20 {
-  width: 1570px;
-}
-input.span21, textarea.span21, .uneditable-input.span21 {
-  width: 1650px;
-}
-input.span22, textarea.span22, .uneditable-input.span22 {
-  width: 1730px;
-}
-input.span23, textarea.span23, .uneditable-input.span23 {
-  width: 1810px;
-}
-input.span24, textarea.span24, .uneditable-input.span24 {
-  width: 1890px;
-}
 input[disabled],
 select[disabled],
 textarea[disabled],
diff --git a/less/forms.less b/less/forms.less
index bc89bdc3f..9a0d3b849 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -253,7 +253,7 @@ textarea[class*="span"],
 // GRID SIZING FOR INPUTS
 // ----------------------
 
-#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+#grid > .input (@gridColumnWidth, @gridGutterWidth);
 
 
 
@@ -301,7 +301,7 @@ select:focus:required:invalid {
   border-color: #ee5f5b;
   &:focus {
     border-color: darken(#ee5f5b, 10%);
-    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));    
+    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
   }
 }
 
@@ -410,7 +410,7 @@ select:focus:required:invalid {
   }
   .uneditable-input {
     border-left-color: #eee;
-    border-right-color: #ccc;    
+    border-right-color: #ccc;
   }
   .add-on {
     margin-right: 0;
diff --git a/less/grid.less b/less/grid.less
index 4acb0a44c..e62a96093 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -1,8 +1,5 @@
-// GRID SYSTEM
-// -----------
-
 // Fixed (940px)
-#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+#grid > .core(@gridColumnWidth, @gridGutterWidth);
 
 // Fluid (940px)
-#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
+#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth);
\ No newline at end of file
diff --git a/less/mixins.less b/less/mixins.less
index 4561e98cb..2a184aaba 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -135,216 +135,6 @@
 }
 
 
-
-// GRID SYSTEM
-// --------------------------------------------------
-
-// Site container
-// -------------------------
-.container-fixed() {
-  margin-left: auto;
-  margin-right: auto;
-  .clearfix();
-}
-
-// Le grid system
-// -------------------------
-#gridSystem {
-  // Setup the mixins to be used
-  .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  } 
-  .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
-  .gridColumn(@gridGutterWidth) {
-    float: left;
-    margin-left: @gridGutterWidth;
-  }
-  // Take these values and mixins, and make 'em do their thang
-  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
-    // Row surrounds the columns
-    .row {
-      margin-left: @gridGutterWidth * -1;
-      .clearfix();
-    }
-    // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
-    [class*="span"] {
-      #gridSystem > .gridColumn(@gridGutterWidth);
-    }
-    
-    // Fixed container
-    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @gridColumns); }
-
-    // Default columns
-    .span1     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
-    .span2     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
-    .span3     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
-    .span4     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
-    .span5     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
-    .span6     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
-    .span7     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
-    .span8     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
-    .span9     { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
-    .span10    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
-    .span11    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
-    .span12    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
-    .span13    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
-    .span14    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
-    .span15    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
-    .span16    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
-    .span17    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 17); }
-    .span18    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 18); }
-    .span19    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 19); }
-    .span20    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 20); }
-    .span21    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 21); }
-    .span22    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 22); }
-    .span23    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 23); }
-    .span24    { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 24); }
-    
-    // Offset column options
-    .offset1   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
-    .offset2   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
-    .offset3   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
-    .offset4   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
-    .offset5   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
-    .offset6   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
-    .offset7   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
-    .offset8   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
-    .offset9   { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
-    .offset10  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
-    .offset11  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
-    .offset12  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 12); }
-    .offset13  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 13); }
-    .offset14  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 14); }
-    .offset15  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 15); }
-    .offset16  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 16); }
-    .offset17  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 17); }
-    .offset18  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 18); }
-    .offset19  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 19); }
-    .offset20  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 20); }
-    .offset21  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 21); }
-    .offset22  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 22); }
-    .offset23  { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 23); }
-  }
-}
-
-// Fluid grid system
-// -------------------------
-#fluidGridSystem {
-  // Setup the mixins to be used
-  .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
-    width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
-  }
-  .gridColumn(@fluidGridGutterWidth) {
-    float: left;
-    margin-left: @fluidGridGutterWidth;
-  }
-  // Take these values and mixins, and make 'em do their thang
-  .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
-    // Row surrounds the columns
-    .row-fluid {
-      width: 100%;
-      .clearfix();
-
-      // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
-      > [class*="span"] {
-        #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
-      }
-      > [class*="span"]:first-child {
-        margin-left: 0;
-      }
-      // Default columns
-      > .span1     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
-      > .span2     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
-      > .span3     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
-      > .span4     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
-      > .span5     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
-      > .span6     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
-      > .span7     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
-      > .span8     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
-      > .span9     { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
-      > .span10    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
-      > .span11    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
-      > .span12    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
-      > .span13    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 13); }
-      > .span14    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 14); }
-      > .span15    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 15); }
-      > .span16    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 16); }
-      > .span17    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 17); }
-      > .span18    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 18); }
-      > .span19    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 19); }
-      > .span20    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 20); }
-      > .span21    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 21); }
-      > .span22    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 22); }
-      > .span23    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 23); }
-      > .span24    { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 24); }
-    }
-  }
-}
-
-// Input grid system
-// -------------------------
-#inputGridSystem {
-  .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
-    width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
-  }
-  .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
-    input,
-    textarea,
-    .uneditable-input {
-      &.span1     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
-      &.span2     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
-      &.span3     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
-      &.span4     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
-      &.span5     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
-      &.span6     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
-      &.span7     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
-      &.span8     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
-      &.span9     { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
-      &.span10    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
-      &.span11    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
-      &.span12    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
-      &.span13    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); }
-      &.span14    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); }
-      &.span15    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); }
-      &.span16    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); }
-      &.span17    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 17); }
-      &.span18    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 18); }
-      &.span19    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 19); }
-      &.span20    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 20); }
-      &.span21    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 21); }
-      &.span22    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 22); }
-      &.span23    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 23); }
-      &.span24    { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 24); }
-    }
-  }
-}
-
-// Table grid system
-// -------------------------
-.tableColumns(@columnSpan: 1) {
-  float: none; // undo default grid column styles
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
-  margin-left: 0; // undo default grid column styles
-}
-
-
-// Make a Grid
-// -------------------------
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-.makeRow() {
-  margin-left: @gridGutterWidth * -1;
-  .clearfix();
-}
-.makeColumn(@columns: 1) {
-  float: left;
-  margin-left: @gridGutterWidth;
-  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-}
-
-
-
 // Form field states (used in forms.less)
 // --------------------------------------------------
 
@@ -674,3 +464,129 @@
     border-right: @arrowWidth solid @black;
   }
 }
+
+// Grid System
+// -----------
+
+.container-fixed() {
+  margin-left: auto;
+  margin-right: auto;
+  .clearfix();
+}
+
+.tableColumns(@columnSpan: 1) {
+  float: none; // undo default grid column styles
+  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
+  margin-left: 0; // undo default grid column styles
+}
+
+#grid {
+
+  .core (@gridColumnWidth, @gridGutterWidth) {
+
+    .span (@columns) {
+      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+    }
+
+    .offset (@columns) {
+      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+    }
+
+    .row {
+      margin-left: @gridGutterWidth * -1;
+      .clearfix();
+    }
+
+    [class*="span"] {
+      float: left;
+      margin-left: @gridGutterWidth;
+    }
+
+    .container { .span(12); }
+
+    .span1 { .span(1) }
+    .span2 { .span(2) }
+    .span3 { .span(3) }
+    .span4 { .span(4) }
+    .span5 { .span(5) }
+    .span6 { .span(6) }
+    .span7 { .span(7) }
+    .span8 { .span(8) }
+    .span9 { .span(9) }
+    .span10 { .span(10) }
+    .span11 { .span(11) }
+    .span12 { .span(12) }
+
+    .offset1 { .offset(1) }
+    .offset2 { .offset(2) }
+    .offset3 { .offset(3) }
+    .offset4 { .offset(4) }
+    .offset5 { .offset(5) }
+    .offset6 { .offset(6) }
+    .offset7 { .offset(7) }
+    .offset8 { .offset(8) }
+    .offset9 { .offset(9) }
+    .offset10 { .offset(10) }
+    .offset11 { .offset(11) }
+    .offset12 { .offset(12) }
+
+  }
+
+  .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
+
+    .span (@columns) {
+      width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+    }
+
+    .row-fluid {
+      width: 100%;
+      .clearfix();
+      > [class*="span"] {
+        float: left;
+        margin-left: @fluidGridGutterWidth;
+      }
+      > [class*="span"]:first-child {
+        margin-left: 0;
+      }
+      > .span1 { .span(1) }
+      > .span2 { .span(2) }
+      > .span3 { .span(3) }
+      > .span4 { .span(4) }
+      > .span5 { .span(5) }
+      > .span6 { .span(6) }
+      > .span7 { .span(7) }
+      > .span8 { .span(8) }
+      > .span9 { .span(9) }
+      > .span10 { .span(10) }
+      > .span11 { .span(11) }
+      > .span12 { .span(12) }
+    }
+
+  }
+
+  .input(@gridColumnWidth, @gridGutterWidth) {
+
+    .span(@columns) {
+      width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+    }
+
+    input,
+    textarea,
+    .uneditable-input {
+      &.span1 { .span(1) }
+      &.span2 { .span(2) }
+      &.span3 { .span(3) }
+      &.span4 { .span(4) }
+      &.span5 { .span(5) }
+      &.span6 { .span(6) }
+      &.span7 { .span(7) }
+      &.span8 { .span(8) }
+      &.span9 { .span(9) }
+      &.span10 { .span(10) }
+      &.span11 { .span(11) }
+      &.span12 { .span(12) }
+    }
+
+  }
+
+}
\ No newline at end of file
diff --git a/less/responsive.less b/less/responsive.less
index aacefe6cc..7fa62cad9 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -188,13 +188,13 @@
 @media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
-  #gridSystem > .generate(@gridColumns, 42px, 20px);
+  #grid > .core(42px, 20px);
 
   // Fluid grid
-  #fluidGridSystem > .generate(@gridColumns, 5.801104972%, 2.762430939%);
+  #grid > .fluid(5.801104972%, 2.762430939%);
 
   // Input grid
-  #inputGridSystem > .generate(@gridColumns, 42px, 20px);
+  #grid > .input(42px, 20px);
 
 }
 
@@ -340,13 +340,13 @@
 @media (min-width: 1200px) {
 
   // Fixed grid
-  #gridSystem > .generate(@gridColumns, 70px, 30px);
+  #grid > .core(70px, 30px);
 
   // Fluid grid
-  #fluidGridSystem > .generate(@gridColumns, 5.982905983%, 2.564102564%);
+  #grid > .fluid(5.982905983%, 2.564102564%);
 
   // Input grid
-  #inputGridSystem > .generate(@gridColumns, 70px, 30px);
+  #grid > .input(70px, 30px);
 
   // Thumbnails
   .thumbnails {