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