]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Doc: updated flexbox setup
authorTom Byrer <tomByrer@gmail.com>
Fri, 4 Mar 2016 21:22:08 +0000 (14:22 -0700)
committerTom Byrer <tomByrer@gmail.com>
Fri, 4 Mar 2016 21:22:08 +0000 (14:22 -0700)
Seems switch was added a version or 2 ago: https://github.com/zurb/foundation-sites/blob/develop/scss/foundation.scss#L52
Worked for me!

I made the old method more terse.

docs/pages/flexbox.md

index 2d9b8925e09631e85214d4f96e351ca7d248cf36..490e6d32ace21e0680fb7e27367f7179068ceb82 100644 (file)
@@ -22,20 +22,20 @@ Flexbox mode is only supported these browsers:
 
 ## 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 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. You can achieve this one of two methods if you're using sass:
 
-If you're using the Sass version, open your settings file and set `$global-flexbox` to `true`.
-
-You'll also need to replace the default float grid with the flex grid, which is actually a separate component. To do this, remove the `@include` for the float grid and replace it with the one for the flex grid.
+* If you use `@include foundation-everything;` in your settings scss file (usually `app.scss` or `settings.scss`, pass `true` like so:
 
 ```scss
-// @include foundation-grid;
-@include foundation-flex-grid;
+@include foundation-everything(true);
 ```
 
-Lastly, you'll also want to add the include for the flexbox helper classes.
+* If you included each component manually, open your settings file 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:
 
 ```scss
+// @include foundation-grid;
+$global-flexbox: true;
+@include foundation-flex-grid;
 @include foundation-flex-classes;
 ```