From 4538ac9b56e6390b4b4ca745dc749195859cb8f3 Mon Sep 17 00:00:00 2001 From: Alan Mooiman Date: Mon, 24 Oct 2016 11:23:56 -0400 Subject: Add documentation for col-{breakpoint}-auto --- docs/layout/flexbox-grid.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..6fa04bf88 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -91,6 +91,37 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %} +Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. + +
+{% example html %} +
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+
+ 1 of 3 +
+
+ Variable width content +
+
+ 3 of 3 +
+
+
+{% endexample %} +
+ ## Responsive flexbox Unlike the default grid system, the flexbox grid requires a class for full-width columns. If you have a `.col-sm-6` and don't add `.col-xs-12`, your `xs` grid will not render correctly. Note that flexbox grid tiers still scale up across breakpoints, so if you want two 50% wide columns across `sm`, `md`, and `lg`, you only need to set `.col-sm-6`. -- cgit v1.2.3 From abc9a526d525dad86e6fbe062161a66853227c78 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:03:45 -0700 Subject: Fixes #20498: Warn about flexbox bugs in our flex grid docs --- docs/layout/flexbox-grid.md | 1 + 1 file changed, 1 insertion(+) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 80db93c93..4f456e273 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -27,6 +27,7 @@ The flexbox grid system behaves similar to our default grid system, but with a f - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. - Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From 3cc023990369168aa451bf49a69b7fb4a2dcaa67 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:26:23 -0700 Subject: Document our z-index values Fixes #18532 --- docs/layout/overview.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 3e6c7e7e0..5b5ceb16c 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -155,3 +155,23 @@ The Sass mixin for the above example look like that shown beneath: {% highlight scss %} @include media-breakpoint-between(md, lg) { ... } {% endhighlight %} + +## Z-index + +Several Bootstrap components utilize `z-index`, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that's been designed to properly layer navigation, tooltips and popovers, modals, and more. + +We don't encourage customization of these values; should you change one, you likely need to change them all. + +```scss +$zindex-dropdown-backdrop: 990 !default; +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; +$zindex-navbar-fixed: 1030 !default; +$zindex-navbar-sticky: 1030 !default; +$zindex-modal-bg: 1040 !default; +$zindex-modal: 1050 !default; +``` + +Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. -- cgit v1.2.3 From 115a37db1a21dd249daf852cbd71cbd5ad1b7c3f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:31:38 -0700 Subject: Change variable for modal backdrop zindex, rearrange to be ordered from lowest to highest --- docs/layout/overview.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/overview.md b/docs/layout/overview.md index 5b5ceb16c..c22203fde 100644 --- a/docs/layout/overview.md +++ b/docs/layout/overview.md @@ -166,12 +166,12 @@ We don't encourage customization of these values; should you change one, you lik $zindex-dropdown-backdrop: 990 !default; $zindex-navbar: 1000 !default; $zindex-dropdown: 1000 !default; -$zindex-popover: 1060 !default; -$zindex-tooltip: 1070 !default; $zindex-navbar-fixed: 1030 !default; $zindex-navbar-sticky: 1030 !default; -$zindex-modal-bg: 1040 !default; +$zindex-modal-backdrop: 1040 !default; $zindex-modal: 1050 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; ``` Background elements—like the backdrops that allow click-dismissing—tend to reside on a lower `z-index`s, while navigation and popovers utilize higher `z-index`s to ensure they overlay surrounding content. -- cgit v1.2.3 From 26c33fa5ed0385d486d6a0ed5b79e9bae11dc055 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:49:57 -0700 Subject: unrelated change; bold that stuff to emphasize it --- docs/layout/flexbox-grid.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 4412466f6..467c3030b 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -26,8 +26,8 @@ The flexbox grid system behaves similar to our default grid system, but with a f - Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system. - Flexbox grid columns without a set width will automatically layout with equal widths. For example, four columns will each automatically be 25% wide. - Flexbox grid columns have significantly more alignment options available, including vertical alignment. -- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, flexbox requires a `.col-{breakpoint}` class for each tier. -- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). +- Unlike the default grid system where a grid column starts as full-width in the `xs` tier, **flexbox requires a `.col-{breakpoint}` class for each tier.** +- Be aware of the limitations and [bugs around flexbox](https://github.com/philipwalton/flexbugs), like the [inability to use some HTML elements as flex containers](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers). Chill? Awesome—keep reading for more information and some code snippets. -- cgit v1.2.3 From a26080c04723e23da352e8115a108130725faff2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Oct 2016 09:50:25 -0700 Subject: rework flex grid autolayout docs Adds clearer headings to each section, reworks some copy to be more direct. --- docs/layout/flexbox-grid.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'docs/layout') diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 467c3030b..a26314cd6 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -33,7 +33,11 @@ Chill? Awesome—keep reading for more information and some code snippets. ## Auto-layout columns -When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and you're good to go. For example, here's are two grid layouts that apply to every device and viewport possible. +When flexbox support is enabled, you can utilize breakpoint-specific column classes for equal-width columns. Add any number of `.col-{breakpoint}`s for each breakpoint you need and every column will be the same width. + +### Equal-width + +For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xl`.
{% example html %} @@ -61,6 +65,8 @@ When flexbox support is enabled, you can utilize breakpoint-specific column clas {% endexample %}
+### Setting one column width + 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.
@@ -92,7 +98,9 @@ Auto-layout for flexbox grid columns also means you can set the width of one col {% endexample %}
-Sometimes it's useful to have a column that lays itself out based on the natural width of its content, especially single line content like inputs, numbers, etc. Using the `col-{breakpoint}-auto` classes, you can guide this behavior as desired. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width grows. +### Variable width content + +Using the `col-{breakpoint}-auto` classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with [horizontal alignment](#horizontal-alignment) classes, is very useful for centering layouts with uneven column sizes as viewport width changes.
{% example html %} -- cgit v1.2.3