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/grid.md') 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/grid.md') 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/grid.md') 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 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/grid.md') 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