Change class naming to grid-x and grid-y, eliminate cell-level vertical naming

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index dc440afafddd99e785f4b5044fa58e9bf5c10a5a..e39b123aadf33b2a53c533e35c235c687f202206 100644 (file)
--- 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.
 
 <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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

diff --git a/scss/xy-grid/_classes.scss b/scss/xy-grid/_classes.scss
index caf4a9bdcf99df82a719ec37306d2a44823f2e64..b1893263f50ef51aeccc9f0181f06aad4de60e70 100644 (file)
--- 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 ffa8054c9c25f203915984fc502126b7b0fd54ab..12e31b047a2d7b1c174a0c309fed689094c24c44 100644 (file)
--- a/test/visual/xy-grid/block-grid.html
+++ b/test/visual/xy-grid/block-grid.html
@@ -31,7 +31,7 @@
     <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>
@@ -49,7 +49,7 @@
     <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>

diff --git a/test/visual/xy-grid/collapse.html b/test/visual/xy-grid/collapse.html
index a0985d0051dd88c1989b347bdd3d981db23ee91c..14d17c79f13b3ec61bb12c41e8e75e767e378b1b 100644 (file)
--- a/test/visual/xy-grid/collapse.html
+++ b/test/visual/xy-grid/collapse.html
@@ -31,7 +31,7 @@
     <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>
@@ -52,7 +52,7 @@
     <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>
@@ -74,4 +74,4 @@
       $(document).foundation();
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>

diff --git a/test/visual/xy-grid/frame-grid.html b/test/visual/xy-grid/frame-grid.html
index 9eae054bbb62f287777450ecf244b3f976ac34cf..1abf30c2e1b194a7e8cef70f169afb7b8e303b2c 100644 (file)
--- a/test/visual/xy-grid/frame-grid.html
+++ b/test/visual/xy-grid/frame-grid.html
@@ -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>
@@ -36,15 +36,15 @@
         </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>
 

diff --git a/test/visual/xy-grid/margin-grid.html b/test/visual/xy-grid/margin-grid.html
index ed5afe7b792dd021c3b32c321516b1dd28f1b888..d8b2e187aa0ca4469e7b93391d10fd439e3d0366 100644 (file)
--- a/test/visual/xy-grid/margin-grid.html
+++ b/test/visual/xy-grid/margin-grid.html
@@ -30,7 +30,7 @@
 
     <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>
@@ -48,26 +48,26 @@
 
     <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>
@@ -85,7 +85,7 @@
 
     <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>

diff --git a/test/visual/xy-grid/offset.html b/test/visual/xy-grid/offset.html
index 26124dbe41ec5e3cfd3de3ad294ab9606af61583..b72b1b681ec384cddab5e460b3f4b0059fbf28d4 100644 (file)
--- a/test/visual/xy-grid/offset.html
+++ b/test/visual/xy-grid/offset.html
@@ -30,73 +30,73 @@
 
     <h2>Margin Grid Offset</h2>
 
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-1"><div class="demo">1</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-2"><div class="demo">2</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-3"><div class="demo">3</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-4"><div class="demo">4</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-5"><div class="demo">5</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-6"><div class="demo">6</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-7"><div class="demo">7</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-8"><div class="demo">8</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-9"><div class="demo">95</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-10"><div class="demo">10</div></div>
     </div>
-    <div class="grid margin-gutters">
+    <div class="grid-x margin-gutters">
       <div class="cell small-1 small-offset-11"><div class="demo">11</div></div>
     </div>
 
     <h2>Padding Grid Offset</h2>
 
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-1"><div class="demo">1</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-2"><div class="demo">2</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-3"><div class="demo">3</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-4"><div class="demo">4</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-5"><div class="demo">5</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-6"><div class="demo">6</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-7"><div class="demo">7</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-8"><div class="demo">8</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-9"><div class="demo">95</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-10"><div class="demo">10</div></div>
     </div>
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell small-1 small-offset-11"><div class="demo">11</div></div>
     </div>
 
@@ -106,4 +106,4 @@
       $(document).foundation();
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>

diff --git a/test/visual/xy-grid/padding-grid.html b/test/visual/xy-grid/padding-grid.html
index 233c339e8d004cfd9734a3a43ed1ae9920e1003a..c4333d49ebd82cfa533637690d124256fa953a87 100644 (file)
--- a/test/visual/xy-grid/padding-grid.html
+++ b/test/visual/xy-grid/padding-grid.html
@@ -30,7 +30,7 @@
 
     <h2>Sizing Classes</h2>
 
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-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>
@@ -48,9 +48,9 @@
 
     <h2>Nesting</h2>
 
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-gutters">
       <div class="cell medium-6">
-        <div class="grid padding-gutters">
+        <div class="grid-x padding-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>
@@ -60,14 +60,14 @@
 
     <h2>Auto and Shrink</h2>
 
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-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 padding-gutters large-padding-collapse">
+    <div class="grid-x padding-gutters large-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>
@@ -85,7 +85,7 @@
 
     <h2>Offset</h2>
 
-    <div class="grid padding-gutters">
+    <div class="grid-x padding-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>

diff --git a/test/visual/xy-grid/vertical-grid.html b/test/visual/xy-grid/vertical-grid.html
index 5106cee96eabf5a2e1f2fc1587983c83f1cd7729..d1702df92e49a49c3e0c451c3190c7f2ddfd7c70 100644 (file)
--- a/test/visual/xy-grid/vertical-grid.html
+++ b/test/visual/xy-grid/vertical-grid.html
@@ -1,4 +1,4 @@
-<!doctype html>
+6<!doctype html>
 <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
 <html class="no-js" lang="en" dir="ltr">
   <head>
@@ -28,20 +28,20 @@
 
     <h2>Margin Grid</h2>
 
-    <div class="grid-vertical margin-gutters" style="height: 800px;">
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-1"><div class="demo">auto/3/1</div></div>
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-2"><div class="demo">auto/3/2</div></div>
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-4"><div class="demo">auto/3/4</div></div>
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-5"><div class="demo">auto/3/5</div></div>
+    <div class="grid-y margin-gutters" style="height: 800px;">
+      <div class="cell auto medium-3 large-1"><div class="demo">auto/3/1</div></div>
+      <div class="cell auto medium-3 large-2"><div class="demo">auto/3/2</div></div>
+      <div class="cell auto medium-3 large-4"><div class="demo">auto/3/4</div></div>
+      <div class="cell auto medium-3 large-5"><div class="demo">auto/3/5</div></div>
     </div>
 
     <h2>Padding Grid</h2>
 
-    <div class="grid-vertical grid-frame padding-gutters" style="height: 800px;">
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-1"><div class="demo">auto/3/1</div></div>
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-2"><div class="demo">auto/3/2</div></div>
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-4"><div class="demo">auto/3/4</div></div>
-      <div class="cell small-vertical-auto medium-vertical-3 large-vertical-5"><div class="demo">auto/3/5</div></div>
+    <div class="grid-y grid-frame padding-gutters" style="height: 800px;">
+      <div class="cell auto medium-3 large-1"><div class="demo">auto/3/1</div></div>
+      <div class="cell auto medium-3 large-2"><div class="demo">auto/3/2</div></div>
+      <div class="cell auto medium-3 large-4"><div class="demo">auto/3/4</div></div>
+      <div class="cell auto medium-3 large-5"><div class="demo">auto/3/5</div></div>
     </div>
 
     <script src="../assets/js/vendor.js"></script>