Move vanilla flex helpers from flex-grid to flex utilities

- Also Add a breakpoint variable to let user disable it if they want!

diff --git a/scss/components/_flex.scss b/scss/components/_flex.scss
index cf4335561c5e1fa61d71af93e5c6187b85329fa5..823d30042ab68823047a38ed2308e42be346aff7 100644 (file)
--- a/scss/components/_flex.scss
+++ b/scss/components/_flex.scss
@@ -2,6 +2,65 @@
 /// @type Number
 $flex-source-ordering-count: 6 !default;
 
+/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.
+/// @type Boolean
+$flexbox-responsive-breakpoints: true !default;
+
+@mixin flex-helpers {
+  .flex-container {
+    @include flex;
+  }
+
+  .flex-child-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-child-grow {
+    flex: 1 0 auto;
+  }
+
+  .flex-child-shrink {
+    flex: 0 1 auto;
+  }
+
+  @each $dir, $prop in $-zf-flex-direction {
+    .flex-dir-#{$dir} {
+      @include flex-direction($prop);
+    }
+  }
+
+  @if ($flexbox-responsive-breakpoints) {
+    // Loop through Responsive Breakpoints
+    @each $size in $breakpoint-classes {
+      @include breakpoint($size) {
+        @if $size != $-zf-zero-breakpoint {
+          .#{$size}-flex-container {
+            @include flex;
+          }
+
+          .#{$size}-flex-child-auto {
+            flex: 1 1 auto;
+          }
+
+          .#{$size}-flex-child-grow {
+            flex: 1 0 auto;
+          }
+
+          .#{$size}-flex-child-shrink {
+            flex: 0 1 auto;
+          }
+
+          @each $dir, $prop in $-zf-flex-direction {
+            .#{$size}-flex-dir-#{$dir} {
+              @include flex-direction($prop);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
 @mixin foundation-flex-classes {
   // Horizontal alignment using justify-content
   @each $hdir, $prop in map-remove($-zf-flex-justify, 'left') {
@@ -44,4 +103,7 @@ $flex-source-ordering-count: 6 !default;
       }
     }
   }
+
+  // Vanilla Flexbox Helpers
+  @include flex-helpers;
 }

diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index 07e1de1cd180020164ae993579b0a0dc8abaae5b..31012424bfdfad9f824a7ff5167bb1dd964901a3 100644 (file)
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -190,29 +190,6 @@
     padding-left: 0;
   }
 
-
-  .flex-container {
-    @include flex;
-  }
-
-  .flex-child-auto {
-    flex: 1 1 auto;
-  }
-
-  .flex-child-grow {
-    flex: 1 0 auto;
-  }
-
-  .flex-child-shrink {
-    flex: 0 1 auto;
-  }
-
-  @each $dir, $prop in $-zf-flex-direction {
-    .flex-dir-#{$dir} {
-      @include flex-direction($prop);
-    }
-  }
-
   @include -zf-each-breakpoint {
     @for $i from 1 through $grid-column-count {
       // Sizing (percentage)
@@ -244,25 +221,6 @@
         }
       }
 
-      // direction helper classes
-      @each $dir, $prop in $-zf-flex-direction {
-        .#{$-zf-size}-flex-dir-#{$dir} {
-          @include flex-direction($prop);
-        }
-      }
-      // child helper classes
-      .#{$-zf-size}-flex-child-auto {
-        flex: 1 1 auto;
-      }
-
-      .#{$-zf-size}-flex-child-grow {
-        flex: 1 0 auto;
-      }
-
-      .#{$-zf-size}-flex-child-shrink {
-        flex: 0 1 auto;
-      }
-
       // Auto-stacking/unstacking
       @at-root (without: media) {
         .row.#{$-zf-size}-unstack {