From: Nicolas Coden Date: Tue, 16 Jan 2018 20:28:16 +0000 (+0100) Subject: docs: add doc for different grids setup X-Git-Tag: v6.6.0~53^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c3f72c6172d82fd91cc0447b36e99cfe5b1f167c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git docs: add doc for different grids setup --- diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md index bc5376f7d..97bae7b3f 100644 --- 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 custom download of Foundation 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) -
Watch this part in video
+
+ **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. +
+ +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 b00391587..bc2f5d988 100644 --- a/docs/pages/grid.md +++ b/docs/pages/grid.md @@ -14,6 +14,18 @@ tags: Get registered for an upcoming Foundation training → + +## Importing + +
+ **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. +
+ +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 55935edf3..077b63957 100644 --- 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 custom download of Foundation 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