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

4 files changed, 137 insertions, 224 deletions

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 {