create vars for responsive grid values, fixed and fluid, and document them in the customizer

8 files changed, 71 insertions, 13 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f51ab59a1..2ecc9690e 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -215,7 +215,9 @@
     float: left;
     margin-left: 20px;
   }
-  .container {
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
     width: 724px;
   }
   .span12 {
@@ -545,7 +547,9 @@
     float: left;
     margin-left: 30px;
   }
-  .container {
+  .container,
+  .navbar-fixed-top .container,
+  .navbar-fixed-bottom .container {
     width: 1170px;
   }
   .span12 {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 74fe73277..404c5eb50 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -194,7 +194,9 @@ a:hover {
   margin-left: 20px;
 }
 
-.container {
+.container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
   width: 940px;
 }
 
diff --git a/docs/download.html b/docs/download.html
index 9c294a8d0..1193e85a3 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -276,11 +276,27 @@
         <input type="text" class="span3" placeholder="60px">
         <label>@gridGutterWidth</label>
         <input type="text" class="span3" placeholder="20px">
+        <label>@gridColumnWidth1200</label>
+        <input type="text" class="span3" placeholder="70px">
+        <label>@gridGutterWidth1200</label>
+        <input type="text" class="span3" placeholder="30px">
+        <label>@gridColumnWidth768</label>
+        <input type="text" class="span3" placeholder="42px">
+        <label>@gridGutterWidth768</label>
+        <input type="text" class="span3" placeholder="20px">
         <h3>Fluid grid system</h3>
         <label>@fluidGridColumnWidth</label>
         <input type="text" class="span3" placeholder="6.382978723%">
         <label>@fluidGridGutterWidth</label>
         <input type="text" class="span3" placeholder="2.127659574%">
+        <label>@fluidGridColumnWidth1200</label>
+        <input type="text" class="span3" placeholder="5.982905983%">
+        <label>@fluidGridGutterWidth1200</label>
+        <input type="text" class="span3" placeholder="2.564102564%">
+        <label>@fluidGridColumnWidth768</label>
+        <input type="text" class="span3" placeholder="5.801104972%">
+        <label>@fluidGridGutterWidth768</label>
+        <input type="text" class="span3" placeholder="2.762430939%">
 
         <h3>Typography</h3>
         <label>@sansFontFamily</label>
diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache
index a01c14ab7..11280434a 100644
--- a/docs/templates/pages/download.mustache
+++ b/docs/templates/pages/download.mustache
@@ -199,11 +199,27 @@
         <input type="text" class="span3" placeholder="60px">
         <label>@gridGutterWidth</label>
         <input type="text" class="span3" placeholder="20px">
+        <label>@gridColumnWidth1200</label>
+        <input type="text" class="span3" placeholder="70px">
+        <label>@gridGutterWidth1200</label>
+        <input type="text" class="span3" placeholder="30px">
+        <label>@gridColumnWidth768</label>
+        <input type="text" class="span3" placeholder="42px">
+        <label>@gridGutterWidth768</label>
+        <input type="text" class="span3" placeholder="20px">
         <h3>{{_i}}Fluid grid system{{/i}}</h3>
         <label>@fluidGridColumnWidth</label>
         <input type="text" class="span3" placeholder="6.382978723%">
         <label>@fluidGridGutterWidth</label>
         <input type="text" class="span3" placeholder="2.127659574%">
+        <label>@fluidGridColumnWidth1200</label>
+        <input type="text" class="span3" placeholder="5.982905983%">
+        <label>@fluidGridGutterWidth1200</label>
+        <input type="text" class="span3" placeholder="2.564102564%">
+        <label>@fluidGridColumnWidth768</label>
+        <input type="text" class="span3" placeholder="5.801104972%">
+        <label>@fluidGridGutterWidth768</label>
+        <input type="text" class="span3" placeholder="2.762430939%">
 
         <h3>{{_i}}Typography{{/i}}</h3>
         <label>@sansFontFamily</label>
diff --git a/less/mixins.less b/less/mixins.less
index 1b00cd034..f828e62c4 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -618,7 +618,9 @@
     }
 
     // Set the container width, and override it for fixed navbars in media queries
-    .container { .span(@gridColumns); }
+    .container,
+    .navbar-fixed-top .container,
+    .navbar-fixed-bottom .container { .span(@gridColumns); }
 
     // generate .spanX and .offsetX
     .spanX (@gridColumns);
@@ -645,7 +647,7 @@
       margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
 	  *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
     }
-    
+
     .offsetFirstChild (@columns) {
       margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
       *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less
index a7c9f4e00..f8ae95979 100644
--- a/less/responsive-1200px-min.less
+++ b/less/responsive-1200px-min.less
@@ -4,20 +4,20 @@
 @media (min-width: 1200px) {
 
   // Fixed grid
-  #grid > .core(70px, 30px);
+  #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200);
 
   // Fluid grid
-  #grid > .fluid(5.982905983%, 2.564102564%);
+  #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);
 
   // Input grid
-  #grid > .input(70px, 30px);
+  #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200);
 
   // Thumbnails
   .thumbnails {
-    margin-left: -30px;
+    margin-left: -@gridGutterWidth1200;
   }
   .thumbnails > li {
-    margin-left: 30px;
+    margin-left: @gridGutterWidth1200;
   }
   .row-fluid .thumbnails {
     margin-left: 0;
diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less
index 76f4f6df1..3972ffc69 100644
--- a/less/responsive-768px-979px.less
+++ b/less/responsive-768px-979px.less
@@ -4,13 +4,13 @@
 @media (min-width: 768px) and (max-width: 979px) {
 
   // Fixed grid
-  #grid > .core(42px, 20px);
+  #grid > .core(@gridColumnWidth768, @gridGutterWidth768);
 
   // Fluid grid
-  #grid > .fluid(5.801104972%, 2.762430939%);
+  #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768);
 
   // Input grid
-  #grid > .input(42px, 20px);
+  #grid > .input(@gridColumnWidth768, @gridGutterWidth768);
 
   // No need to reset .thumbnails here since it's the same @gridGutterWidth
 
diff --git a/less/variables.less b/less/variables.less
index ee7350ec2..25a032781 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -198,6 +198,7 @@
 // GRID
 // --------------------------------------------------
 
+
 // Default 940px grid
 // -------------------------
 @gridColumns:             12;
@@ -205,7 +206,24 @@
 @gridGutterWidth:         20px;
 @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
+// 1200px min
+@gridColumnWidth1200:     70px;
+@gridGutterWidth1200:     30px;
+
+// 768px-979px
+@gridColumnWidth768:      42px;
+@gridGutterWidth768:      20px;
+
+
 // Fluid grid
 // -------------------------
 @fluidGridColumnWidth:    6.382978723%;
 @fluidGridGutterWidth:    2.127659574%;
+
+// 1200px min
+@fluidGridColumnWidth1200:     5.982905983%;
+@fluidGridGutterWidth1200:     2.564102564%;
+
+// 768px-979px
+@fluidGridColumnWidth768:      5.801104972%;
+@fluidGridGutterWidth768:      2.762430939%;