From ca31f060a839b957ce3a85d3eaaaae09a78bbeb0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Mar 2013 17:12:17 -0700 Subject: [PATCH] New grid classes --- docs/assets/css/bootstrap.css | 130 +++++------ docs/assets/css/docs.css | 4 +- docs/components.html | 4 +- docs/css.html | 408 +++++++++++++++++----------------- docs/customize.html | 4 +- docs/getting-started.html | 4 +- docs/index.html | 14 +- docs/javascript.html | 4 +- less/grid.less | 6 +- less/mixins.less | 48 ++-- less/scaffolding.less | 10 +- less/tables.less | 6 +- less/type.less | 2 +- 13 files changed, 324 insertions(+), 320 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 37e89e3d6c..5632d3aadd 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -288,19 +288,21 @@ html { } body { - color: #333333; - background-color: #ffffff; -} - -body, -input, -button, -select, -textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 20px; + color: #333333; + background-color: #ffffff; +} + +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; } a { @@ -344,7 +346,7 @@ p { font-size: 21px; font-size: 2.1rem; font-weight: 200; - line-height: 1.25; + line-height: 1.3; } small { @@ -755,7 +757,7 @@ pre code { clear: both; } -[class^="span"] { +[class*="col-span-"] { position: relative; min-height: 1px; padding-right: 15px; @@ -766,151 +768,151 @@ pre code { .container { max-width: 728px; } - [class^="span"] { + [class*="col-span-"] { float: left; } - .span12 { + .col-span-12 { width: 100%; } - .span11 { + .col-span-11 { width: 91.66666666666666%; } - .span10 { + .col-span-10 { width: 83.33333333333334%; } - .span9 { + .col-span-9 { width: 75%; } - .span8 { + .col-span-8 { width: 66.66666666666666%; } - .span7 { + .col-span-7 { width: 58.333333333333336%; } - .span6 { + .col-span-6 { width: 50%; } - .span5 { + .col-span-5 { width: 41.66666666666667%; } - .span4 { + .col-span-4 { width: 33.33333333333333%; } - .span3 { + .col-span-3 { width: 25%; } - .span2 { + .col-span-2 { width: 16.666666666666664%; } - .span1 { + .col-span-1 { width: 8.333333333333332%; } - .offset12 { + .col-offset-12 { margin-left: 100%; } - .offset11 { + .col-offset-11 { margin-left: 91.66666666666666%; } - .offset10 { + .col-offset-10 { margin-left: 83.33333333333334%; } - .offset9 { + .col-offset-9 { margin-left: 75%; } - .offset8 { + .col-offset-8 { margin-left: 66.66666666666666%; } - .offset7 { + .col-offset-7 { margin-left: 58.333333333333336%; } - .offset6 { + .col-offset-6 { margin-left: 50%; } - .offset5 { + .col-offset-5 { margin-left: 41.66666666666667%; } - .offset4 { + .col-offset-4 { margin-left: 33.33333333333333%; } - .offset3 { + .col-offset-3 { margin-left: 25%; } - .offset2 { + .col-offset-2 { margin-left: 16.666666666666664%; } - .offset1 { + .col-offset-1 { margin-left: 8.333333333333332%; } - .push12 { + .col-push-12 { left: 100%; } - .push11 { + .col-push-11 { left: 91.66666666666666%; } - .push10 { + .col-push-10 { left: 83.33333333333334%; } - .push9 { + .col-push-9 { left: 75%; } - .push8 { + .col-push-8 { left: 66.66666666666666%; } - .push7 { + .col-push-7 { left: 58.333333333333336%; } - .push6 { + .col-push-6 { left: 50%; } - .push5 { + .col-push-5 { left: 41.66666666666667%; } - .push4 { + .col-push-4 { left: 33.33333333333333%; } - .push3 { + .col-push-3 { left: 25%; } - .push2 { + .col-push-2 { left: 16.666666666666664%; } - .push1 { + .col-push-1 { left: 8.333333333333332%; } - .pull12 { + .col-pull-12 { right: 100%; } - .pull11 { + .col-pull-11 { right: 91.66666666666666%; } - .pull10 { + .col-pull-10 { right: 83.33333333333334%; } - .pull9 { + .col-pull-9 { right: 75%; } - .pull8 { + .col-pull-8 { right: 66.66666666666666%; } - .pull7 { + .col-pull-7 { right: 58.333333333333336%; } - .pull6 { + .col-pull-6 { right: 50%; } - .pull5 { + .col-pull-5 { right: 41.66666666666667%; } - .pull4 { + .col-pull-4 { right: 33.33333333333333%; } - .pull3 { + .col-pull-3 { right: 25%; } - .pull2 { + .col-pull-2 { right: 16.666666666666664%; } - .pull1 { + .col-pull-1 { right: 8.333333333333332%; } } @@ -927,7 +929,7 @@ pre code { } } -[class*="span"].pull-right { +[class*="col-span-"].pull-right { float: right; } @@ -1065,13 +1067,13 @@ th { background-color: #f5f5f5; } -table col[class^="span"] { +table col[class*="col-span-"] { display: table-column; float: none; } -table td[class^="span"], -table th[class^="span"] { +table td[class*="col-span-"], +table th[class*="col-span-"] { display: table-cell; float: none; } diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ca8fc006ec..f3d7c156e3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -159,13 +159,13 @@ section > ul li { .show-grid { margin-bottom: 15px; } -.show-grid [class^="span"] { +.show-grid [class*="col-span-"] { padding-top: 10px; padding-bottom: 10px; background-color: #eee; border: 1px solid #ddd; } -.show-grid [class*="span"]:hover { +.show-grid [class*="col-span-"]:hover { background-color: #ddd; } diff --git a/docs/components.html b/docs/components.html index e2c6143ab6..5e17a6a3e4 100644 --- a/docs/components.html +++ b/docs/components.html @@ -19,7 +19,7 @@ title: Components
-
+
-
+
diff --git a/docs/css.html b/docs/css.html index 988610a6f1..874e00ed04 100644 --- a/docs/css.html +++ b/docs/css.html @@ -18,12 +18,12 @@ title: CSS
-
+
-
+
@@ -79,6 +79,207 @@ title: CSS + +
+
+

Grid system

+
+

Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.

+ +

Grid example

+

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .col-span-* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.

+
+
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+
+{% highlight html linenos %} +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
4
+
4
+
4
+
+
+
6
+
6
+
+{% endhighlight %} + +

Offsetting columns

+

Move columns to the right using .col-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-offset-4 moves .col-span-4 over four columns.

+
+
+
4
+
4 offset 4
+
+
+
3 offset 3
+
3 offset 3
+
+
+
6 offset 6
+
+
+{% highlight html linenos %} +
+
...
+
...
+
+{% endhighlight %} + + +

Nesting columns

+

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to 12.

+
+
+ Level 1: 9 columns +
+
+ Level 2: 6 columns +
+
+ Level 2: 6 columns +
+
+
+
+{% highlight html linenos %} +
+
+ Level 1: 9 columns +
+
+ Level 2: 6 columns +
+
+ Level 2: 6 columns +
+
+
+
+{% endhighlight %} + +

Column ordering

+

Easily change the order of our built-in grid columns with .push* and .pull* modifier classes.

+
+
9
+
3
+
+ +{% highlight html linenos %} +
+
9
+
3
+
+{% 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 %} + + + +
+ + + @@ -466,207 +667,6 @@ title: CSS - -
-
-

Grid system

-
-

Bootstrap includes a responsive, percent-based grid system that appropriately scales up to 12 columns as the device or viewport size increases—in other words, it's mobile first. It includes predefined classes for this, as well as powerful mixins for generating semantic layouts.

- -

Grid example

-

On mobile devices, the grid starts out stacked. Above 768px, it becomes horizontal as media queries kick in to apply floats and widths. To create a basic grid layout, wrap a series of .span* elements within a .row. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent), even at mobile resolutions.

-
-
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
4
-
4
-
4
-
-
-
6
-
6
-
-
-{% highlight html linenos %} -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
4
-
4
-
4
-
-
-
6
-
6
-
-{% endhighlight %} - -

Offsetting columns

-

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over four columns.

-
-
-
4
-
4 offset 4
-
-
-
3 offset 3
-
3 offset 3
-
-
-
6 offset 6
-
-
-{% highlight html linenos %} -
-
...
-
...
-
-{% endhighlight %} - - -

Nesting columns

-

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to 12.

-
-
- Level 1: 9 columns -
-
- Level 2: 6 columns -
-
- Level 2: 6 columns -
-
-
-
-{% highlight html linenos %} -
-
- Level 1: 9 columns -
-
- Level 2: 6 columns -
-
- Level 2: 6 columns -
-
-
-
-{% endhighlight %} - -

Column ordering

-

Easily change the order of our built-in grid columns with .push* and .pull* modifier classes.

-
-
9
-
3
-
- -{% highlight html linenos %} -
-
9
-
3
-
-{% 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/docs/index.html b/docs/index.html index 5fbf2e3666..17afe11c43 100644 --- a/docs/index.html +++ b/docs/index.html @@ -30,17 +30,17 @@ title: Bootstrap

Need reasons to love Bootstrap? Look no further.

-
+

By nerds, for nerds.

Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

-
+

Made for everyone.

Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).

-
+

Packed with features.

A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

@@ -50,22 +50,22 @@ title: Bootstrap

Built with Bootstrap.

For more sites built with Bootstrap, visit the Expo or browse the examples.

-
+
Delicious
-
+
Karma
-
+
SoundReady
-
+
Kippt diff --git a/docs/javascript.html b/docs/javascript.html index 45ebb5ee82..8e65c61d54 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -17,7 +17,7 @@ title: JavaScript plugins
-
+
-
+