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

21 files changed, 430 insertions, 409 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index cb200386a7..f42b5b57bf 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 76e27d6720..fb1d626927 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -83,7 +83,7 @@
   .row {
     margin-left: 0;
   }
-  .row > [class*="span"] {
+  .row > [class*="span"], .row-fluid > [class*="span"] {
     float: none;
     display: block;
     width: auto;
@@ -91,10 +91,20 @@
   }
 }
 @media (min-width: 768px) and (max-width: 940px) {
-  .container {
-    width: 724px;
-    padding-left: 20px;
-    padding-right: 20px;
+  .row {
+    margin-left: -20px;
+    *zoom: 1;
+  }
+  .row:before, .row:after {
+    display: table;
+    content: "";
+  }
+  .row:after {
+    clear: both;
+  }
+  [class*="span"] {
+    float: left;
+    margin-left: 20px;
   }
   .span1 {
     width: 42px;
@@ -129,7 +139,7 @@
   .span11 {
     width: 662px;
   }
-  .span12 {
+  .span12, .container {
     width: 724px;
   }
   .offset1 {
@@ -166,48 +176,94 @@
     margin-left: 702px;
   }
   .row-fluid {
-    width: 102.76243093919337%;
-    margin-left: -2.762430939%;
+    width: 100%;
+    *zoom: 1;
+  }
+  .row-fluid:before, .row-fluid:after {
+    display: table;
+    content: "";
+  }
+  .row-fluid:after {
+    clear: both;
   }
   .row-fluid [class*="span"] {
     float: left;
     margin-left: 2.762430939%;
   }
+  .row-fluid [class*="span"]:first-child {
+    margin-left: 0;
+  }
   .row-fluid .span1 {
-    width: 5.6451612899588115%;
+    width: 5.801104972%;
   }
   .row-fluid .span2 {
-    width: 13.978494622708812%;
+    width: 14.364640883%;
   }
   .row-fluid .span3 {
-    width: 22.31182795545881%;
+    width: 22.928176794%;
   }
   .row-fluid .span4 {
-    width: 30.64516128820881%;
+    width: 31.491712705%;
   }
   .row-fluid .span5 {
-    width: 38.97849462095881%;
+    width: 40.055248616%;
   }
   .row-fluid .span6 {
-    width: 47.311827953708814%;
+    width: 48.618784527%;
   }
   .row-fluid .span7 {
-    width: 55.645161286458816%;
+    width: 57.182320438000005%;
   }
   .row-fluid .span8 {
-    width: 63.97849461920882%;
+    width: 65.74585634900001%;
   }
   .row-fluid .span9 {
-    width: 72.31182795195882%;
+    width: 74.30939226%;
   }
   .row-fluid .span10 {
-    width: 80.64516128470882%;
+    width: 82.87292817100001%;
   }
   .row-fluid .span11 {
-    width: 88.97849461745884%;
+    width: 91.436464082%;
   }
   .row-fluid .span12 {
-    width: 97.31182795020881%;
+    width: 99.999999993%;
+  }
+  input.span1, textarea.span1, .uneditable-input.span1 {
+    width: 32px;
+  }
+  input.span2, textarea.span2, .uneditable-input.span2 {
+    width: 94px;
+  }
+  input.span3, textarea.span3, .uneditable-input.span3 {
+    width: 156px;
+  }
+  input.span4, textarea.span4, .uneditable-input.span4 {
+    width: 218px;
+  }
+  input.span5, textarea.span5, .uneditable-input.span5 {
+    width: 280px;
+  }
+  input.span6, textarea.span6, .uneditable-input.span6 {
+    width: 342px;
+  }
+  input.span7, textarea.span7, .uneditable-input.span7 {
+    width: 404px;
+  }
+  input.span8, textarea.span8, .uneditable-input.span8 {
+    width: 466px;
+  }
+  input.span9, textarea.span9, .uneditable-input.span9 {
+    width: 528px;
+  }
+  input.span10, textarea.span10, .uneditable-input.span10 {
+    width: 590px;
+  }
+  input.span11, textarea.span11, .uneditable-input.span11 {
+    width: 652px;
+  }
+  input.span12, textarea.span12, .uneditable-input.span12 {
+    width: 714px;
   }
 }
 @media (max-width: 940px) {
@@ -316,19 +372,19 @@
   }
 }
 @media (min-width: 1200px) {
-  .thumbnails {
+  .row {
     margin-left: -30px;
+    *zoom: 1;
   }
-  .thumbnails > li {
-    margin-left: 30px;
+  .row:before, .row:after {
+    display: table;
+    content: "";
   }
-  .container {
-    width: 1170px;
-  }
-  .row {
-    margin-left: -30px;
+  .row:after {
+    clear: both;
   }
   [class*="span"] {
+    float: left;
     margin-left: 30px;
   }
   .span1 {
@@ -364,7 +420,7 @@
   .span11 {
     width: 1070px;
   }
-  .span12 {
+  .span12, .container {
     width: 1170px;
   }
   .offset1 {
@@ -401,47 +457,99 @@
     margin-left: 1130px;
   }
   .row-fluid {
-    width: 102.56143440326584%;
-    margin-left: -2.56%;
+    width: 100%;
+    *zoom: 1;
+  }
+  .row-fluid:before, .row-fluid:after {
+    display: table;
+    content: "";
+  }
+  .row-fluid:after {
+    clear: both;
   }
   .row-fluid [class*="span"] {
     float: left;
-    margin-left: 2.56%;
+    margin-left: 2.564102564%;
+  }
+  .row-fluid [class*="span"]:first-child {
+    margin-left: 0;
   }
   .row-fluid .span1 {
-    width: 5.832601732615312%;
+    width: 5.982905983%;
   }
   .row-fluid .span2 {
-    width: 14.16126839928198%;
+    width: 14.529914530000001%;
   }
   .row-fluid .span3 {
-    width: 22.489935065948643%;
+    width: 23.076923077%;
   }
   .row-fluid .span4 {
-    width: 30.818601732615313%;
+    width: 31.623931624%;
   }
   .row-fluid .span5 {
-    width: 39.14726839928198%;
+    width: 40.170940171000005%;
   }
   .row-fluid .span6 {
-    width: 47.47593506594863%;
+    width: 48.717948718%;
   }
   .row-fluid .span7 {
-    width: 55.8046017326153%;
+    width: 57.264957265%;
   }
   .row-fluid .span8 {
-    width: 64.13326839928197%;
+    width: 65.81196581200001%;
   }
   .row-fluid .span9 {
-    width: 72.46193506594864%;
+    width: 74.358974359%;
   }
   .row-fluid .span10 {
-    width: 80.7906017326153%;
+    width: 82.905982906%;
   }
   .row-fluid .span11 {
-    width: 89.11926839928198%;
+    width: 91.45299145300001%;
   }
   .row-fluid .span12 {
-    width: 97.44793506594864%;
+    width: 100%;
+  }
+  input.span1, textarea.span1, .uneditable-input.span1 {
+    width: 60px;
+  }
+  input.span2, textarea.span2, .uneditable-input.span2 {
+    width: 160px;
+  }
+  input.span3, textarea.span3, .uneditable-input.span3 {
+    width: 260px;
+  }
+  input.span4, textarea.span4, .uneditable-input.span4 {
+    width: 360px;
+  }
+  input.span5, textarea.span5, .uneditable-input.span5 {
+    width: 460px;
+  }
+  input.span6, textarea.span6, .uneditable-input.span6 {
+    width: 560px;
+  }
+  input.span7, textarea.span7, .uneditable-input.span7 {
+    width: 660px;
+  }
+  input.span8, textarea.span8, .uneditable-input.span8 {
+    width: 760px;
+  }
+  input.span9, textarea.span9, .uneditable-input.span9 {
+    width: 860px;
+  }
+  input.span10, textarea.span10, .uneditable-input.span10 {
+    width: 960px;
+  }
+  input.span11, textarea.span11, .uneditable-input.span11 {
+    width: 1060px;
+  }
+  input.span12, textarea.span12, .uneditable-input.span12 {
+    width: 1160px;
+  }
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
   }
 }
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 9b6217fbd4..b6766f0aaf 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -126,7 +126,7 @@ a:hover {
   margin-left: 20px;
 }
 .span1 {
-  width: 59.99999999999999px;
+  width: 60px;
 }
 .span2 {
   width: 140px;
@@ -158,7 +158,7 @@ a:hover {
 .span11 {
   width: 860px;
 }
-.span12 {
+.span12, .container {
   width: 940px;
 }
 .offset1 {
@@ -195,48 +195,58 @@ a:hover {
   margin-left: 900px;
 }
 .row-fluid {
-  width: 102.12765957421277%;
-  margin-left: -2.127659574%;
+  width: 100%;
+  *zoom: 1;
+}
+.row-fluid:before, .row-fluid:after {
+  display: table;
+  content: "";
+}
+.row-fluid:after {
+  clear: both;
 }
 .row-fluid [class*="span"] {
   float: left;
   margin-left: 2.127659574%;
 }
+.row-fluid [class*="span"]:first-child {
+  margin-left: 0;
+}
 .row-fluid .span1 {
-  width: 6.249999999619791%;
+  width: 6.382978723%;
 }
 .row-fluid .span2 {
-  width: 14.58333333211979%;
+  width: 14.89361702%;
 }
 .row-fluid .span3 {
-  width: 22.91666666461979%;
+  width: 23.404255317%;
 }
 .row-fluid .span4 {
-  width: 31.24999999711979%;
+  width: 31.914893614%;
 }
 .row-fluid .span5 {
-  width: 39.58333332961979%;
+  width: 40.425531911%;
 }
 .row-fluid .span6 {
-  width: 47.91666666211979%;
+  width: 48.93617020799999%;
 }
 .row-fluid .span7 {
-  width: 56.24999999461979%;
+  width: 57.446808505%;
 }
 .row-fluid .span8 {
-  width: 64.58333332711977%;
+  width: 65.95744680199999%;
 }
 .row-fluid .span9 {
-  width: 72.91666665961978%;
+  width: 74.468085099%;
 }
 .row-fluid .span10 {
-  width: 81.24999999211977%;
+  width: 82.97872339599999%;
 }
 .row-fluid .span11 {
-  width: 89.58333332461977%;
+  width: 91.489361693%;
 }
 .row-fluid .span12 {
-  width: 97.91666665711978%;
+  width: 99.99999998999999%;
 }
 .container {
   width: 940px;
@@ -708,42 +718,6 @@ input.span11, textarea.span11, .uneditable-input.span11 {
 input.span12, textarea.span12, .uneditable-input.span12 {
   width: 930px;
 }
-select.span1 {
-  width: 70px;
-}
-select.span2 {
-  width: 150px;
-}
-select.span3 {
-  width: 230px;
-}
-select.span4 {
-  width: 310px;
-}
-select.span5 {
-  width: 390px;
-}
-select.span6 {
-  width: 470px;
-}
-select.span7 {
-  width: 550px;
-}
-select.span8 {
-  width: 630px;
-}
-select.span9 {
-  width: 710px;
-}
-select.span10 {
-  width: 790px;
-}
-select.span11 {
-  width: 870px;
-}
-select.span12 {
-  width: 950px;
-}
 input[disabled],
 select[disabled],
 textarea[disabled],
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 1380b9e6c9..acbcc69412 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -553,6 +553,7 @@ form.well {
 }
 
 /* For input sizes, make them display block */
+.docs-input-sizes select,
 .docs-input-sizes input[type=text] {
   display: block;
   margin-bottom: 9px;
diff --git a/docs/base-css.html b/docs/base-css.html
index 0406ff229e..72eea8d671 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
@@ -1078,6 +1082,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
               <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
               <input class="span3" type="text" placeholder=".span3">
+              <select class="span1">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <select class="span2">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <select class="span3">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
               <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
             </div>
           </div>
diff --git a/docs/components.html b/docs/components.html
index 95c7c99078..f62d84b9a9 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/download.html b/docs/download.html
index 832b07ce65..da442ac620 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -62,6 +62,10 @@
               <li class="active">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/examples.html b/docs/examples.html
index 7d79fc0a0a..63570c7cb0 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="active">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/index.html b/docs/index.html
index e20d08bcdd..055f36028c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/javascript.html b/docs/javascript.html
index eb4a175c33..c4c3dd72a9 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/less.html b/docs/less.html
index 5935c91259..1242b66a17 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index b9eb399f9b..5f3cd4f43f 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 7c0ab655be..b372820fda 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -62,6 +62,10 @@
               <li class="{{download}}">
                 <a href="./download.html">{{_i}}Customize{{/i}}</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="{{examples}}">
+                <a href="./examples.html">{{_i}}Examples{{/i}}</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index b47bcf2659..dedc201f35 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1006,6 +1006,27 @@
               <input class="span1" type="text" placeholder=".span1">
               <input class="span2" type="text" placeholder=".span2">
               <input class="span3" type="text" placeholder=".span3">
+              <select class="span1">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <select class="span2">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+              <select class="span3">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
               <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
             </div>
           </div>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index d7ad30f561..f4f848c111 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -62,6 +62,10 @@
               <li class="">
                 <a href="./download.html">Customize</a>
               </li>
+              <li class="vertical-divider"></li>
+              <li class="">
+                <a href="./examples.html">Examples</a>
+              </li>
             </ul>
           </div>
         </div>
diff --git a/examples/fluid.html b/examples/fluid.html
index 1cdfd6568f..738c520581 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -55,7 +55,7 @@
     </div>
 
     <div class="container-fluid">
-      <div class="row row-fluid">
+      <div class="row-fluid">
         <div class="span3">
           <div class="well sidebar-nav">
             <ul class="nav list">
@@ -84,7 +84,7 @@
             <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
             <p><a class="btn primary large">Learn more &raquo;</a></p>
           </div>
-          <div class="row row-fluid">
+          <div class="row-fluid">
             <div class="span4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
@@ -101,7 +101,7 @@
               <p><a class="btn" href="#">View details &raquo;</a></p>
             </div><!--/span-->
           </div><!--/row-->
-          <div class="row row-fluid">
+          <div class="row-fluid">
             <div class="span4">
               <h2>Heading</h2>
               <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
diff --git a/less/forms.less b/less/forms.less
index 9d94a64b7e..131f8af555 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 2ef767a4a7..4acb0a44ce 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 cba2670db1..39e1d87967 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 a1d4cf2c88..72fa213848 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 f09a88cdb3..d9d79f05c1 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%;
+