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

4 files changed, 30 insertions, 10 deletions

diff --git a/less/mixins.less b/less/mixins.less
index 1b00cd0348..f828e62c4b 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 a7c9f4e004..f8ae95979b 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 76f4f6df15..3972ffc695 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 ee7350ec23..25a032781d 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%;