From: Kevin Ball <kmball11@gmail.com>
Date: Wed, 31 May 2017 20:24:10 +0000 (-0700)
Subject: Get zf-grid docs in place
X-Git-Tag: v6.4.0-rc1~9^2~10
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=90da92f663f172fef1fe9f68a20eab9f7d2f8d88;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Get zf-grid docs in place
---

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 64f6ca672..5fc3d7567 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -11,7 +11,7 @@
 @import 'foundation';
 @import 'motion-ui';
 
-@include foundation-everything;
+@include foundation-everything($flex: false);
 @include foundation-flex-classes;
 @include foundation-prototype-classes;
 @include foundation-range-input;
diff --git a/docs/assets/scss/examples/_grid.scss b/docs/assets/scss/examples/_grid.scss
index 01bf80394..220671a43 100644
--- a/docs/assets/scss/examples/_grid.scss
+++ b/docs/assets/scss/examples/_grid.scss
@@ -74,3 +74,27 @@
     }
   }
 }
+// Flex Grid
+[id^="docs-zf"].docs-component .docs-code-live {
+  @include foundation-zf-grid-classes;
+
+  .grid {
+    background: #f9f9f9;
+    font-size: 11px;
+    margin-bottom: 10px;
+    line-height: 2rem;
+    border: solid 1px #c6c6c6;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 1.5rem;
+  }
+
+  .cell {
+    &:nth-child(odd) {
+      background: #eee;
+    }
+    &:nth-child(even) {
+      background: #ddd;
+    }
+  }
+}
diff --git a/docs/pages/zf-grid.md b/docs/pages/zf-grid.md
index 98b35bbe8..809efdffe 100644
--- a/docs/pages/zf-grid.md
+++ b/docs/pages/zf-grid.md
@@ -54,7 +54,7 @@ If the class `.[size]-auto` is added to the cell, it will take up the remaining
 ```html_example
 <div class="grid padding-gutters">
   <div class="small-4 cell">4 cells</div>
-  <div class="small-auto cell">Whatever's left!</div>
+  <div class="auto cell">Whatever's left!</div>
 </div>
 ```
 
@@ -65,8 +65,8 @@ Multiple expanding cells will share the leftover space equally.
 ```html_example
 <div class="grid">
   <div class="small-4 cell">4 cells</div>
-  <div class="small-auto cell">Whatever's left!</div>
-  <div class="small-auto cell">Whatever's left!</div>
+  <div class="auto cell">Whatever's left!</div>
+  <div class="auto cell">Whatever's left!</div>
 </div>
 ```
 
@@ -76,8 +76,8 @@ A cell can also be made to *shrink*, by adding the `.[size]-shrink` class. This
 
 ```html_example
 <div class="grid">
-  <div class="small-shrink cell">Shrink!</div>
-  <div class="small-auto cell">Expand!</div>
+  <div class="shrink cell">Shrink!</div>
+  <div class="auto cell">Expand!</div>
 </div>
 ```
 
diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index 3beaa21ef..5c6fcc02a 100644
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -39,12 +39,13 @@
       </div>
     </li>
 
-    <li class="accordion-item {{#ifpage 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-accordion-item>
+    <li class="accordion-item {{#ifpage 'zf-grid' 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-accordion-item>
       <a href="#" class="accordion-title">General</a>
-      <div class="accordion-content {{#ifpage 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-tab-content>
+      <div class="accordion-content {{#ifpage 'zf-grid' 'grid' 'flex-grid' 'forms' 'visibility' 'float-classes'}}is-active{{/ifpage}}" data-tab-content>
         <ul class="docs-nav-subcategory">
-          <li{{#ifpage 'grid'}} class="current"{{/ifpage}}><a href="grid.html">Grid</a></li>
-          <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">Flex Grid</a></li>
+          <li{{#ifpage 'zf-grid'}} class="current"{{/ifpage}}><a href="zf-grid.html">Grid</a></li>
+          <li{{#ifpage 'grid'}} class="current"{{/ifpage}}><a href="grid.html">(legacy) Float Grid</a></li>
+          <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">(legacy) Flex Grid</a></li>
           <li{{#ifpage 'forms'}} class="current"{{/ifpage}}><a href="forms.html">Forms</a></li>
           <li{{#ifpage 'prototyping-utilities'}} class="current"{{/ifpage}}><a href="prototyping-utilities.html">Prototyping Utilities</a></li>
           <li{{#ifpage 'visibility'}} class="current"{{/ifpage}}><a href="visibility.html">Visibility Classes</a></li>