docs: add doc for different grids setup

diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md
index bc5376f7d0021c0df8e0d95c754a58e63524e11a..97bae7b3fc3213dd5290cc99704c6bc382ce79dd 100644 (file)
--- a/docs/pages/flex-grid.md
+++ b/docs/pages/flex-grid.md
@@ -26,14 +26,21 @@ The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, an
 
 ## Importing
 
-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 a framework-wide flexbox mode, and add exports for the flex grid and flexbox helper classes. [Learn more about enabling flexbox mode.](flexbox.html#enabling-flexbox-mode)
-
 <div class="docs-video-codepen-container">
   <a class="" data-open-video="2:45"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </div>
 
+<div class="alert callout">
+  **From Foundation v6.4, the Flex Grid is disabled by default**, replaced by the new [XY Grid](/xy-grid.html). Unless you need to support IE 10, it is recommended to use the XY Grid.
+</div>
+
+To use the Flex Grid in Foundation v6.4+, you need to:
+* In CDN link or package managers: import `foundation-flex.css` in place of `foundation.css`.
+* In Sass: set `$xy-grid` to `false`.
+
+If you're using the Sass version of Foundation, you can enable a framework-wide flexbox mode, and add exports for the flex grid and flexbox helper classes. [Learn more about enabling flexbox mode.](flexbox.html#enabling-flexbox-mode)
+
+You can manually generate the Flex Grid with:
 ```scss
 @import 'foundation';
 

diff --git a/docs/pages/grid.md b/docs/pages/grid.md
index b00391587cf5ea5043fc1691ab0a2d03500de9d7..bc2f5d988488fe819a6dba27fdcbb3af4a6fc32f 100644 (file)
--- a/docs/pages/grid.md
+++ b/docs/pages/grid.md
@@ -14,6 +14,18 @@ tags:
   <a href="http://zurb.com/university/foundation-intro" target="_blank">Get registered for an upcoming Foundation training →</a>
 </div>
 
+
+## Importing
+
+<div class="alert callout">
+  **From Foundation v6.4, the Float Grid is disabled by default**, replaced by the new [XY Grid](/xy-grid.html). Unless you need to support IE 10, it is recommended to use the XY Grid.
+</div>
+
+To use the Float Grid in Foundation v6.4+, you need to:
+* In CDN link or package managers: import `foundation-float.css` in place of `foundation.css`.
+* In Sass: set both `$xy-grid` and `$global-flex` to `false`.
+
+
 ## Basics
 
 Start by adding an element with a class of `.row`. This will create a horizontal block to contain vertical columns. Then add elements with a `.column` class within that row. Specify the widths of each column with the `.small-#`, `.medium-#`, and `.large-#` classes.

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index 55935edf31259186d750258b9fa8aaaa81af29c3..077b639578355a1219dcba0828675e183d4fa58b 100644 (file)
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -23,19 +23,14 @@ The XY grid is supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Andro
 
 ## Importing
 
-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.
+**XY grid is the default Foundation grid**. It is present by default in `foundation.css` of CDN link or package managers. In Sass, it will be generated by default by `@include foundation-everything` (unless `$global-flex` or `$xy-grid` are set to false).
 
+You can manually generate the XY Grid with:
 ```scss
 @import 'foundation';
 
-@include foundation-xy-grid-classes;
-```
-
-Note `foundation-xy-grid-classes` accepts arguments to enable/disable individual grid components. Simply set the argument to `false` to disable output of those classes.
-These are:
-
-```
 @include foundation-xy-grid-classes(
+  /* options
   $base-grid: true,
   $margin-grid: true,
   $padding-grid: true,
@@ -44,8 +39,10 @@ These are:
   $offset: true,
   $vertical-grid: true,
   $frame-grid: true
+  */
 );
 ```
+
 ---
 
 ## Basics