diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html index e57dfdd3cc..6e8cddf212 100644 --- a/docs/_layouts/docs.html +++ b/docs/_layouts/docs.html @@ -21,10 +21,10 @@
-
+
{% include nav-docs.html %}
-
+

{{ page.title }}

{{ content }}
diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index 6faa2e78ec..6d372a96c4 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -23,37 +23,36 @@ The flexbox grid system behaves similar to our default grid system, but with a f - [Grid mixins](/layout/grid#sass-mixins) and [predefined classes](/layout/grid#predefined-classes) include support for flexbox. Just [enable flexbox support](/getting-started/flexbox) to utilize them as you would otherwise. - Nesting, offsets, pushes, and pulls are all supported in the flexbox grid system. -- Flexbox grid columns without a set width will automatically layout with even widths. For example, four columns will each automatically be 25% wide. +- 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. Chill? Awesome—keep reading for more information and some code snippets. ## Auto-layout columns -As mentioned above, flexbox grid columns will automatically layout with even widths. Add any number of `.col-*`s for each breakpoint you need and you're good to go. +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.
{% example html %}
- One of two columns + 1 of 2
- One of two columns + 1 of 2
-
-
- One of three columns + 1 of 3
- One of three columns + 1 of 3
- One of three columns + 1 of 3
@@ -67,13 +66,32 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
- One of three columns + 1 of 3
- One of three columns + 2 of 3 (wider)
- One of three columns + 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`. + +
+{% example html %} +
+
+
+ 1 of 2 (stacked on mobile) +
+
+ 1 of 2 (stacked on mobile)
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss index 51eda05616..2f4bb0b798 100644 --- a/scss/mixins/_grid-framework.scss +++ b/scss/mixins/_grid-framework.scss @@ -8,26 +8,21 @@ @each $breakpoint in map-keys($breakpoints) { $breakpoint-counter: ($breakpoint-counter + 1); @include media-breakpoint-up($breakpoint, $breakpoints) { - // Work around cross-media @extend (https://github.com/sass/sass/issues/1050) - // %grid-column-float-#{$breakpoint} { - // float: left; - // } @if $enable-flex { .col-#{$breakpoint} { - @include make-col($gutter); + @extend column-basics; // Relative position, min-height, and horizontal padding flex-basis: 0; flex-grow: 1; max-width: 100%; } } + @for $i from 1 through $columns { .col-#{$breakpoint}-#{$i} { - // @if not $enable-flex { - // @extend %grid-column-float-#{$breakpoint}; - // } - @include make-col-span($i, $columns); + @include make-col($i, $columns); } } + @each $modifier in (pull, push) { @for $i from 0 through $columns { .#{$modifier}-#{$breakpoint}-#{$i} { @@ -35,6 +30,7 @@ } } } + // `$columns - 1` because offsetting by the width of an entire row isn't possible @for $i from 0 through ($columns - 1) { @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0 diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index f358ac3888..c3a492e68a 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -33,26 +33,17 @@ margin-right: ($gutter / -2); } -@mixin make-col($gutter: $grid-gutter-width) { +// Used here for `make-col` and in the `grid-framework` for generating +// predefined grid classes. +%column-basics { position: relative; - // @if $enable-flex { - // flex: 1; - // } @else { - // float: left; - // } - min-height: 1px; - padding-left: ($gutter / 2); - padding-right: ($gutter / 2); -} - -@mixin make-col-span($size, $columns: $grid-columns) { - position: relative; - @if $enable-flex { - flex: 0 0 auto; - } min-height: 1px; padding-left: ($grid-gutter-width / 2); padding-right: ($grid-gutter-width / 2); +} + +@mixin make-col($size, $columns: $grid-columns) { + @extend column-basics; @if $enable-flex { flex: 0 0 percentage($size / $columns);