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