diff options
Diffstat (limited to 'docs/layout')
| -rw-r--r-- | docs/layout/flexbox-grid.md | 37 | ||||
| -rw-r--r-- | docs/layout/grid.md | 75 | ||||
| -rw-r--r-- | docs/layout/media-object.md | 10 |
3 files changed, 84 insertions, 38 deletions
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 6d372a96c..d15d6fb99 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -9,7 +9,7 @@ Fancy a more modern grid system? [Enable flexbox support in Bootstrap](/getting- Bootstrap's flexbox grid includes support for every feature from our [default grid system](/layout/grid), and then some. Please read the [default grid system docs](/layout/grid) before proceeding through this page. Features that are covered there are only summarized here. Please note that **Internet Explorer 9 does not support flexbox**, so proceed with caution when enabling it. {% callout warning %} -**Heads up!** The flexbox grid documentation is only functional when flexbox support is explicitly enabled. +**Heads up!** This flexbox grid documentation is powered by an additional CSS file that overrides our default grid system's CSS. This is only available in our hosted docs and is disabled in development. {% endcallout %} ## Contents @@ -59,7 +59,7 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% endexample %} </div> -Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. +Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. <div class="bd-example-row"> {% example html %} @@ -75,6 +75,17 @@ Auto-layout for flexbox grid columns also means you can set the width of one col 3 of 3 </div> </div> + <div class="row"> + <div class="col-xs"> + 1 of 3 + </div> + <div class="col-xs-5"> + 2 of 3 (wider) + </div> + <div class="col-xs"> + 3 of 3 + </div> + </div> </div> {% endexample %} </div> @@ -210,3 +221,25 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt </div> {% endexample %} </div> + +## Reordering + +Flexbox utilities for controlling the **visual order** of your content. + +<div class="bd-example-row"> +{% example html %} +<div class="container"> + <div class="row"> + <div class="col-xs flex-xs-unordered"> + First, but unordered + </div> + <div class="col-xs flex-xs-last"> + Second, but last + </div> + <div class="col-xs flex-xs-first"> + Third, but first + </div> + </div> +</div> +{% endexample %} +</div> diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8e7c5225e..5b68053aa 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -139,7 +139,7 @@ Variables and maps determine the number of columns, the gutter width, and the me {% highlight scss %} $grid-columns: 12; -$grid-gutter-width: 15px; +$grid-gutter-width: 30px; $grid-breakpoints: ( // Extra small screen / phone @@ -180,7 +180,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Make the element grid-ready (applying everything but the width) -@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col-ready($gutter: $grid-gutter-width) { position: relative; min-height: 1px; // Prevent collapsing padding-right: ($gutter / 2); @@ -194,7 +194,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } } -@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { +@mixin make-col($size, $columns: $grid-columns) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -208,14 +208,16 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS } // Get fancy by offsetting, or changing the sort order -@mixin make-col-offset($columns) { - margin-left: percentage(($columns / $grid-columns)); +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); } -@mixin make-col-push($columns) { - left: percentage(($columns / $grid-columns)); + +@mixin make-col-push($size, $columns: $grid-columns) { + left: if($size > 0, percentage($size / $columns), auto); } -@mixin make-col-pull($columns) { - right: percentage(($columns / $grid-columns)); + +@mixin make-col-pull($size, $columns: $grid-columns) { + right: if($size > 0, percentage($size / $columns), auto); } {% endhighlight %} @@ -270,36 +272,36 @@ In addition to our semantic mixins, Bootstrap includes an extensive set of prebu ### Example: Stacked-to-horizontal -Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns with the `.col` base class and a modifier within any `.row`. +Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`. <div class="bd-example-row"> {% example html %} <div class="row"> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> - <div class="col-md-1">md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> + <div class="col-md-1">col-md-1</div> </div> <div class="row"> - <div class="col-md-8">md-8</div> - <div class="col-md-4">md-4</div> + <div class="col-md-8">col-md-8</div> + <div class="col-md-4">col-md-4</div> </div> <div class="row"> - <div class="col-md-4">md-4</div> - <div class="col-md-4">md-4</div> - <div class="col-md-4">md-4</div> + <div class="col-md-4">col-md-4</div> + <div class="col-md-4">col-md-4</div> + <div class="col-md-4">col-md-4</div> </div> <div class="row"> - <div class="col-md-6">md-6</div> - <div class="col-md-6">md-6</div> + <div class="col-md-6">col-md-6</div> + <div class="col-md-6">col-md-6</div> </div> {% endexample %} </div> @@ -459,7 +461,18 @@ Easily change the order of our built-in grid columns with `.push-md-*` and `.pul Using our built-in grid Sass variables and maps, it's possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile. -For example, if you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: +### Columns and gutters + +The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. `$grid-columns` is used to generate the widths (in percent) of each individual column while `$grid-gutter-width` is divided evenly across `padding-left` and `padding-right` for the column gutters. + +{% highlight scss %} +$grid-columns: 12; +$grid-gutter-width: 30px; +{% endhighlight %} + +### Grid tiers + +Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you'd update the `$grid-breakpoints` and `$container-max-widths` to something like this: {% highlight scss %} $grid-breakpoints: ( @@ -475,4 +488,4 @@ $container-max-widths: ( ); {% endhighlight %} -Save your changes and recompile to have a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. +When making any changes to the Sass variables or maps, you'll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints. diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md index 602bd210a..fcb89a3b5 100644 --- a/docs/layout/media-object.md +++ b/docs/layout/media-object.md @@ -45,7 +45,7 @@ Media components can also be nested. <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. - <div class="media"> + <div class="media m-t-2"> <a class="media-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> @@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th <h4 class="media-heading">Media heading</h4> <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.</p> <!-- Nested media object --> - <div class="media"> + <div class="media m-t-2"> <a class="media-left" href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> </a> @@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th <h4 class="media-heading">Nested media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. <!-- Nested media object --> - <div class="media"> + <div class="media m-t-2"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> @@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th </div> </div> <!-- Nested media object --> - <div class="media"> + <div class="media m-t-2"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image"> @@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th </div> </div> </li> - <li class="media"> + <li class="media m-t-2"> <div class="media-body"> <h4 class="media-heading">Media heading</h4> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. |