overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts

5 files changed, 166 insertions, 310 deletions

diff --git a/less/forms.less b/less/forms.less
index 9d94a64b7..131f8af55 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -229,45 +229,13 @@ textarea[class*="span"],
   margin-left: 0;
 }
 
-// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
-.inputColumns(@columnSpan: 1) {
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
-}
-input,
-textarea,
-.uneditable-input {
-  // Default columns
-  &.span1     { .inputColumns(1); }
-  &.span2     { .inputColumns(2); }
-  &.span3     { .inputColumns(3); }
-  &.span4     { .inputColumns(4); }
-  &.span5     { .inputColumns(5); }
-  &.span6     { .inputColumns(6); }
-  &.span7     { .inputColumns(7); }
-  &.span8     { .inputColumns(8); }
-  &.span9     { .inputColumns(9); }
-  &.span10    { .inputColumns(10); }
-  &.span11    { .inputColumns(11); }
-  &.span12    { .inputColumns(12); }
-}
-
-.selectColumns(@columnSpan: 1) {
-  width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
-}
-select {
-  &.span1     { .selectColumns(1); }
-  &.span2     { .selectColumns(2); }
-  &.span3     { .selectColumns(3); }
-  &.span4     { .selectColumns(4); }
-  &.span5     { .selectColumns(5); }
-  &.span6     { .selectColumns(6); }
-  &.span7     { .selectColumns(7); }
-  &.span8     { .selectColumns(8); }
-  &.span9     { .selectColumns(9); }
-  &.span10    { .selectColumns(10); }
-  &.span11    { .selectColumns(11); }
-  &.span12    { .selectColumns(12); }
-}
+
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
+#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+
 
 
 
diff --git a/less/grid.less b/less/grid.less
index 2ef767a4a..4acb0a44c 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -1,81 +1,8 @@
 // GRID SYSTEM
 // -----------
 
+// Fixed (940px)
+#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
 
-// Grid rows and 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"] {
-  .gridColumn();
-}
-
-// Default columns
-.span1     { .columns(1); }
-.span2     { .columns(2); }
-.span3     { .columns(3); }
-.span4     { .columns(4); }
-.span5     { .columns(5); }
-.span6     { .columns(6); }
-.span7     { .columns(7); }
-.span8     { .columns(8); }
-.span9     { .columns(9); }
-.span10    { .columns(10); }
-.span11    { .columns(11); }
-.span12    { .columns(12); }
-
-// Offset column options
-.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); }
-
-
-
-// FLUID GRID SYSTEM
-// -----------------
-// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.
-
-.row-fluid {
-  @gridColumnWidth: 6.382978723%;
-  @gridGutterWidth: 2.127659574%;
-
-  width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
-  margin-left: 0 - @gridGutterWidth;
-
-  // Redeclare the mixins
-  .gridColumn() {
-    float: left;
-    margin-left: @gridGutterWidth;
-  } 
-  [class*="span"] {
-    .gridColumn();
-  }
-  .fluidColumns(@columns: 1) {
-    width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
-  }
-  // Redeclare the columns
-  .span1     { .fluidColumns(1); }
-  .span2     { .fluidColumns(2); }
-  .span3     { .fluidColumns(3); }
-  .span4     { .fluidColumns(4); }
-  .span5     { .fluidColumns(5); }
-  .span6     { .fluidColumns(6); }
-  .span7     { .fluidColumns(7); }
-  .span8     { .fluidColumns(8); }
-  .span9     { .fluidColumns(9); }
-  .span10    { .fluidColumns(10); }
-  .span11    { .fluidColumns(11); }
-  .span12    { .fluidColumns(12); }
-}
+// Fluid (940px)
+#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
diff --git a/less/mixins.less b/less/mixins.less
index cba2670db..39e1d8796 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -133,25 +133,135 @@
 // Site container
 // -------------------------
 .container-fixed() {
-  width: @gridTotalWidth;
+  width: @gridRowWidth;
   margin-left: auto;
   margin-right: auto;
   .clearfix();
 }
 
-// Columns and offseting mixins
-// ----------------------------
-.columns(@columns: 1) {
-  //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
+// 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);
+    }
+    // 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,
+    .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+    // 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); }
+  }
 }
-.offset(@columns: 1) {
-  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+
+// 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); }
+    }
+  }
 }
-// Necessary grid styles for every column to make them appear next to each other horizontally
-.gridColumn() {
-  float: left;
-  margin-left: @gridGutterWidth;
+
+
+
+
+// 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); }
+    }
+  }
 }
 
 
diff --git a/less/responsive.less b/less/responsive.less
index a1d4cf2c8..72fa21384 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -125,7 +125,8 @@
     margin-left: 0;
   }
   // Make all columns even
-  .row > [class*="span"] {
+  .row > [class*="span"],
+  .row-fluid > [class*="span"] {
     float: none;
     display: block;
     width: auto;
@@ -140,90 +141,15 @@
 
 @media (min-width: 768px) and (max-width: 940px) {
 
-  // Reset grid variables
-  @gridColumns:       12;
-  @gridColumnWidth:   42px;
-  @gridGutterWidth:   20px;
-  @siteWidth:         724px;
+  // Fixed grid
+  #gridSystem > .generate(12, 42px, 20px);
 
-  // Bring grid mixins to recalculate widths
-  .columns(@columns: 1) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  }
-  .offset(@columns: 1) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
+  // Fluid grid
+  #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
+
+  // Input grid
+  #inputGridSystem > .generate(12, 42px, 20px);
 
-  // 12cols at 44px wide with 20px gutters
-  .container {
-    width: @siteWidth;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .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); }
-
-  // FLUID GRID
-  // ----------
-  .row-fluid {
-    @gridColumnWidth:     5.801104972%;
-    @gridGutterWidth:     2.762430939%;
-    @gridRowWidth:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-    @gridTotalWidth:      @gridRowWidth;
-
-    width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
-    margin-left: 0 - @gridGutterWidth;
-
-    // Redeclare the mixins
-    .gridColumn() {
-      float: left;
-      margin-left: @gridGutterWidth;
-    } 
-    [class*="span"] {
-      .gridColumn();
-    }
-    .fluidColumns(@columns: 1) {
-      width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
-    }
-    // Redeclare the columns
-    .span1     { .fluidColumns(1); }
-    .span2     { .fluidColumns(2); }
-    .span3     { .fluidColumns(3); }
-    .span4     { .fluidColumns(4); }
-    .span5     { .fluidColumns(5); }
-    .span6     { .fluidColumns(6); }
-    .span7     { .fluidColumns(7); }
-    .span8     { .fluidColumns(8); }
-    .span9     { .fluidColumns(9); }
-    .span10    { .fluidColumns(10); }
-    .span11    { .fluidColumns(11); }
-    .span12    { .fluidColumns(12); }
-  }
 }
 
 
@@ -362,99 +288,21 @@
 
 @media (min-width: 1200px) {
 
-  // Reset grid variables
-  @gridColumns:       12;
-  @gridColumnWidth:   70px;
-  @gridGutterWidth:   30px;
-  @siteWidth:         1170px;
+  // Fixed grid
+  #gridSystem > .generate(12, 70px, 30px);
+
+  // Fluid grid
+  #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
+  
+  // Input grid
+  #inputGridSystem > .generate(12, 70px, 30px);
 
   // Thumbnails
   .thumbnails {
-    margin-left: @gridGutterWidth * -1;
+    margin-left: -30px;
   }
   .thumbnails > li {
-    margin-left: @gridGutterWidth;
+    margin-left: 30px;
   }
 
-  // Bring grid mixins to recalculate widths
-  .columns(@columns: 1) {
-    width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
-  }
-  .offset(@columns: 1) {
-    margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-  }
-  .container {
-    width: @siteWidth;
-  }
-  .row {
-    margin-left: @gridGutterWidth * -1;
-  }
-  [class*="span"] {
-    margin-left: @gridGutterWidth;
-  }
-
-  // Default columns
-  .span1     { .columns(1); }
-  .span2     { .columns(2); }
-  .span3     { .columns(3); }
-  .span4     { .columns(4); }
-  .span5     { .columns(5); }
-  .span6     { .columns(6); }
-  .span7     { .columns(7); }
-  .span8     { .columns(8); }
-  .span9     { .columns(9); }
-  .span10    { .columns(10); }
-  .span11    { .columns(11); }
-  .span12    { .columns(12); }
-
-  // Offset column options
-  .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); }
-
-
-  // FLUID GRID
-  // ----------
-  .row-fluid {
-    @gridColumnWidth:     5.982%;
-    @gridGutterWidth:     2.56%;
-    @gridRowWidth:        (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-    @gridTotalWidth:      @gridRowWidth;
-
-    width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
-    margin-left: 0 - @gridGutterWidth;
-
-    // Redeclare the mixins
-    .gridColumn() {
-      float: left;
-      margin-left: @gridGutterWidth;
-    } 
-    [class*="span"] {
-      .gridColumn();
-    }
-    .fluidColumns(@columns: 1) {
-      width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
-    }
-    // Redeclare the columns
-    .span1     { .fluidColumns(1); }
-    .span2     { .fluidColumns(2); }
-    .span3     { .fluidColumns(3); }
-    .span4     { .fluidColumns(4); }
-    .span5     { .fluidColumns(5); }
-    .span6     { .fluidColumns(6); }
-    .span7     { .fluidColumns(7); }
-    .span8     { .fluidColumns(8); }
-    .span9     { .fluidColumns(9); }
-    .span10    { .fluidColumns(10); }
-    .span11    { .fluidColumns(11); }
-    .span12    { .fluidColumns(12); }
-  }
 }
diff --git a/less/variables.less b/less/variables.less
index f09a88cdb..d9d79f05c 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -40,17 +40,6 @@
 
 
 
-// GRID SYSTEM VARIABLES
-// --------------------------------------------------
-
-@gridColumns:           12;
-@gridColumnWidth:       60px;
-@gridGutterWidth:       20px;
-@gridRowWidth:          (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-@gridTotalWidth:        @gridRowWidth;
-
-
-
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
@@ -94,3 +83,17 @@
 @infoBorder:              darken(spin(@infoBackground, -10), 7%);
 
 
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+@gridColumns:             12;
+@gridColumnWidth:         60px;
+@gridGutterWidth:         20px;
+@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Fluid grid
+@fluidGridColumnWidth:    6.382978723%;
+@fluidGridGutterWidth:    2.127659574%;
+