From 7071fe9c1ba90c2ab645b088a51eaf036a22edda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 Jun 2016 21:18:23 -0700 Subject: Fixes #17089 a bit --- docs/layout/responsive-utilities.md | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/responsive-utilities.md b/docs/layout/responsive-utilities.md index 839aeeb24..2a44fd589 100644 --- a/docs/layout/responsive-utilities.md +++ b/docs/layout/responsive-utilities.md @@ -188,6 +188,9 @@ Green checkmarks indicate the element **is visible** in your current viewport. Large or narrower + +
+
✔ Visible on small or wider @@ -206,24 +209,30 @@ Green checkmarks indicate the element **is visible** in your current viewport. Extra large
+ +
+
-
+
✔ Your viewport is exactly extra small Your viewport is NOT exactly extra small
-
+
✔ Your viewport is exactly small Your viewport is NOT exactly small
-
+
✔ Your viewport is exactly medium Your viewport is NOT exactly medium
-
+
+ +
+
✔ Your viewport is exactly large Your viewport is NOT exactly large
-
+
✔ Your viewport is exactly extra large Your viewport is NOT exactly extra large
-- cgit v1.2.3 From c2189876eefed8233ce2bbd0fe4ac96e4f85aa58 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 12 Jul 2016 22:27:06 +0300 Subject: Remove trailing space. [ci skip] --- docs/layout/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 44a12aee6..81cdecf60 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -144,7 +144,7 @@ These media queries are also available via Sass mixins: And finally media that spans multiple breakpoint widths: {% highlight scss %} -// Example +// Example // Medium devices (tablets, 768px and up) and Large devices (desktops, 992px and up) @media (min-width: 768px) and (max-width: 1199px) { ... } {% endhighlight %} -- cgit v1.2.3 From d71c080ab52333e31af61558ba81b9ed04b3c593 Mon Sep 17 00:00:00 2001 From: Raphael Luba Date: Wed, 20 Jul 2016 17:37:54 +0200 Subject: Replace renamed classes in grid push/pull example (#20330) The example for column ordering still referenced the old push/pull class names. --- 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 cc2585d5d..b93f0d8b7 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -442,7 +442,7 @@ To nest your content with the default grid, add a new `.row` and set of `.col-sm ### Example: Column ordering -Easily change the order of our built-in grid columns with `.col-md-push-*` and `.col-md-pull-*` modifier classes. +Easily change the order of our built-in grid columns with `.push-md-*` and `.pull-md-*` modifier classes.
{% example html %} -- cgit v1.2.3 From a8879c8f82ec3debb8e225844dc4561e2900beda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 23 Jul 2016 17:12:43 -0700 Subject: Follow-up to #19099 for grid fixes - Restores two-mixin approach to generating semantic grid columns (now with 'make-col-ready' and 'make-col') - Removes need for .col-xs-12 by restoring the mass list of all grid tier classes to set position, min-height, and padding - Adds an initial 'width: 100%' to flexbox grid column prep (later overridden by the column sizing in 'flex' shorthand or 'width') to prevent flexbox columns from collapsing in lower viewports --- docs/layout/grid.md | 32 +++++++++++++++++--------------- 1 file changed, 17 insertions(+), 15 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/grid.md b/docs/layout/grid.md index cc2585d5d..4ce3c3beb 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -180,20 +180,21 @@ 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($gutter: $grid-gutter-width) { +@mixin make-col-ready($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { position: relative; + min-height: 1px; // Prevent collapsing + padding-right: ($gutter / 2); + padding-left: ($gutter / 2); + + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. @if $enable-flex { - flex: 1; - } @else { - float: left; + width: 100%; } - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); } -@mixin make-col-span($size, $columns: $grid-columns) { - // Set a width (to be used in or out of media queries) +@mixin make-col($size, $columns: $grid-columns, $gutter: $grid-gutter-width) { @if $enable-flex { flex: 0 0 percentage($size / $columns); // Add a `max-width` to ensure content within each column does not blow out @@ -201,6 +202,7 @@ Mixins are used in conjunction with the grid variables to generate semantic CSS // do not appear to require this. max-width: percentage($size / $columns); } @else { + float: left; width: percentage($size / $columns); } } @@ -232,23 +234,23 @@ See it in action in this rendered example @include make-row(); } .content-main { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(8); + @include make-col(8); } } .content-secondary { - @include make-col(); + @include make-col-ready(); @media (max-width: 32em) { - @include make-col-span(6); + @include make-col(6); } @media (min-width: 32.1em) { - @include make-col-span(4); + @include make-col(4); } } {% endhighlight %} -- cgit v1.2.3 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