@@ -581,6 +581,88 @@ title: CSS
{% endhighlight %}
+
Column ordering
+
Easily the order of our built-in grid columns with .push* and .pull* modifier classes.
+
+
+{% highlight html linenos %}
+
+{% endhighlight %}
+
+
LESS mixins and variables
+
In addition to prebuilt grid classes for fast layouts, Bootstrap includes LESS variables and mixins for quickly generating your own simple, semantic layouts.
+
+
Variables
+
Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.
+{% highlight css linenos %}
+@grid-columns: 12;
+@grid-gutter-width: 30px;
+@grid-float-breakpoint: 768px;
+{% endhighlight %}
+
+
Mixins
+
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
+{% highlight css linenos %}
+// Creates a wrapper for a series of columns
+.make-row() {
+ // Negative margin the row out to align the content of columns
+ margin-left: (@grid-gutter-width / -2);
+ margin-right: (@grid-gutter-width / -2);
+ // Then clear the floated columns
+ .clear_float();
+}
+
+// Generate the columns
+.make-column(@columns) {
+ @media (min-width: @grid-float-breakpoint) {
+ float: left;
+ // Calculate width based on number of columns available
+ width: percentage(@columns / @grid-columns);
+ }
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Set inner padding as gutters instead of margin
+ padding-left: (@grid-gutter-width / 2);
+ padding-right: (@grid-gutter-width / 2);
+}
+
+// Generate the column offsets
+.make-column-offset(@columns) {
+ @media (min-width: @grid-float-breakpoint) {
+ margin-left: percentage((@columns / @grid-columns));
+ }
+}
+{% endhighlight %}
+
+
Example usage
+
You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.
+{% highlight css linenos %}
+.wrapper {
+ .make-row();
+}
+.content-main {
+ .make-column(8);
+}
+.content-secondary {
+ .make-column(3);
+ .make-column-offset(1);
+}
+{% endhighlight %}
+{% highlight html linenos %}
+
+{% endhighlight %}
+
+
+
diff --git a/less/grid.less b/less/grid.less
index 1774d90b22..e9eb52ef2f 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -10,11 +10,10 @@
// Mobile-first defaults
.row {
- margin-left: (@grid-gutter-width / -2);
- margin-right: (@grid-gutter-width / -2);
- .clear_float();
+ .make-row();
}
[class^="span"] {
+ position: relative;
min-height: 1px;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
@@ -26,10 +25,8 @@
max-width: 728px;
}
// Generate the grid columns and offsets
- [class^="span"] {
- float: left;
- }
- #grid > .core(@grid-column-width, @grid-gutter-width);
+ [class^="span"] { float: left; }
+ .generate-grid-columns(@grid-columns);
}
// Responsive: Desktops and up
@@ -44,14 +41,6 @@
.container {
max-width: 1170px;
}
- .row {
- margin-left: -15px;
- margin-right: -15px;
- }
- [class^="span"] {
- padding-left: 15px;
- padding-right: 15px;
- }
}
// Reset utility classes due to specificity
diff --git a/less/mixins.less b/less/mixins.less
index 54597476e7..15f6275b71 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -439,59 +439,96 @@
.clear_float();
}
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-// .makeRow() {
-// margin-left: @grid-gutter-width * -1;
-// .clearfix();
-// }
-// .makeColumn(@columns: 1, @offset: 0) {
-// float: left;
-// 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));
-// }
+// Make a grid
+// Creates a wrapper for a series of columns
.make-row() {
-
+ // Negative margin the row out to align the content of columns
+ margin-left: (@grid-gutter-width / -2);
+ margin-right: (@grid-gutter-width / -2);
+ // Then clear the floated columns
+ .clear_float();
}
+// Generate the columns
.make-column(@columns) {
- float: left;
- padding: @grid-gutter-width;
- width: percentage(@columns / @grid-columns);
+ @media (min-width: @grid-float-breakpoint) {
+ float: left;
+ // Calculate width based on number of columns available
+ width: percentage(@columns / @grid-columns);
+ }
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Set inner padding as gutters instead of margin
+ padding-left: (@grid-gutter-width / 2);
+ padding-right: (@grid-gutter-width / 2);
}
+// Generate the column offsets
.make-column-offset(@columns) {
- margin-left: percentage(@columns / @grid-columns);
+ @media (min-width: @grid-float-breakpoint) {
+ margin-left: percentage((@columns / @grid-columns));
+ }
}
+.make-column-push(@columns) {
+ @media (min-width: @grid-float-breakpoint) {
+ left: percentage((@columns / @grid-columns));
+ }
+}
+.make-column-pull(@columns) {
+ @media (min-width: @grid-float-breakpoint) {
+ right: percentage((@columns / @grid-columns));
+ }
+}
+
// The Grid
-#grid {
-
- .core(@grid-column-width, @grid-gutter-width) {
-
- .spanX (@index) when (@index > 0) {
- .span@{index} { .span(@index); }
- .spanX((@index - 1));
- }
- .spanX(0) {}
-
- .offsetX (@index) when (@index > 0) {
- .offset@{index} { .offset(@index); }
- .offsetX((@index - 1));
- }
- .offsetX (0) {}
-
- // Base styles
- .offset(@columns) {
- margin-left: percentage((@columns / @grid-columns));
- }
- .span(@columns) {
- width: percentage((@columns / @grid-columns));
- }
-
- // Generate .spanX and .offsetX
- .spanX(@grid-columns);
- .offsetX(@grid-columns);
+.generate-grid-columns(@grid-columns) {
+ // Default columns
+ .spanX (@index) when (@index > 0) {
+ .span@{index} { .span(@index); }
+ .spanX((@index - 1));
}
+ .spanX(0) {}
+
+ // Offsets (gaps between columns)
+ .offsetX (@index) when (@index > 0) {
+ .offset@{index} { .offset(@index); }
+ .offsetX((@index - 1));
+ }
+ .offsetX (0) {}
+
+ // Source ordering
+ .pushX (@index) when (@index > 0) {
+ .push@{index} { .push(@index); }
+ .pushX((@index - 1));
+ }
+ .pushX (0) {}
+
+ // Source ordering
+ .pullX (@index) when (@index > 0) {
+ .pull@{index} { .pull(@index); }
+ .pullX((@index - 1));
+ }
+ .pullX (0) {}
+
+ // Apply the styles
+ .span(@columns) {
+ width: percentage((@columns / @grid-columns));
+ }
+ .offset(@columns) {
+ margin-left: percentage((@columns / @grid-columns));
+ }
+ .push(@columns) {
+ left: percentage((@columns / @grid-columns));
+ }
+ .pull(@columns) {
+ right: percentage((@columns / @grid-columns));
+ }
+
+ // Generate .spanX and .offsetX
+ .spanX(@grid-columns);
+ .offsetX(@grid-columns);
+ .pushX(@grid-columns);
+ .pullX(@grid-columns);
}
diff --git a/less/variables.less b/less/variables.less
index ef9ac5a2a8..bb73e3dce4 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -308,11 +308,9 @@
-// GRID
+// Grid system
// --------------------------------------------------
-// Default 940px grid
@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)));
+@grid-gutter-width: 30px;
+@grid-float-breakpoint: 768px;