More grid updates

- Flexbox responsive behavior fixed with specific .col-{breakpoint} classes now added
- Dropped the make-col mixin in favor of a column-basics placeholder that we can extend across our grid infrastructure
- Updated docs to use required .col-xs-12 (as a safeguard for when folks enable flexbox mode--this isn't necessary in default grid mode)
- Update flexbox grid docs to include responsive docs, tweak some other bits too

diff --git a/docs/_layouts/docs.html b/docs/_layouts/docs.html
index e57dfdd3cc369ca1c071485b2672031ed16e1aa7..6e8cddf212fdeda0fd933fe4492c334c804d4a55 100644 (file)
--- a/docs/_layouts/docs.html
+++ b/docs/_layouts/docs.html
@@ -21,10 +21,10 @@
 
     <div class="container">
       <div class="row">
-        <div class="col-md-3 push-md-9 bd-sidebar">
+        <div class="col-xs-12 col-md-3 push-md-9 bd-sidebar">
           {% include nav-docs.html %}
         </div>
-        <div class="col-md-9 pull-md-3 bd-content">
+        <div class="col-xs-12 col-md-9 pull-md-3 bd-content">
           <h1 class="bd-title" id="content">{{ page.title }}</h1>
           {{ content }}
         </div>

diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md
index 6faa2e78ec5f4b8336f5efe4dea34d86dbeb31e5..6d372a96c47326e7fac2d28db40afb1b14dd47dd 100644 (file)
--- 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.
 
 <div class="bd-example-row">
 {% example html %}
 <div class="container">
   <div class="row">
     <div class="col-xs">
-      One of two columns
+      1 of 2
     </div>
     <div class="col-xs">
-      One of two columns
+      1 of 2
     </div>
   </div>
-</div>
-<div class="container">
   <div class="row">
     <div class="col-xs">
-      One of three columns
+      1 of 3
     </div>
     <div class="col-xs">
-      One of three columns
+      1 of 3
     </div>
     <div class="col-xs">
-      One of three columns
+      1 of 3
     </div>
   </div>
 </div>
@@ -67,13 +66,32 @@ Auto-layout for flexbox grid columns also means you can set the width of one col
 <div class="container">
   <div class="row">
     <div class="col-xs">
-      One of three columns
+      1 of 3
     </div>
     <div class="col-xs-6">
-      One of three columns
+      2 of 3 (wider)
     </div>
     <div class="col-xs">
-      One of three columns
+      3 of 3
+    </div>
+  </div>
+</div>
+{% endexample %}
+</div>
+
+## 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`.
+
+<div class="bd-example-row">
+{% example html %}
+<div class="container">
+  <div class="row">
+    <div class="col-xs-12 col-sm-6">
+      1 of 2 (stacked on mobile)
+    </div>
+    <div class="col-xs-12 col-sm-6">
+      1 of 2 (stacked on mobile)
     </div>
   </div>
 </div>

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 51eda056166586efa70e46f0efd36773a04d12e8..2f4bb0b798fd7fb28dfd2d359aec3c58c132bfeb 100644 (file)
--- 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 f358ac3888ed6dd2198ebbe7ca7595304abde031..c3a492e68a40b4cef1f30dd5c4a6303a82dc8dd1 100644 (file)
--- 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);