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.
```html_example -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]-verticaLorem 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.
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 @@small 2, medium 4, large 6
-small 1, medium 3, large 5
-Gutters should collapse on large.
-Gutters should collapse on medium.
-