Start of reworking flexbox utilities as its own page.

diff --git a/docs/pages/flexbox-mode.md b/docs/pages/flexbox-mode.md
new file mode 100644 (file)
index 0000000..6f6758d
--- /dev/null
+++ b/docs/pages/flexbox-mode.md
@@ -0,0 +1,60 @@
+---
+title: Flexbox Mode
+description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.
+video: 'KxafSdyTCIg'
+sass:
+  - scss/components/_flex.scss
+  - scss/util/_flex.scss
+---
+
+## Flexbox Mode
+
+Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days though, there's a better way... if you are happy with the below browser support!
+
+Enabling **flexbox mode** replaces those hacks with flexbox properties, streamlining how layouts are made, and making sizing and alignment of elements much easier.
+
+Flexbox mode is only supported these browsers:
+
+- The latest Chrome and Firefox
+- Safari 6+
+- IE 10+
+- iOS 7+
+- Android 4.4+
+
+---
+
+## Enabling Flexbox Mode
+
+If you're using the CSS version of Foundation, you can generate a <a href="https://foundation.zurb.com/sites/download">custom download of Foundation</a> with flexbox mode enabled. If you're using the Sass version of Foundation, you can enable flexbox mode two ways:
+
+If you use the `foundation-everything()` mixin in your main Sass file, pass in the parameter `true` to enable flexbox mode.
+
+```scss
+@include foundation-everything(true);
+```
+
+If you included each component manually (like our starter projects do), open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set `$global-flexbox` to `true`, and remove the `@include` for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss):
+
+```scss
+$global-flexbox: true;
+
+// @include foundation-grid;
+@include foundation-flex-grid;
+@include foundation-flex-classes;
+```
+
+---
+
+## Supported Components
+
+Besides the flex grid, these components have flexbox modes:
+
+- [Button group](button-group.html)
+- [Input group - (Forms)](forms.html#inline-labels-and-buttons)
+- [Menu](menu.html)
+- [Top bar](top-bar.html)
+- [Media object](media-object.html)
+- [Title bar](off-canvas.html#title-bar)
+- [Card](card.html)
+
+In general, all of the components work exactly the same. However, a few of them require slight changes to CSS classes used to work properly. Refer to the documentation for each to find out what's different.

diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox-utilities.md
similarity index 83%
rename from docs/pages/flexbox.md
rename to docs/pages/flexbox-utilities.md
index 501f9eb12f065324a8c87e7b35d56004d5426ea4..0d19edbe433cccaec4394acc522731f735022534 100644 (file)
--- a/docs/pages/flexbox.md
+++ b/docs/pages/flexbox-utilities.md
@@ -1,65 +1,13 @@
 ---
-title: Flexbox
-description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox.
+title: Flexbox Utilities
+description: Flexbox utility classes and mixins to make working with flexbox easier.
 video: 'KxafSdyTCIg'
 sass:
   - scss/components/_flex.scss
   - scss/util/_flex.scss
 ---
 
-Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days though, there's a better way... if you are happy with the below browser support!
-
-Enabling **flexbox mode** replaces those hacks with flexbox properties, streamlining how layouts are made, and making sizing and alignment of elements much easier.
-
-Flexbox mode is only supported these browsers:
-
-- The latest Chrome and Firefox
-- Safari 6+
-- IE 10+
-- iOS 7+
-- Android 4.4+
-
----
-
-## Enabling Flexbox Mode
-
-If you're using the CSS version of Foundation, you can generate a <a href="https://foundation.zurb.com/sites/download">custom download of Foundation</a> with flexbox mode enabled. If you're using the Sass version of Foundation, you can enable flexbox mode two ways:
-
-If you use the `foundation-everything()` mixin in your main Sass file, pass in the parameter `true` to enable flexbox mode.
-
-```scss
-@include foundation-everything(true);
-```
-
-If you included each component manually (like our starter projects do), open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set `$global-flexbox` to `true`, and remove the `@include` for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss):
-
-```scss
-$global-flexbox: true;
-
-// @include foundation-grid;
-@include foundation-flex-grid;
-@include foundation-flex-classes;
-```
-
----
-
-## Supported Components
-
-Besides the flex grid, these components have flexbox modes:
-
-- [Button group](button-group.html)
-- [Input group - (Forms)](forms.html#inline-labels-and-buttons)
-- [Menu](menu.html)
-- [Top bar](top-bar.html)
-- [Media object](media-object.html)
-- [Title bar](off-canvas.html#title-bar)
-- [Card](card.html)
-
-In general, all of the components work exactly the same. However, a few of them require slight changes to CSS classes used to work properly. Refer to the documentation for each to find out what's different.
-
----
-
-## Helper Classes
+## Flexbox Utilities
 
 Flexbox makes horizontal and vertical alignment painless, through the CSS properties [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items), [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self), and [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). Foundation includes a handful of classes for these properties, which work with any flexbox-enabled component.
 

diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index daddafcbc7e014c7203302476283b40f1c922cee..ae0923bad0837825826b19a26d32764b63d7918b 100644 (file)
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -30,7 +30,7 @@
         <ul class="docs-nav-subcategory">
           <li{{#ifpage 'global'}} class="current"{{/ifpage}}><a href="global.html">Global Styles</a></li>
           <li{{#ifpage 'rtl'}} class="current"{{/ifpage}}><a href="rtl.html">Right-to-Left Support</a></li>
-          <li{{#ifpage 'flexbox'}} class="current"{{/ifpage}}><a href="flexbox.html">Flexbox</a></li>
+          <li{{#ifpage 'flexbox-mode'}} class="current"{{/ifpage}}><a href="flexbox-mode.html">Flexbox Mode</a></li>
           <li{{#ifpage 'sass'}} class="current"{{/ifpage}}><a href="sass.html">Sass</a></li>
           <li{{#ifpage 'javascript'}} class="current"{{/ifpage}}><a href="javascript.html">JavaScript</a></li>
           <li{{#ifpage 'javascript-utilities'}} class="current"{{/ifpage}}><a href="javascript-utilities.html">JavaScript Utilities</a></li>
@@ -48,6 +48,7 @@
           <li{{#ifpage 'flex-grid'}} class="current"{{/ifpage}}><a href="flex-grid.html">Flex Grid<span class="label">Legacy</span></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 'flexbox-utilities'}} class="current"{{/ifpage}}><a href="flexbox-utilities.html">Flexbox Utilities</a></li>
           <li{{#ifpage 'visibility'}} class="current"{{/ifpage}}><a href="visibility.html">Visibility Classes</a></li>
           <li{{#ifpage 'float-classes'}} class="current"{{/ifpage}}><a href="float-classes.html">Float Classes</a></li>
         </ul>