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 d2b729f1365dc075e5bc19d5291b1cb6d231fc2b..dea8954190f35cabfbff26b3fd17b2e8dc514ade 100644 (file)
--- 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 e39b123aadf33b2a53c533e35c235c687f202206..2facc08beaf1379582eb6c16b97531db6c731862 100644 (file)
--- 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.
 
 <div class="docs-codepen-container">
 <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/owvqYp?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-x margin-gutters">
+<div class="grid-x grid-margin-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>
-<div class="grid-x padding-gutters">
+<div class="grid-x grid-padding-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>
@@ -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-x margin-gutters">
+<div class="grid-x grid-margin-x">
   <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-x margin-gutters">
+<div class="grid-x grid-margin-x">
   <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-x margin-gutters">
+<div class="grid-x grid-margin-x">
   <div class="shrink cell">Shrink!</div>
   <div class="auto cell">Expand!</div>
 </div>
@@ -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
-<div class="grid-x margin-gutters medium-margin-collapse">
+<div class="grid-x grid-margin-x 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-x margin-gutters">
+<div class="grid-x grid-margin-x">
   <div class="small-4 large-offset-2 cell">Offset 2 on large</div>
   <div class="small-4 cell">4 cells</div>
 </div>
@@ -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.
 
 <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>
@@ -230,7 +232,7 @@ Here's an example of what you can do:
 <div class="grid-y medium-grid-frame">
   <div class="cell shrink header cell-block-container">
     <h1>Grid Frame Header</h1>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell medium-4">
         A medium 4 cell
       </div>
@@ -243,7 +245,7 @@ Here's an example of what you can do:
     </div>
   </div>
   <div class="cell auto cell-block-container">
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <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>

diff --git a/test/visual/xy-grid/block-grid.html b/test/visual/xy-grid/block-grid.html
index 12e31b047a2d7b1c174a0c309fed689094c24c44..585cfc2739f6e3ffa1de18e6c420a5cd89296eb0 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-x margin-gutters small-up-2 medium-up-4 large-up-6">
+    <div class="grid-x grid-margin-x 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-x padding-gutters small-up-1 medium-up-3 large-up-5">
+    <div class="grid-x grid-padding-x 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 14d17c79f13b3ec61bb12c41e8e75e767e378b1b..3fbd8dda2518e969e5481b22e5e13fab66254c01 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-x margin-gutters large-margin-collapse">
+    <div class="grid-x grid-margin-x 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-x padding-gutters medium-padding-collapse">
+    <div class="grid-x grid-padding-x 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>

diff --git a/test/visual/xy-grid/frame-grid.html b/test/visual/xy-grid/frame-grid.html
index 1abf30c2e1b194a7e8cef70f169afb7b8e303b2c..6daef1684e6c74e80b950a8301740a37c082a122 100644 (file)
--- a/test/visual/xy-grid/frame-grid.html
+++ b/test/visual/xy-grid/frame-grid.html
@@ -23,7 +23,7 @@
     <div class="grid-y medium-grid-frame">
       <div class="cell shrink header cell-block-container">
         <h1>Grid Frame Header</h1>
-        <div class="grid-x padding-gutters">
+        <div class="grid-x grid-padding-x">
           <div class="cell medium-4">
             A medium 4 cell
           </div>
@@ -36,7 +36,7 @@
         </div>
       </div>
       <div class="cell auto cell-block-container">
-        <div class="grid-x padding-gutters">
+        <div class="grid-x grid-padding-x">
           <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>

diff --git a/test/visual/xy-grid/margin-grid.html b/test/visual/xy-grid/margin-grid.html
index d8b2e187aa0ca4469e7b93391d10fd439e3d0366..387b0c35845c84665e411b587c661c28f1ab9899 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-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <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-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell medium-6">
-        <div class="grid-x margin-gutters">
+        <div class="grid-x grid-margin-x">
           <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-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <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-x margin-gutters large-margin-collapse">
+    <div class="grid-x grid-margin-x 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-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <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 b72b1b681ec384cddab5e460b3f4b0059fbf28d4..00ce5d3a47d396be5befb30538593838a76091aa 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-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-1"><div class="demo">1</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-2"><div class="demo">2</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-3"><div class="demo">3</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-4"><div class="demo">4</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-5"><div class="demo">5</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-6"><div class="demo">6</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-7"><div class="demo">7</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-8"><div class="demo">8</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-9"><div class="demo">95</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-10"><div class="demo">10</div></div>
     </div>
-    <div class="grid-x margin-gutters">
+    <div class="grid-x grid-margin-x">
       <div class="cell small-1 small-offset-11"><div class="demo">11</div></div>
     </div>
 
     <h2>Padding Grid Offset</h2>
 
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-1"><div class="demo">1</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-2"><div class="demo">2</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-3"><div class="demo">3</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-4"><div class="demo">4</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-5"><div class="demo">5</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-6"><div class="demo">6</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-7"><div class="demo">7</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-8"><div class="demo">8</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-9"><div class="demo">95</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-10"><div class="demo">10</div></div>
     </div>
-    <div class="grid-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell small-1 small-offset-11"><div class="demo">11</div></div>
     </div>
 

diff --git a/test/visual/xy-grid/padding-grid.html b/test/visual/xy-grid/padding-grid.html
index c4333d49ebd82cfa533637690d124256fa953a87..406895496bdbec99c9174841b935a59d0ac518ba 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-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <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-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <div class="cell medium-6">
-        <div class="grid-x padding-gutters">
+        <div class="grid-x grid-padding-x">
           <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-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <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-x padding-gutters large-padding-collapse">
+    <div class="grid-x grid-padding-x 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-x padding-gutters">
+    <div class="grid-x grid-padding-x">
       <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 d1702df92e49a49c3e0c451c3190c7f2ddfd7c70..d33a39903ab6a3336402ed3754055508a8aa8537 100644 (file)
--- a/test/visual/xy-grid/vertical-grid.html
+++ b/test/visual/xy-grid/vertical-grid.html
@@ -1,4 +1,4 @@
-6<!doctype html>
+<!doctype html>
 <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
 <html class="no-js" lang="en" dir="ltr">
   <head>
@@ -28,7 +28,7 @@
 
     <h2>Margin Grid</h2>
 
-    <div class="grid-y margin-gutters" style="height: 800px;">
+    <div class="grid-y grid-margin-y" 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>
@@ -37,7 +37,7 @@
 
     <h2>Padding Grid</h2>
 
-    <div class="grid-y grid-frame padding-gutters" style="height: 800px;">
+    <div class="grid-y grid-frame grid-padding-y" 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>