From: harry Date: Wed, 21 Jun 2017 19:53:27 +0000 (+0530) Subject: Update docs example as per xy grid classes! X-Git-Tag: v6.4.0-rc5~6^2~4 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2de65381da9af758da77ba5680e868c0a9669bb9;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Update docs example as per xy grid classes! --- diff --git a/docs/assets/scss/examples/_grid.scss b/docs/assets/scss/examples/_grid.scss index dea895419..a49759f5b 100644 --- a/docs/assets/scss/examples/_grid.scss +++ b/docs/assets/scss/examples/_grid.scss @@ -74,7 +74,8 @@ } } } -// Flex Grid + +// XY Grid [id^="docs-xy"].docs-component .docs-code-live { @include foundation-xy-grid-classes; @@ -98,3 +99,32 @@ } } } + +// Flexbox Utilities +[id^="docs-flexbox-utilities"].docs-component .docs-code-live { + @include foundation-flex-grid; + @include foundation-xy-grid-classes; + + .grid-x, + .grid-y { + background: lighten($primary-color, 50%); + font-size: 12px; + line-height: 2rem; + margin-bottom: 1.5rem; + } + + .grid-y .grid-x { + margin-bottom: 0; + } + + .cell { + &:nth-child(odd) { + background: lighten($primary-color, 30%); + color: $black; + } + &:nth-child(even) { + background: $primary-color; + color: $white; + } + } +} diff --git a/docs/pages/flexbox-utilities.md b/docs/pages/flexbox-utilities.md index fd6b5019c..361c674ae 100644 --- a/docs/pages/flexbox-utilities.md +++ b/docs/pages/flexbox-utilities.md @@ -3,6 +3,7 @@ title: Flexbox Utilities description: Flexbox utility classes and mixins to make working with flexbox easier. video: 'KxafSdyTCIg' sass: + - scss/xy-grid/*.scss - scss/components/_flex.scss - scss/util/_flex.scss --- @@ -13,17 +14,17 @@ Flexbox makes horizontal and vertical alignment painless, through the CSS proper 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. - -
-edit on codepen button +
+

In the below examples we are using [XY Grid](xy-grid.html) classes instead of [Legacy Flex Grid's](flex-grid.html) row and column. These examples will works for row and column but then again the Legacy Flex Grid will be depreciated from Foundation 7 so we recommend to use XY Grid.

-```html -
-
-
-
+Here's a basic example: when using the grid, a `grid-x` or `grid-y` is a flex parent, and a `cell` is a flex child. Use `grid-margin-x` or `grid-padding-x` for adding [gutters](xy-grid.html#gutters) + +```html_example +
+
Cell 1
+
Cell 2
+
Cell 3
``` @@ -38,34 +39,28 @@ Horizontal alignment classes are applied to flex parents. Left alignment is the - `.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
-
-
+```html_example +
+
Aligned to
+
the left
- -
-edit on codepen button +
+
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. @@ -95,16 +90,30 @@ Stretch alignment is the default. To set parent alignment, use these classes:
```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.
+
+
I'm at the top (default)
+
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.
+
+``` + +```html_example +
+
I'm in the middle
+
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.
+
+``` + +```html_example +
+
I'm at the bottom
+
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.
``` ```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.
+
+
These cells have the same height
+
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.
``` @@ -144,9 +153,9 @@ Central alignment can be applied to a flex parent, which will centrally align al
```html_example -
-
I am in the center-middle
-
I am also centrally located
+
+
I am in the center-middle
+
I am also centrally located
```