diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index f51ab59a1d..2ecc9690e1 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 74fe732776..404c5eb502 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 9c294a8d0c..1193e85a3f 100644 --- a/docs/download.html +++ b/docs/download.html @@ -276,11 +276,27 @@ + + + + + + + +

Fluid grid system

+ + + + + + + +

Typography

diff --git a/docs/templates/pages/download.mustache b/docs/templates/pages/download.mustache index a01c14ab7a..11280434a2 100644 --- a/docs/templates/pages/download.mustache +++ b/docs/templates/pages/download.mustache @@ -199,11 +199,27 @@ + + + + + + + +

{{_i}}Fluid grid system{{/i}}

+ + + + + + + +

{{_i}}Typography{{/i}}

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%;