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

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f51ab59a1d6b724368c59c8abde60b435014adc5..2ecc9690e1efef742bd61daff9c4d685a68c2ea1 100644 (file)
--- 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 74fe7327769340569a29de0ba2f2fb0c4b9f2871..404c5eb502d05cdce4c95b2a46c4bf85801c691c 100644 (file)
--- 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 9c294a8d0c675404d1e2db5ef7d0b172f17d50c9..1193e85a3f549041a2f23d29963fdddd6b71d7fb 100644 (file)
--- 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 a01c14ab7a1222eb6fe664e0e1c0f350fbc4c221..11280434a2a327d1f96d7290ba395935af7975c6 100644 (file)
--- 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 1b00cd0348598adfb991f06bc1377bd125428de9..f828e62c4b38e3a75f49e0dd4764e1c0de3e5d85 100644 (file)
--- 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 a7c9f4e004a314dc7c17ca285056932cb6997b6b..f8ae95979b5dcdc6c53fded1ece2a9419c477880 100644 (file)
--- 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 76f4f6df15049e3109879b082a0e2f8357e49e96..3972ffc695c48699235e5f42498305f02d1db521 100644 (file)
--- 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 ee7350ec23c7a8b9b087609e0811ac357fb24ffd..25a032781db98a902eea002da6fe71dc81842256 100644 (file)
--- 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%;