diff --git a/docs/customize.html b/docs/customize.html index bf564c863d..d2a10d1d23 100644 --- a/docs/customize.html +++ b/docs/customize.html @@ -249,19 +249,19 @@

Grid system

- + - + - + - + - + - + - + diff --git a/docs/templates/pages/customize.mustache b/docs/templates/pages/customize.mustache index e3d993153d..b0aaf2a550 100644 --- a/docs/templates/pages/customize.mustache +++ b/docs/templates/pages/customize.mustache @@ -181,19 +181,19 @@

{{_i}}Grid system{{/i}}

- + - + - + - + - + - + - + diff --git a/less/forms.less b/less/forms.less index 2d3f018928..fe1bb9d408 100644 --- a/less/forms.less +++ b/less/forms.less @@ -291,7 +291,7 @@ textarea[class*="span"], } .controls-row { - #grid > .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth); + #grid > .input(@grid-column-width, @grid-gutter-width, @grid-row-width); } // Ensure input-prepend/append never wraps diff --git a/less/grid.less b/less/grid.less index 817ead2ee8..b401d4b6dd 100644 --- a/less/grid.less +++ b/less/grid.less @@ -9,7 +9,7 @@ } // Fixed (940px) -#grid > .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth); +#grid > .core(@grid-column-width, @grid-gutter-width, @grid-row-width); // Reset utility classes due to specificity [class*="span"].hide { diff --git a/less/layouts.less b/less/layouts.less index 24a2062117..7a65d65d6b 100644 --- a/less/layouts.less +++ b/less/layouts.less @@ -10,7 +10,7 @@ // Fluid layouts (left aligned, with sidebar, min- & max-width content) .container-fluid { - padding-right: @gridGutterWidth; - padding-left: @gridGutterWidth; + padding-right: @grid-gutter-width; + padding-left: @grid-gutter-width; .clearfix(); } \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index d4ba71cfe4..41a9a27824 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -319,7 +319,7 @@ } // CSS3 Content Columns -.content-columns(@columnCount, @columnGap: @gridGutterWidth) { +.content-columns(@columnCount, @columnGap: @grid-gutter-width) { -webkit-column-count: @columnCount; -moz-column-count: @columnCount; column-count: @columnCount; @@ -474,19 +474,19 @@ // Make a Grid // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior .makeRow() { - margin-left: @gridGutterWidth * -1; + margin-left: @grid-gutter-width * -1; .clearfix(); } .makeColumn(@columns: 1, @offset: 0) { float: left; - margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + margin-left: (@grid-column-width * @offset) + (@grid-gutter-width * (@offset - 1)) + (@grid-gutter-width * 2); + width: (@grid-column-width * @columns) + (@grid-gutter-width * (@columns - 1)); } // The Grid #grid { - .core(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { + .core(@grid-column-width, @grid-gutter-width, @grid-row-width) { .spanX(@index) when (@index > 0) { (~".span@{index}") { .span(@index); } @@ -503,16 +503,16 @@ // Base styles .offset(@columns) { - margin-left: percentage(@columns / @gridColumns); + margin-left: percentage(@columns / @grid-columns); } .span(@columns) { - width: percentage(@columns / @gridColumns); + width: percentage(@columns / @grid-columns); } .row { // Negative indent the columns so text lines up - margin-left: @gridGutterWidth / -2; - margin-right: @gridGutterWidth / -2; + margin-left: @grid-gutter-width / -2; + margin-right: @grid-gutter-width / -2; // Clear the floated columns .clearfix(); } @@ -520,8 +520,8 @@ [class*="span"] { float: left; // Collapse whitespace min-height: 1px; // Prevent empty columns from collapsing - padding-left: @gridGutterWidth / 2; - padding-right: @gridGutterWidth / 2; + padding-left: @grid-gutter-width / 2; + padding-right: @grid-gutter-width / 2; // Proper box-model (padding doesnt' add to width) -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -529,13 +529,13 @@ } // Generate .spanX and .offsetX - .spanX(@gridColumns); - .offsetX(@gridColumns); + .spanX(@grid-columns); + .offsetX(@grid-columns); } - .input(@gridColumnWidth, @gridGutterWidth, @gridRowWidth) { + .input(@grid-column-width, @grid-gutter-width, @grid-row-width) { .spanX(@index) when (@index > 0) { (~"input.span@{index}, textarea.span@{index}, select.span@{index}, .uneditable-input.span@{index}") { .span(@index); } @@ -552,20 +552,20 @@ .span(@columns) { // TODO: Figure out how to add this back behind a class // Part 1: Since inputs require padding *and* margin, we subtract the grid gutter width, as a percent of the row, from the default column width. - //width: percentage(@columns / @gridColumns) - percentage(@gridGutterWidth / @gridRowWidth); + //width: percentage(@columns / @grid-columns) - percentage(@grid-gutter-width / @grid-row-width); // Part 2: That subtracted width then gets split in half and added to the left and right margins. - // margin-left: percentage((@gridGutterWidth / 2) / @gridRowWidth); - // margin-right: percentage((@gridGutterWidth / 2) / @gridRowWidth); + // margin-left: percentage((@grid-gutter-width / 2) / @grid-row-width); + // margin-right: percentage((@grid-gutter-width / 2) / @grid-row-width); } .offset(@columns) { // Take the normal offset margin and add an extra gutter's worth. - margin-left: percentage(@columns / @gridColumns) + percentage((@gridGutterWidth / 2) / @gridRowWidth); + margin-left: percentage(@columns / @grid-columns) + percentage((@grid-gutter-width / 2) / @grid-row-width); } // Generate .spanX and .offsetX - .spanX(@gridColumns); - .offsetX(@gridColumns); + .spanX(@grid-columns); + .offsetX(@grid-columns); } diff --git a/less/navbar.less b/less/navbar.less index a167746ee3..d63c5a8e9f 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -173,7 +173,7 @@ .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { - #grid > .core > .span(@gridColumns); + #grid > .core > .span(@grid-columns); } // Fixed to top diff --git a/less/responsive-1200px-min.less b/less/responsive-1200px-min.less index 130c65d0d2..32da5cb89e 100644 --- a/less/responsive-1200px-min.less +++ b/less/responsive-1200px-min.less @@ -11,7 +11,7 @@ } // Fixed grid - #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); - // #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200, @gridRowWidth1200); + #grid > .core(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200); + // #grid > .input(@grid-column-width-1200, @grid-gutter-width-1200, @grid-row-width-1200); } diff --git a/less/responsive-768px-979px.less b/less/responsive-768px-979px.less index 09636ccdb0..27af806ebc 100644 --- a/less/responsive-768px-979px.less +++ b/less/responsive-768px-979px.less @@ -6,6 +6,6 @@ @media (min-width: 768px) and (max-width: 979px) { // Fixed grid - #grid > .core(@gridColumnWidth768, @gridGutterWidth768, @gridRowWidth768); + #grid > .core(@grid-column-width-768, @grid-gutter-width-768, @grid-row-width-768); } diff --git a/less/variables.less b/less/variables.less index e0bb27f49f..0d9b2c6632 100644 --- a/less/variables.less +++ b/less/variables.less @@ -262,17 +262,17 @@ // -------------------------------------------------- // Default 940px grid -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +@grid-columns: 12; +@grid-column-width: 60px; +@grid-gutter-width: 20px; +@grid-row-width: (@grid-columns * @grid-column-width) + (@grid-gutter-width * (@grid-columns - 1)); // 1200px min -@gridColumnWidth1200: 70px; -@gridGutterWidth1200: 30px; -@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); +@grid-column-width-1200: 70px; +@grid-gutter-width-1200: 30px; +@grid-row-width-1200: (@grid-columns * @grid-column-width-1200) + (@grid-gutter-width-1200 * (@grid-columns - 1)); // 768px-979px -@gridColumnWidth768: 42px; -@gridGutterWidth768: 20px; -@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); +@grid-column-width-768: 42px; +@grid-gutter-width-768: 20px; +@grid-row-width-768: (@grid-columns * @grid-column-width-768) + (@grid-gutter-width-768 * (@grid-columns - 1));