From: Brett Mason Date: Thu, 8 Jun 2017 19:22:28 +0000 (+0100) Subject: Update visual tests and docs to include amended classes. X-Git-Tag: v6.4.0-rc3~10^2~1 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d34822eb68eb893a30f5989b1e3cc9eaeb8c0439;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Update visual tests and docs to include amended classes. --- diff --git a/docs/assets/scss/examples/_grid.scss b/docs/assets/scss/examples/_grid.scss index d2b729f13..dea895419 100644 --- a/docs/assets/scss/examples/_grid.scss +++ b/docs/assets/scss/examples/_grid.scss @@ -78,13 +78,17 @@ [id^="docs-xy"].docs-component .docs-code-live { @include foundation-xy-grid-classes; - .grid { + .grid-x, + .grid-y { font-size: 12px; - margin-bottom: 10px; line-height: 2rem; margin-bottom: 1.5rem; } + .grid-y .grid-x { + margin-bottom: 0; + } + .cell { &:nth-child(odd) { background: #eee; diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md index e39b123aa..2facc08be 100644 --- a/docs/pages/xy-grid.md +++ b/docs/pages/xy-grid.md @@ -71,18 +71,18 @@ The structure of XY grid uses `.grid-x`, `.grid-y`, and `.cell` as its base. Wit ## Gutters The defining feature of the XY grid is the ability to use margin AND padding grids in harmony. -To define a grid type, simple set `.margin-gutters` or `.padding-gutters` on the grid. +To define a grid type, simple set `.grid-margin-x` or `.grid-padding-x` on the grid.
edit on codepen button
```html_example -
+
12/6/4 cells
12/6/8 cells
-
+
12/6/4 cells
12/6/8 cells
@@ -109,7 +109,7 @@ The grid defaults to the full width of its container. In order to contain the gr If the class `.auto` or `.[size]-auto` is added to the cell, it will take up the remaining space. ```html_example -
+
4 cells
Whatever's left!
@@ -120,7 +120,7 @@ If the class `.auto` or `.[size]-auto` is added to the cell, it will take up the Multiple expanding cells will share the leftover space equally. ```html_example -
+
4 cells
Whatever's left!
Whatever's left!
@@ -132,7 +132,7 @@ Multiple expanding cells will share the leftover space equally. A cell can also be made to *shrink*, by adding the `.shrink` or `.[size]-shrink` class. This means it will only take up the space its contents need. ```html_example -
+
Shrink!
Expand!
@@ -159,12 +159,12 @@ To switch back to the auto behavior from a percentage or shrink behavior, use th ## Collapse Cells -The `.[size]-[margin-type]-collapse` class lets you remove cell gutters. +The `.[size]-[gutter-type]-collapse` class lets you remove cell gutters. There are times when you won't want each media query to be collapsed. In this case, use the media query size you want and collapse and add that to your grid element. Example shows gutters at small and no gutters on medium and up. ```html_example -
+
Gutters at small no gutters at medium.
@@ -181,7 +181,7 @@ There are times when you won't want each media query to be collapsed. In this ca Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to a grid. ```html_example -
+
Offset 2 on large
4 cells
@@ -192,7 +192,9 @@ Offsets work by applying `margin-left` (or `margin-top` for a vertical grid) to ## Vertical Grids The XY grid also supports vertical grids. Simply apply `.grid-y` instead of `.grid-x`. -The internal cells will shift automatically to provide spacing vertically rather than horizontally +The internal cells will shift automatically to provide spacing vertically rather than horizontally. + +You can also apply margin or padding with `.grid-margin-y` and `.grid-padding-y` to apply spacing to the top and bottom of cells.

Please note for vertical grids to work, the grid needs a height. You can also use [grid frame](#grid-frame) to create a 100 vertical height grid (or 100% height if nested).

@@ -230,7 +232,7 @@ Here's an example of what you can do:

Grid Frame Header

-
+
A medium 4 cell
@@ -243,7 +245,7 @@ Here's an example of what you can do:
-
+

Independent scrolling sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus odio, accumsan id ullamcorper eget, varius nec erat. Nulla facilisi. Donec dui felis, euismod nec finibus vitae, dapibus quis arcu. Maecenas tempor et ipsum quis venenatis. Ut posuere sed augue sit amet efficitur. Sed imperdiet, justo id tempus rhoncus, est est viverra turpis, non vulputate magna lectus et nisl. Pellentesque ultrices porttitor vehicula. Ut aliquet efficitur ligula, a consectetur felis. Proin tristique ut augue nec luctus. Curabitur a sapien pretium, auctor elit a, efficitur erat. Donec tincidunt dui vel velit bibendum euismod. Cras vitae nibh dui. Aliquam erat volutpat. Etiam sit amet arcu a erat efficitur facilisis. Ut viverra dapibus turpis, et ornare justo. Integer in dui cursus, dignissim tortor a, hendrerit risus.

diff --git a/test/visual/xy-grid/block-grid.html b/test/visual/xy-grid/block-grid.html index 12e31b047..585cfc273 100644 --- a/test/visual/xy-grid/block-grid.html +++ b/test/visual/xy-grid/block-grid.html @@ -31,7 +31,7 @@

Margin Block Grid

small 2, medium 4, large 6

-
+
cell
cell
cell
@@ -49,7 +49,7 @@

Padding Block Grid

small 1, medium 3, large 5

-
+
cell
cell
cell
diff --git a/test/visual/xy-grid/collapse.html b/test/visual/xy-grid/collapse.html index 14d17c79f..3fbd8dda2 100644 --- a/test/visual/xy-grid/collapse.html +++ b/test/visual/xy-grid/collapse.html @@ -31,7 +31,7 @@

Margin Grid Collapse

Gutters should collapse on large.

-
+
12
11
1
@@ -52,7 +52,7 @@

Padding Grid Collapse

Gutters should collapse on medium.

-
+
12
11
1
diff --git a/test/visual/xy-grid/frame-grid.html b/test/visual/xy-grid/frame-grid.html index 1abf30c2e..6daef1684 100644 --- a/test/visual/xy-grid/frame-grid.html +++ b/test/visual/xy-grid/frame-grid.html @@ -23,7 +23,7 @@

Grid Frame Header

-
+
A medium 4 cell
@@ -36,7 +36,7 @@
-
+

Independent scrolling sidebar

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacus odio, accumsan id ullamcorper eget, varius nec erat. Nulla facilisi. Donec dui felis, euismod nec finibus vitae, dapibus quis arcu. Maecenas tempor et ipsum quis venenatis. Ut posuere sed augue sit amet efficitur. Sed imperdiet, justo id tempus rhoncus, est est viverra turpis, non vulputate magna lectus et nisl. Pellentesque ultrices porttitor vehicula. Ut aliquet efficitur ligula, a consectetur felis. Proin tristique ut augue nec luctus. Curabitur a sapien pretium, auctor elit a, efficitur erat. Donec tincidunt dui vel velit bibendum euismod. Cras vitae nibh dui. Aliquam erat volutpat. Etiam sit amet arcu a erat efficitur facilisis. Ut viverra dapibus turpis, et ornare justo. Integer in dui cursus, dignissim tortor a, hendrerit risus.

diff --git a/test/visual/xy-grid/margin-grid.html b/test/visual/xy-grid/margin-grid.html index d8b2e187a..387b0c358 100644 --- a/test/visual/xy-grid/margin-grid.html +++ b/test/visual/xy-grid/margin-grid.html @@ -30,7 +30,7 @@

Sizing Classes

-
+
12
11
1
@@ -48,9 +48,9 @@

Nesting

-
+
-
+
9 nested
3 nested
@@ -60,14 +60,14 @@

Auto and Shrink

-
+
Shrink on medium
Auto on medium

Collapse

-
+
12
11
1
@@ -85,7 +85,7 @@

Offset

-
+
3
4
diff --git a/test/visual/xy-grid/offset.html b/test/visual/xy-grid/offset.html index b72b1b681..00ce5d3a4 100644 --- a/test/visual/xy-grid/offset.html +++ b/test/visual/xy-grid/offset.html @@ -30,73 +30,73 @@

Margin Grid Offset

-
+
1
-
+
2
-
+
3
-
+
4
-
+
5
-
+
6
-
+
7
-
+
8
-
+
95
-
+
10
-
+
11

Padding Grid Offset

-
+
1
-
+
2
-
+
3
-
+
4
-
+
5
-
+
6
-
+
7
-
+
8
-
+
95
-
+
10
-
+
11
diff --git a/test/visual/xy-grid/padding-grid.html b/test/visual/xy-grid/padding-grid.html index c4333d49e..406895496 100644 --- a/test/visual/xy-grid/padding-grid.html +++ b/test/visual/xy-grid/padding-grid.html @@ -30,7 +30,7 @@

Sizing Classes

-
+
12
11
1
@@ -48,9 +48,9 @@

Nesting

-
+
-
+
9 nested
3 nested
@@ -60,14 +60,14 @@

Auto and Shrink

-
+
Shrink on medium
Auto on medium

Collapse

-
+
12
11
1
@@ -85,7 +85,7 @@

Offset

-
+
3
4
diff --git a/test/visual/xy-grid/vertical-grid.html b/test/visual/xy-grid/vertical-grid.html index d1702df92..d33a39903 100644 --- a/test/visual/xy-grid/vertical-grid.html +++ b/test/visual/xy-grid/vertical-grid.html @@ -1,4 +1,4 @@ -6 + @@ -28,7 +28,7 @@

Margin Grid

-
+
auto/3/1
auto/3/2
auto/3/4
@@ -37,7 +37,7 @@

Padding Grid

-
+
auto/3/1
auto/3/2
auto/3/4