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

2 files changed, 12 insertions, 25 deletions

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 51eda0561..2f4bb0b79 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 f358ac388..c3a492e68 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);