From 41f8b835e0e88aac0fda0a1ddad1b90cf0c6a5bf Mon Sep 17 00:00:00 2001 From: Kevin Ball Date: Fri, 2 Jun 2017 11:56:51 -0700 Subject: [PATCH] Change class naming to grid-x and grid-y, eliminate cell-level vertical naming --- docs/pages/xy-grid.md | 46 +++++++++++++------------- scss/xy-grid/_classes.scss | 33 ++++++++++-------- test/visual/xy-grid/block-grid.html | 4 +-- test/visual/xy-grid/collapse.html | 6 ++-- test/visual/xy-grid/frame-grid.html | 10 +++--- test/visual/xy-grid/margin-grid.html | 14 ++++---- test/visual/xy-grid/offset.html | 46 +++++++++++++------------- test/visual/xy-grid/padding-grid.html | 12 +++---- test/visual/xy-grid/vertical-grid.html | 22 ++++++------ 9 files changed, 100 insertions(+), 93 deletions(-) diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md index dc440afafd..e39b123aad 100644 --- a/docs/pages/xy-grid.md +++ b/docs/pages/xy-grid.md @@ -45,22 +45,22 @@ These are: ## Basics -The structure of XY grid uses `.grid` and `.cell` as its base. Without [defining a gutter type](#gutters) the cells with simply split up the space without any gutters. +The structure of XY grid uses `.grid-x`, `.grid-y`, and `.cell` as its base. Without [defining a gutter type](#gutters) the cells with simply split up the space without any gutters.
edit on codepen button
```html_example -
+
full width cell
full width cell
-
+
6 cells
6 cells
-
+
12/6/4 cells
12/6/8 cells
@@ -78,11 +78,11 @@ To define a grid type, simple set `.margin-gutters` or `.padding-gutters` on the
```html_example -
+
12/6/4 cells
12/6/8 cells
-
+
12/6/4 cells
12/6/8 cells
@@ -95,7 +95,7 @@ The grid defaults to the full width of its container. In order to contain the gr ```html
-
+
cell
cell
cell
@@ -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!
@@ -145,7 +145,7 @@ A cell can also be made to *shrink*, by adding the `.shrink` or `.[size]-shrink` To switch back to the auto behavior from a percentage or shrink behavior, use the classes `.[size]-auto` or `.[size]-shrink`. In the below example, the cells stack on small screens, and become even-width on large screens. ```html_example -
+
One
Two
Three
@@ -164,7 +164,7 @@ The `.[size]-[margin-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
@@ -191,8 +191,8 @@ 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-vertical` instead of `.grid`. -All other classes are available eg: `.[size]-vertical-[number]`, `[size]-vertical-auto` and `[size]-vertical-shrink` classes work as height rather than width. +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

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).

@@ -204,11 +204,11 @@ All other classes are available eg: `.[size]-vertical-[number]`, `[size]-vertica
```html_example -
-
+
+
6/8/2
-
+
6/4/10
@@ -227,10 +227,10 @@ Here's an example of what you can do:
```html_example -
+

Grid Frame Header

-
+
A medium 4 cell
@@ -243,15 +243,15 @@ 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.

Suspendisse pulvinar, massa iaculis feugiat lobortis, dolor sapien vestibulum nulla, vel cursus tellus leo in lorem. Aliquam eu placerat urna. Suspendisse sed viverra orci, ut mattis neque. Fusce non ultrices nisi. In sagittis varius mollis. Quisque dolor quam, consectetur eu lacinia ac, ullamcorper vel arcu. Nullam mattis imperdiet nulla sed ornare. Praesent tristique, est id eleifend vestibulum, neque nibh condimentum ex, nec lobortis purus justo a libero. Phasellus id ex ac nunc hendrerit hendrerit. Nullam urna ipsum, rutrum at fringilla vel, venenatis non purus. Maecenas egestas ex vitae venenatis molestie. Ut et odio egestas, accumsan neque et, viverra nisl. Sed faucibus nec nulla sed imperdiet. Fusce quis sem ac urna semper tempor a id elit. Nulla fringilla vitae sapien a vehicula.

-
+

Independent scrolling body

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.

Suspendisse pulvinar, massa iaculis feugiat lobortis, dolor sapien vestibulum nulla, vel cursus tellus leo in lorem. Aliquam eu placerat urna. Suspendisse sed viverra orci, ut mattis neque. Fusce non ultrices nisi. In sagittis varius mollis. Quisque dolor quam, consectetur eu lacinia ac, ullamcorper vel arcu. Nullam mattis imperdiet nulla sed ornare. Praesent tristique, est id eleifend vestibulum, neque nibh condimentum ex, nec lobortis purus justo a libero. Phasellus id ex ac nunc hendrerit hendrerit. Nullam urna ipsum, rutrum at fringilla vel, venenatis non purus. Maecenas egestas ex vitae venenatis molestie. Ut et odio egestas, accumsan neque et, viverra nisl. Sed faucibus nec nulla sed imperdiet. Fusce quis sem ac urna semper tempor a id elit. Nulla fringilla vitae sapien a vehicula.

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss index caf4a9bdcf..b1893263f5 100644 --- a/scss/xy-grid/_classes.scss +++ b/scss/xy-grid/_classes.scss @@ -15,22 +15,29 @@ } // Base grid styles - .grid { + .grid-x { @include xy-grid; } .cell { @include xy-cell-base(); @include xy-cell-static($grid-columns, false, $gutter-type: padding); + + &.auto { + @include xy-cell-base(auto); + } + + &.shrink { + @include xy-cell-base(shrink); + } + } - .grid { + .grid-x { > .auto { - @include xy-cell-base(auto); @include xy-cell-static(auto, false); } > .shrink { - @include xy-cell-base(shrink); @include xy-cell-static(shrink, false); } } @@ -38,12 +45,12 @@ // Auto width @include -zf-each-breakpoint() { @if not($-zf-size == small) { - .grid > .#{$-zf-size}-auto { + .grid-x > .#{$-zf-size}-auto { @include xy-cell-base(auto); @include xy-cell-static(auto, false); } - .grid > .#{$-zf-size}-shrink { + .grid-x > .#{$-zf-size}-shrink { @include xy-cell-base(shrink); @include xy-cell-static(shrink, false); } @@ -71,7 +78,7 @@ @for $i from 1 through $grid-columns { // Sizing (percentage) - $classname: if($vertical, '.#{$class-breakpoint}-vertical-#{$i}', '.#{$class-breakpoint}-#{$i}'); + $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}'); > #{$classname} { @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical); @@ -217,7 +224,7 @@ } } - .grid-vertical { + .grid-y { @include xy-grid(vertical); @@ -248,7 +255,7 @@ @for $i from 1 through $grid-columns { // Sizing (percentage) - > .#{$-zf-size}-vertical-#{$i} { + > .#{$-zf-size}-#{$i} { @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding); } } @@ -270,7 +277,7 @@ } @if $margin-grid { - @include xy-margin-grid-classes(top bottom, true, '.grid-vertical.margin-gutters') + @include xy-margin-grid-classes(top bottom, true, '.grid-y.margin-gutters') } } @@ -303,11 +310,11 @@ @if $vertical-grid { - .cell-block-vertical { + .cell-block-y { @include xy-cell-block(true); } - .grid-vertical { + .grid-y { &.grid-frame { width: auto; @include xy-grid-frame(true); @@ -319,7 +326,7 @@ @include xy-grid-frame(true); } - .#{$-zf-size}-cell-block-vertical { + .#{$-zf-size}-cell-block-y { @include xy-cell-block(true); } } diff --git a/test/visual/xy-grid/block-grid.html b/test/visual/xy-grid/block-grid.html index ffa8054c9c..12e31b047a 100644 --- a/test/visual/xy-grid/block-grid.html +++ b/test/visual/xy-grid/block-grid.html @@ -31,7 +31,7 @@

Block Grid

Margin Block Grid

small 2, medium 4, large 6

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

Margin Block Grid

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 a0985d0051..14d17c79f1 100644 --- a/test/visual/xy-grid/collapse.html +++ b/test/visual/xy-grid/collapse.html @@ -31,7 +31,7 @@

Grid Collapse

Margin Grid Collapse

Gutters should collapse on large.

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

Margin Grid Collapse

Padding Grid Collapse

Gutters should collapse on medium.

-
+
12
11
1
@@ -74,4 +74,4 @@

Padding Grid Collapse

$(document).foundation(); - \ No newline at end of file + diff --git a/test/visual/xy-grid/frame-grid.html b/test/visual/xy-grid/frame-grid.html index 9eae054bbb..1abf30c2e1 100644 --- a/test/visual/xy-grid/frame-grid.html +++ b/test/visual/xy-grid/frame-grid.html @@ -20,10 +20,10 @@ -
+

Grid Frame Header

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

Grid Frame Header

-
-
+
+

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.

Suspendisse pulvinar, massa iaculis feugiat lobortis, dolor sapien vestibulum nulla, vel cursus tellus leo in lorem. Aliquam eu placerat urna. Suspendisse sed viverra orci, ut mattis neque. Fusce non ultrices nisi. In sagittis varius mollis. Quisque dolor quam, consectetur eu lacinia ac, ullamcorper vel arcu. Nullam mattis imperdiet nulla sed ornare. Praesent tristique, est id eleifend vestibulum, neque nibh condimentum ex, nec lobortis purus justo a libero. Phasellus id ex ac nunc hendrerit hendrerit. Nullam urna ipsum, rutrum at fringilla vel, venenatis non purus. Maecenas egestas ex vitae venenatis molestie. Ut et odio egestas, accumsan neque et, viverra nisl. Sed faucibus nec nulla sed imperdiet. Fusce quis sem ac urna semper tempor a id elit. Nulla fringilla vitae sapien a vehicula.

-
+

Independent scrolling body

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 ed5afe7b79..d8b2e187aa 100644 --- a/test/visual/xy-grid/margin-grid.html +++ b/test/visual/xy-grid/margin-grid.html @@ -30,7 +30,7 @@

Margin Grid

Sizing Classes

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

Sizing Classes

Nesting

-
+
-
+
9 nested
3 nested
-
11
+
6

Auto and Shrink

-
+
Shrink on medium
Auto on medium

Collapse

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

Collapse

Offset

-
+
3
4
diff --git a/test/visual/xy-grid/offset.html b/test/visual/xy-grid/offset.html index 26124dbe41..b72b1b681e 100644 --- a/test/visual/xy-grid/offset.html +++ b/test/visual/xy-grid/offset.html @@ -30,73 +30,73 @@

Grid Offset

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
@@ -106,4 +106,4 @@

Padding Grid Offset

$(document).foundation(); - \ No newline at end of file + diff --git a/test/visual/xy-grid/padding-grid.html b/test/visual/xy-grid/padding-grid.html index 233c339e8d..c4333d49eb 100644 --- a/test/visual/xy-grid/padding-grid.html +++ b/test/visual/xy-grid/padding-grid.html @@ -30,7 +30,7 @@

Padding Grid - red shows the padding gutters

Sizing Classes

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

Sizing Classes

Nesting

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

Nesting

Auto and Shrink

-
+
Shrink on medium
Auto on medium

Collapse

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

Collapse

Offset

-
+
3
4
diff --git a/test/visual/xy-grid/vertical-grid.html b/test/visual/xy-grid/vertical-grid.html index 5106cee96e..d1702df92e 100644 --- a/test/visual/xy-grid/vertical-grid.html +++ b/test/visual/xy-grid/vertical-grid.html @@ -1,4 +1,4 @@ - +6 @@ -28,20 +28,20 @@

Vertical Grid

Margin Grid

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

Padding Grid

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