Skip to content

Commit

Permalink
Merge pull request #10118 from zurb/iterate-xy-grid
Browse files Browse the repository at this point in the history 
Change class naming to grid-x and grid-y, eliminate cell-level vertical naming
  • Loading branch information
@kball
kball committed Jun 2, 2017
2 parents 512287c + 41f8b83 commit 34adb84
Show file tree
Hide file tree
Showing 9 changed files with 100 additions and 93 deletions.
46 changes: 23 additions & 23 deletions docs/pages/xy-grid.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<div class="docs-codepen-container">
<a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/gRYeMQ?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
</div>

```html_example
<div class="grid">
<div class="grid-x">
<div class="cell">full width cell</div>
<div class="cell">full width cell</div>
</div>
<div class="grid">
<div class="grid-x">
<div class="small-6 cell">6 cells</div>
<div class="small-6 cell">6 cells</div>
</div>
<div class="grid">
<div class="grid-x">
<div class="medium-6 large-4 cell">12/6/4 cells</div>
<div class="medium-6 large-8 cell">12/6/8 cells</div>
</div>
Expand All @@ -78,11 +78,11 @@ To define a grid type, simple set `.margin-gutters` or `.padding-gutters` on the
</div>

```html_example
<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="medium-6 large-4 cell">12/6/4 cells</div>
<div class="medium-6 large-8 cell">12/6/8 cells</div>
</div>
<div class="grid padding-gutters">
<div class="grid-x padding-gutters">
<div class="medium-6 large-4 cell">12/6/4 cells</div>
<div class="medium-6 large-8 cell">12/6/8 cells</div>
</div>
Expand All @@ -95,7 +95,7 @@ The grid defaults to the full width of its container. In order to contain the gr

```html
<div class="grid-container">
<div class="grid">
<div class="grid-x">
<div class="cell small-4">cell</div>
<div class="cell small-4">cell</div>
<div class="cell small-4">cell</div>
Expand All @@ -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
<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="small-4 cell">4 cells</div>
<div class="auto cell">Whatever's left!</div>
</div>
Expand All @@ -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
<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="small-4 cell">4 cells</div>
<div class="auto cell">Whatever's left!</div>
<div class="auto cell">Whatever's left!</div>
Expand All @@ -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
<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="shrink cell">Shrink!</div>
<div class="auto cell">Expand!</div>
</div>
Expand All @@ -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
<div class="grid">
<div class="grid-x">
<div class="large-auto cell">One</div>
<div class="large-auto cell">Two</div>
<div class="large-auto cell">Three</div>
Expand All @@ -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
<div class="grid margin-gutters medium-margin-collapse">
<div class="grid-x margin-gutters medium-margin-collapse">
<div class="small-6 cell">
Gutters at small no gutters at medium.
</div>
Expand All @@ -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
<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="small-4 large-offset-2 cell">Offset 2 on large</div>
<div class="small-4 cell">4 cells</div>
</div>
Expand All @@ -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

<div class="callout">
<p>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).</p>
Expand All @@ -204,11 +204,11 @@ All other classes are available eg: `.[size]-vertical-[number]`, `[size]-vertica
</div>

```html_example
<div class="grid-vertical" style="height: 500px;">
<div class="cell small-vertical-6 medium-vertical-8 large-vertical-2">
<div class="grid-y" style="height: 500px;">
<div class="cell small-6 medium-8 large-2">
6/8/2
</div>
<div class="cell small-vertical-6 medium-vertical-4 large-vertical-10">
<div class="cell small-6 medium-4 large-10">
6/4/10
</div>
</div>
Expand All @@ -227,10 +227,10 @@ Here's an example of what you can do:
</div>

```html_example
<div class="grid grid-vertical medium-grid-frame">
<div class="grid-y medium-grid-frame">
<div class="cell shrink header cell-block-container">
<h1>Grid Frame Header</h1>
<div class="grid padding-gutters">
<div class="grid-x padding-gutters">
<div class="cell medium-4">
A medium 4 cell
</div>
Expand All @@ -243,15 +243,15 @@ Here's an example of what you can do:
</div>
</div>
<div class="cell auto cell-block-container">
<div class="grid padding-gutters">
<div class="cell medium-4 medium-cell-block-vertical">
<div class="grid-x padding-gutters">
<div class="cell medium-4 medium-cell-block-y">
<h2>Independent scrolling sidebar</h2>
<p>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.</p>
<p>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.</p>
</div>
<div class="cell medium-8 medium-cell-block-vertical">
<div class="cell medium-8 medium-cell-block-y">
<h2>Independent scrolling body</h2>
<p>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.</p>
<p>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.</p>
Expand Down
33 changes: 20 additions & 13 deletions scss/xy-grid/_classes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,35 +15,42 @@
}

// 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);
}
}

// 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);
}
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -217,7 +224,7 @@
}
}

.grid-vertical {
.grid-y {
@include xy-grid(vertical);


Expand Down Expand Up @@ -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);
}
}
Expand All @@ -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')
}
}

Expand Down Expand Up @@ -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);
Expand All @@ -319,7 +326,7 @@
@include xy-grid-frame(true);
}

.#{$-zf-size}-cell-block-vertical {
.#{$-zf-size}-cell-block-y {
@include xy-cell-block(true);
}
}
Expand Down
4 changes: 2 additions & 2 deletions test/visual/xy-grid/block-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h1>Block Grid</h1>
<h2>Margin Block Grid</h2>
<p>small 2, medium 4, large 6</p>

<div class="grid margin-gutters small-up-2 medium-up-4 large-up-6">
<div class="grid-x margin-gutters small-up-2 medium-up-4 large-up-6">
<div class="cell"><div class="demo">cell</div></div>
<div class="cell"><div class="demo">cell</div></div>
<div class="cell"><div class="demo">cell</div></div>
Expand All @@ -49,7 +49,7 @@ <h2>Margin Block Grid</h2>
<h2>Padding Block Grid</h2>
<p>small 1, medium 3, large 5</p>

<div class="grid padding-gutters small-up-1 medium-up-3 large-up-5">
<div class="grid-x padding-gutters small-up-1 medium-up-3 large-up-5">
<div class="cell"><div class="demo">cell</div></div>
<div class="cell"><div class="demo">cell</div></div>
<div class="cell"><div class="demo">cell</div></div>
Expand Down
6 changes: 3 additions & 3 deletions test/visual/xy-grid/collapse.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h1>Grid Collapse</h1>
<h2>Margin Grid Collapse</h2>
<p>Gutters should collapse on large.</p>

<div class="grid margin-gutters large-margin-collapse">
<div class="grid-x margin-gutters large-margin-collapse">
<div class="cell medium-12"><div class="demo">12</div></div>
<div class="cell medium-11"><div class="demo">11</div></div>
<div class="cell medium-1"><div class="demo">1</div></div>
Expand All @@ -52,7 +52,7 @@ <h2>Margin Grid Collapse</h2>
<h2>Padding Grid Collapse</h2>
<p>Gutters should collapse on medium.</p>

<div class="grid padding-gutters medium-padding-collapse">
<div class="grid-x padding-gutters medium-padding-collapse">
<div class="cell medium-12"><div class="demo">12</div></div>
<div class="cell medium-11"><div class="demo">11</div></div>
<div class="cell medium-1"><div class="demo">1</div></div>
Expand All @@ -74,4 +74,4 @@ <h2>Padding Grid Collapse</h2>
$(document).foundation();
</script>
</body>
</html>
</html>
10 changes: 5 additions & 5 deletions test/visual/xy-grid/frame-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
</style>
</head>
<body>
<div class="grid grid-vertical medium-grid-frame">
<div class="grid-y medium-grid-frame">
<div class="cell shrink header cell-block-container">
<h1>Grid Frame Header</h1>
<div class="grid padding-gutters">
<div class="grid-x padding-gutters">
<div class="cell medium-4">
A medium 4 cell
</div>
Expand All @@ -36,15 +36,15 @@ <h1>Grid Frame Header</h1>
</div>
</div>
<div class="cell auto cell-block-container">
<div class="grid padding-gutters">
<div class="cell medium-4 medium-cell-block-vertical">
<div class="grid-x padding-gutters">
<div class="cell medium-4 medium-cell-block-y">
<h2>Independent scrolling sidebar</h2>
<p>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.</p>

<p>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.</p>

</div>
<div class="cell medium-8 medium-cell-block-vertical">
<div class="cell medium-8 medium-cell-block-y">
<h2>Independent scrolling body</h2>
<p>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.</p>

Expand Down
14 changes: 7 additions & 7 deletions test/visual/xy-grid/margin-grid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h1>Margin Grid</h1>

<h2>Sizing Classes</h2>

<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="cell medium-12"><div class="demo">12</div></div>
<div class="cell medium-11"><div class="demo">11</div></div>
<div class="cell medium-1"><div class="demo">1</div></div>
Expand All @@ -48,26 +48,26 @@ <h2>Sizing Classes</h2>

<h2>Nesting</h2>

<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="cell medium-6">
<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="cell medium-9"><div class="demo">9 nested</div></div>
<div class="cell medium-3"><div class="demo">3 nested</div></div>
</div>
</div>
<div class="cell medium-6"><div class="demo">11</div></div>
<div class="cell medium-6"><div class="demo">6</div></div>
</div>

<h2>Auto and Shrink</h2>

<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="cell medium-shrink"><div class="demo">Shrink on medium</div></div>
<div class="cell medium-auto"><div class="demo">Auto on medium</div></div>
</div>

<h2>Collapse</h2>

<div class="grid margin-gutters large-margin-collapse">
<div class="grid-x margin-gutters large-margin-collapse">
<div class="cell medium-12"><div class="demo">12</div></div>
<div class="cell medium-11"><div class="demo">11</div></div>
<div class="cell medium-1"><div class="demo">1</div></div>
Expand All @@ -85,7 +85,7 @@ <h2>Collapse</h2>

<h2>Offset</h2>

<div class="grid margin-gutters">
<div class="grid-x margin-gutters">
<div class="cell medium-3 medium-offset-2"><div class="demo">3</div></div>
<div class="cell medium-4"><div class="demo">4</div></div>
</div>
Expand Down

0 comments on commit 34adb84

Please sign in to comment.