From: Geoff Kimball Date: Wed, 13 Jan 2016 06:26:38 +0000 (-0800) Subject: Fill out documentation for flexbox mode, including supported components, helper class... X-Git-Tag: v6.2.0-rc.1~73^2~3 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=270db64b3bb235572e53e593502ca4eb73cebb5c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Fill out documentation for flexbox mode, including supported components, helper classes, and mixins --- diff --git a/docs/pages/flex-classes.md b/docs/pages/flex-classes.md deleted file mode 100644 index 4c1476665..000000000 --- a/docs/pages/flex-classes.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Flexbox Classes -description: These common helper classes can be used with any flexbox-enabled component. -sass: - - scss/components/_flex.scss - - scss/util/_flex.scss ---- diff --git a/docs/pages/flex-grid.md b/docs/pages/flex-grid.md index 37be6e139..16ebdc4cf 100644 --- a/docs/pages/flex-grid.md +++ b/docs/pages/flex-grid.md @@ -10,7 +10,7 @@ The flex grid works very similarly to the standard float grid, but includes a nu ## Browser support -The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support. +The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support. --- diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox.md new file mode 100644 index 000000000..6fcede605 --- /dev/null +++ b/docs/pages/flexbox.md @@ -0,0 +1,193 @@ +--- +title: Flexbox +description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox. +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, there's a better way... if you have the 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, 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. + +```scss +// @include foundation-grid-classes; +@include foundation-flex-grid; +``` + +Lastly, you'll also may want to add the include for the flexbox helper classes. + +```scss +@include foundation-flex-classes; +``` + +--- + +## Supported Components + +Besides the flex grid, these components have flexbox modes: + +- [Button group](button-group.html) +- [Input group](forms.html#inline-labels-and-buttons) +- [Menu](menu.html) +- [Top bar](top-bar.html) +- [Media object](media-object.html) +- [Title bar](title-bar.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 makes horizontal and vertical alignment painless, through the CSS properties [`align-content`](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. + +To understand how these classes work, you need to understand the parent-child relationship created with flexbox. An element with `display: flex` is a *flex parent*, and can horizontally or vertically align its children. All immediate children of the flex parent are *flex children*. A flex child can vertically align itself. + +Here's a basic example: when using the grid, a row is a flex parent, and a column is a flex child. + +```html +
+
+
+
+
+``` + +--- + +### Horizontal Alignment + +Horizontal alignment classes are applied to flex parents. Left alignment is the default, but you can use one of these classes to change this: + +- `.align-right` +- `.align-center` +- `.align-justify` +- `.align-spaced` + +
+
+
+
Aligned to
+
the left
+
+
+
Aligned to
+
the right
+
+
+
Aligned to
+
the center
+
+
+
Aligned to
+
the edges
+
+
+
Aligned to
+
the space around
+
+
+
+ +You might be wondering what the difference between `.align-justify` and `.align-spaced` is. A justified grid (`justify-content: space-between`) evenly distributes the space *between* each column. The first and last columns pin to the edge of the grid. + +A spaced grid (`justify-content: space-around`) evenly distributes the space *around* each column. This means there will always be space to the left of the first column, and to the right of the last column. + +The horizontal alignment classes are shorthands for the `justify-content` CSS property. [Learn more about `justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content). + +--- + +### Vertical Alignment + +Vertical alignment can be applied to a flex parent—which will align all the children automatically—or to a flex child, which will align only that element. + +Top alignment is the default. To set parent alignment, use these classes: + +- `.align-middle` +- `.align-bottom` +- `.align-stretch` + +
+

Note that with vertical alignment, we use the term "middle" for the midpoint, while with horizontal alignment, we use the term "center". Otherwise, we'd have two CSS classes with the same name, but different functionality.

+
+ +```html_example +
+
I'm in the middle!
+
I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
+
+``` + +```html_example +
+
These colums have the same height.
+
That's right, equal-height columns are possible with Flexbox too! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.
+
+``` + +--- + +To align an individual child, use the below classes. They use the same alignment terms as the parent-level classes, but the classes start with `.align-self-` instead of `.align-`. + +- `.align-self-top` +- `.align-self-middle` +- `.align-self-bottom` +- `.align-self-stretch` + +```html_example +
+
Align bottom
+
Align middle
+
Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?
+
+``` + +--- + +## Helper Mixins + +If you're using the Sass version of Foundation, you can access the above helpers as mixins as well. + +For parent-level alignment, use `flex-align()`. You can pass in a horizontal alignment (`$x`), vertical alignment (`$y`), or both. + +```scss +.container { + @include flex-align($x: center, $y: stretch); +} +``` + +For child-level alignment, use `flex-align-self()`. You can pass in any horizontal alignment. + +```scss +.sidebar { + @include flex-align-self(bottom); +} +``` + +Interested in building your own flexbox-ey component? Use the `flex()` mixin to get started. + +```scss +.flexish-thang { + @include flex; + @include flex-align(center, middle); +} +``` diff --git a/docs/pages/index.md b/docs/pages/index.md index 2084077ca..a4fc5acba 100644 --- a/docs/pages/index.md +++ b/docs/pages/index.md @@ -70,7 +70,7 @@ Get to know the pieces of Foundation.
  • Forms
  • Visibility Classes
  • Float Classes
    • -
  • Flex Classes
    • +
  • Flexbox
    • diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html index 489b158c4..e571c5b95 100644 --- a/docs/partials/component-list.html +++ b/docs/partials/component-list.html @@ -14,6 +14,7 @@
  • General
    • Global Styles Right-to-Left Support + Flexbox Sass JavaScript JavaScript Utilities @@ -23,7 +24,6 @@ Forms Visibility Classes Float Classes - Flex Classes
  • Typography
    • Base Styles