Revamp grid classes to require .col base class and improve flexbox grid classes with...

diff --git a/scss/_grid.scss b/scss/_grid.scss
index d846f098c4dac614f6f18c7f67b9e7d6b4fe73dc..de5b8fc4d7e94d0190a9baafe9b306070bf2bd17 100644 (file)
--- a/scss/_grid.scss
+++ b/scss/_grid.scss
@@ -36,6 +36,18 @@
 // Common styles for small and large grid columns
 
 @if $enable-grid-classes {
+  .col {
+    position: relative;
+    min-height: 1px;
+    padding-right: ($grid-gutter-width / 2);
+    padding-left: ($grid-gutter-width / 2);
+
+    // Allow `.col` to use an automatic, even width when flex mode is enabled
+    @if $enable-flex {
+      flex: 1;
+    }
+  }
+
   @include make-grid-columns();
 }
 

diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 16c970a81c0e5ab04710bc3e6794e120c7d36b9b..442bd4a0a29dec6db898d37cb09217ae03987801 100644 (file)
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -4,23 +4,9 @@
 // any value of `$grid-columns`.
 
 @mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  // Common properties for all breakpoints
-  %grid-column {
-    position: relative;
-    // Prevent columns from collapsing when empty
-    min-height: 1px;
-    // Inner gutter via padding
-    padding-left: ($gutter / 2);
-    padding-right: ($gutter / 2);
-  }
   $breakpoint-counter: 0;
   @each $breakpoint in map-keys($breakpoints) {
     $breakpoint-counter: ($breakpoint-counter + 1);
-    @for $i from 1 through $columns {
-      .col-#{$breakpoint}-#{$i} {
-        @extend %grid-column;
-      }
-    }
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Work around cross-media @extend (https://github.com/sass/sass/issues/1050)
       %grid-column-float-#{$breakpoint} {
@@ -36,7 +22,7 @@
       }
       @each $modifier in (pull, push) {
         @for $i from 0 through $columns {
-          .col-#{$breakpoint}-#{$modifier}-#{$i} {
+          .#{$modifier}-#{$breakpoint}-#{$i} {
             @include make-col-modifier($modifier, $i, $columns)
           }
         }
@@ -44,7 +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
-          .col-#{$breakpoint}-offset-#{$i} {
+          .offset-#{$breakpoint}-#{$i} {
             @include make-col-modifier(offset, $i, $columns)
           }
         }

diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 230dacc547c5225c13a24ceb91be90a814d65afd..96e334af4fb6c95f53bf0edef3ada856c50d8763 100644 (file)
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -35,7 +35,9 @@
 
 @mixin make-col($gutter: $grid-gutter-width) {
   position: relative;
-  @if not $enable-flex {
+  @if $enable-flex {
+    flex: 1;
+  } @else {
     float: left;
   }
   min-height: 1px;