From 36218a1f4a548651483924df68cbc90fd552485e Mon Sep 17 00:00:00 2001 From: Brett Mason Date: Tue, 20 Jun 2017 16:45:49 +0100 Subject: [PATCH] Start of reworking flexbox utilities as its own page. --- docs/pages/flexbox-mode.md | 60 +++++++++++++++++++ .../{flexbox.md => flexbox-utilities.md} | 58 +----------------- docs/partials/component-list.html | 3 +- 3 files changed, 65 insertions(+), 56 deletions(-) create mode 100644 docs/pages/flexbox-mode.md rename docs/pages/{flexbox.md => flexbox-utilities.md} (83%) diff --git a/docs/pages/flexbox-mode.md b/docs/pages/flexbox-mode.md new file mode 100644 index 000000000..6f6758dff --- /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 custom download of Foundation 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 501f9eb12..0d19edbe4 100644 --- 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 custom download of Foundation 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 daddafcbc..ae0923bad 100644 --- a/docs/partials/component-list.html +++ b/docs/partials/component-list.html @@ -30,7 +30,7 @@ -- 2.47.2