From ded1bf98d796ed9efb5c22eb1cfd8870b336158a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:27:55 -0700 Subject: One more follow up to #19099, #20349, and #20361 Remove mention of base class and fix grid examples --- docs/layout/grid.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8e7c5225e..a69e10b84 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -270,36 +270,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`.
{% example html %}
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
-
md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
+
col-md-1
-
md-8
-
md-4
+
col-md-8
+
col-md-4
-
md-4
-
md-4
-
md-4
+
col-md-4
+
col-md-4
+
col-md-4
-
md-6
-
md-6
+
col-md-6
+
col-md-6
{% endexample %}
-- cgit v1.2.3 From 55795e88450ad13fdcc581a31fa1697fd2f77145 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:36:30 -0700 Subject: Customizing grid docs updates to followup on #19099 - More details on columns and gutters - Break it into clear sections --- docs/layout/grid.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index a69e10b84..2dd86970e 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -459,7 +459,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 +486,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. -- cgit v1.2.3 From 39732a0023857a128df89dcbe898cc4fddb6435d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 25 Jul 2016 20:39:19 -0700 Subject: 30px not 15px --- docs/layout/grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 2dd86970e..7114da4b7 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 -- cgit v1.2.3 From 8e9a9a5960697cd8cd698ca6b4d8733bd7872de6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 26 Jul 2016 21:09:39 -0700 Subject: Enable flexbox grid CSS on our docs page - Creates new flexbox grid Sass file in our docs assets - Updates the Gruntfile to compile said new Sass file and minify the output - Update notice on flexbox docs page for how it works - Only enable compiled flexbox grid CSS in hosted docs site, not in dev (for easier and specific debugging of all flexbox features) --- docs/layout/flexbox-grid.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 6d372a96c..ea4fad28b 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 -- cgit v1.2.3 From 98a8e9947a5d97d8be8b664b6b8c08a7c78937a2 Mon Sep 17 00:00:00 2001 From: Scott Gauthreaux Date: Sat, 6 Aug 2016 15:33:31 -0700 Subject: Updated docs with extra auto resize example I updated the doc with an example of a flex layout of 3 columns where the center column is specified as a `.col-xs-5` to show that other columns will resize no matter what the width of the center column. Experienced bootstrap developers will expect to have to use an even number for the center column width when in reality any size will work. I believe this is quite useful information and doesn't add too much to the docs. Another option would be to make that initial example a `.col-xs-5` instead of a `.col-xs-6` to highlight this fact in the first place. --- docs/layout/flexbox-grid.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index ea4fad28b..ec5a7365e 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -59,7 +59,7 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% endexample %} -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.
{% 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
+
+
+ 1 of 3 +
+
+ 2 of 3 (wider) +
+
+ 3 of 3 +
+
{% endexample %} -- cgit v1.2.3 From 86e3a351612b98d5c9ac4a1d43a2947c32845d27 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 19 Aug 2016 21:20:00 -0700 Subject: add some margin utils --- docs/layout/media-object.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'docs/layout') 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.

Media heading

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. -
+
Generic placeholder image @@ -123,7 +123,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

Media heading

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.

-
+
Generic placeholder image @@ -131,7 +131,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th

Nested media heading

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. -
+
Generic placeholder image @@ -145,7 +145,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
-
+
Generic placeholder image @@ -158,7 +158,7 @@ With a bit of extra markup, you can use media inside list (useful for comment th
-
  • +

  • Media heading

    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. -- cgit v1.2.3 From a48e8199219d6bbe95079fa8fb206db1b2f5f2bf Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Sep 2016 22:31:26 -0700 Subject: Fixes #19466: Document the flexbox order utils (#20697) --- docs/layout/flexbox-grid.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index ec5a7365e..d15d6fb99 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -221,3 +221,25 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
    {% endexample %}
    • + +## Reordering + +Flexbox utilities for controlling the **visual order** of your content. + +
    +{% example html %} +
    +
    +
    + First, but unordered +
    +
    + Second, but last +
    +
    + Third, but first +
    +
    +
    +{% endexample %} +
    -- cgit v1.2.3 From 3f01134031b15a934d5e233bb26a407a7e05492b Mon Sep 17 00:00:00 2001 From: Nick Date: Tue, 13 Sep 2016 07:31:05 +0200 Subject: Grid mixins docs should match source code (#20705) --- docs/layout/grid.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 7114da4b7..5b68053aa 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -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 %} -- cgit v1.2.3