Get zf-grid docs in place

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 64f6ca6723047bfbd54b8427a5061f6732b5b8f6..5fc3d756780520bfe7bae1eeccfbcf3199105321 100644 (file)
--- 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 01bf80394ee1b5ce60f67b0682638162c99b3e9a..220671a43fb849baece833b50b91d7793f19afb6 100644 (file)
--- 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 98b35bbe81f4ab91a7d3e156a7f4394dacfae25d..809efdffe412fda4af05acc3bc7050243ba32361 100644 (file)
--- 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 3beaa21ef948af6fc294e0b912c5cc0a2473a055..5c6fcc02ae978f5cd30aab742f97b359bd904b0f 100644 (file)
--- 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>