From: Kevin Ball <kmball11@gmail.com>
Date: Tue, 15 Nov 2016 00:12:39 +0000 (-0800)
Subject: Update names and add responsiveness for child classes
X-Git-Tag: v6.3-rc1~21^2^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9324%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Update names and add responsiveness for child classes
---

diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox.md
index 6fdcf3044..3a72e51a0 100644
--- a/docs/pages/flexbox.md
+++ b/docs/pages/flexbox.md
@@ -173,10 +173,10 @@ To make something a flex container, simply apply
 
 And to change its flex direction from row to column you can use the helper classes:
 
-- `.flex-direct-row` (default)
-- `.flex-direct-row-reverse`
-- `.flex-direct-column`
-- `.flex-direct-column-reverse`
+- `.flex-dir-row` (default)
+- `.flex-dir-row-reverse`
+- `.flex-dir-column`
+- `.flex-dir-column-reverse`
 
 For children, there are 3 quick helper classes
 
@@ -186,7 +186,7 @@ For children, there are 3 quick helper classes
 
 ```html_example
 <div class="row">
-  <div class="column flex-container flex-direct-column">
+  <div class="column flex-container flex-dir-column">
     <div class="callout flex-child-auto">Auto</div>
     <div class="callout flex-child-auto">Auto</div>
     <div class="callout flex-child-shrink">Shrink</div>
@@ -197,6 +197,19 @@ For children, there are 3 quick helper classes
 </div>
 ```
 
+All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints.  So you can do things like
+
+```html_example
+  <div class="row">
+    <div class="column large-12 flex-container flex-dir-column large-flex-dir-row">
+      <div class="callout flex-child-auto">Auto</div>
+      <div class="callout flex-child-auto">Auto</div>
+      <div class="callout flex-child-shrink large-flex-child-auto">Auto on Large</div>
+    </div>
+    <div class="column align-self-top">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div>
+  </div>
+```
+
 ---
 
 ## Helper Mixins
diff --git a/scss/grid/_flex-grid.scss b/scss/grid/_flex-grid.scss
index a6e6bdeb7..1ccb08cdd 100644
--- a/scss/grid/_flex-grid.scss
+++ b/scss/grid/_flex-grid.scss
@@ -218,7 +218,7 @@
   }
 
   @each $dir, $prop in $-zf-flex-direction {
-    .flex-direct-#{$dir} {
+    .flex-dir-#{$dir} {
       @include flex-direction($prop);
     }
   }
@@ -261,11 +261,25 @@
         }
       }
 
+      // direction helper classes
       @each $dir, $prop in $-zf-flex-direction {
-        .#{$-zf-size}-flex-direct-#{$dir} {
+        .#{$-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 {