From: Brett Mason <brettsmason@gmail.com>
Date: Thu, 1 Jun 2017 09:00:02 +0000 (+0100)
Subject: Rework everything for the new grid to be called the XY Grid. Add missing comments... 
X-Git-Tag: v6.4.0-rc1~9^2~6
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c514fb4b172ae96de3ccb41c521fe40667a6a3fe;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Rework everything for the new grid to be called the XY Grid. Add missing comments and possible arguements to some mixins.
---

diff --git a/docs/assets/scss/examples/_grid.scss b/docs/assets/scss/examples/_grid.scss
index 220671a43..116876e90 100644
--- a/docs/assets/scss/examples/_grid.scss
+++ b/docs/assets/scss/examples/_grid.scss
@@ -76,7 +76,7 @@
 }
 // Flex Grid
 [id^="docs-zf"].docs-component .docs-code-live {
-  @include foundation-zf-grid-classes;
+  @include foundation-xy-grid-classes;
 
   .grid {
     background: #f9f9f9;
diff --git a/docs/pages/zf-grid.md b/docs/pages/xy-grid.md
similarity index 89%
rename from docs/pages/zf-grid.md
rename to docs/pages/xy-grid.md
index d989f6daf..0a1156b28 100644
--- a/docs/pages/zf-grid.md
+++ b/docs/pages/xy-grid.md
@@ -1,16 +1,16 @@
 ---
-title: ZF Grid
+title: XY Grid
 description: A fully reworked new grid system in v6.4 which has all the variety inbuilt in the form of multiple grid types which includes margin grid, padding grid, frame grid, block grid and vertical grid.
-sass: scss/grid/_zf-grid.scss
+sass: scss/xy-grid/_xy-grid.scss
 ---
 
-The flex grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.
+The XY grid works very similarly to the standard float grid, but includes a number of useful features only possible with flexbox, like horizontal and vertical alignment, automatic sizing, and easier source ordering.
 
 ---
 
 ## Browser support
 
-The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
+XY grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+. Flexbox is supported in Android 2, but not reliably enough for use with this grid. ([View flexbox browser support.](http://caniuse.com/#feat=flexbox)) We recommend only using the flex grid on projects that can live with purely cutting-edge browser support.
 
 ---
 
@@ -21,8 +21,8 @@ If you're using the CSS version of Foundation, you can generate a <a href="https
 ```scss
 @import 'foundation';
 
-@include zf-grid;
-@include zf-grid-classes;
+@include xy-grid;
+@include xy-grid-classes;
 ```
 ---
 
diff --git a/scss/foundation.scss b/scss/foundation.scss
index 4269dc611..a3bf826bf 100644
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -27,7 +27,7 @@
 
 // Components
 @import 'grid/grid';
-@import 'zf-grid/zf-grid';
+@import 'xy-grid/xy-grid';
 @import 'typography/typography';
 @import 'forms/forms';
 @import 'components/visibility';
@@ -79,8 +79,8 @@
     @include foundation-grid;
   }
   @else {
-    @if $zf-grid {
-      @include foundation-zf-grid-classes;
+    @if $xy-grid {
+      @include foundation-xy-grid-classes;
     }
     @else {
       @include foundation-flex-grid;
diff --git a/scss/zf-grid/_cell.scss b/scss/xy-grid/_cell.scss
similarity index 69%
rename from scss/zf-grid/_cell.scss
rename to scss/xy-grid/_cell.scss
index c9a29092c..389e72a3d 100644
--- a/scss/zf-grid/_cell.scss
+++ b/scss/xy-grid/_cell.scss
@@ -3,13 +3,13 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
 /// Calculate the percentage size of a cell.
 ///
 /// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2 or 1/3.
-@function zf-cell-size(
+@function xy-cell-size(
   $size: $grid-columns
 ) {
   // Parsing percents, decimals, n of n and number counts
@@ -28,7 +28,7 @@
   // Parsing "n of n" or "n/n" expressions
   @elseif type-of($size) == 'list' {
     @if length($size) != 3 {
-      @error 'Wrong syntax for zf-cell-size(). Use the format "n of n" or "n/n".';
+      @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
     }
     @else {
       $size: percentage(nth($size, 1) / nth($size, 3));
@@ -36,13 +36,16 @@
   }
   // Anything else is incorrect
   @else {
-    @error 'Wrong syntax for zf-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+    @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
   }
 
   @return $size;
 }
 
-@mixin zf-cell-base($size: full) {
+/// Sets base flex properties for cells.
+///
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto` or `shrink`.
+@mixin xy-cell-base($size: full) {
   min-height: 0px;
   min-width: 0px;
   @if($size == 'full') {
@@ -57,7 +60,10 @@
   }
 }
 
-@mixin zf-cell-reset($vertical: true) {
+/// Resets a cells width (or height if vertical is true) as well as strips its gutters.
+///
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-reset($vertical: true) {
   $direction: if($vertical == true, width, height);
   $sides: if($vertical == true, left right, top bottom);
   #{$direction}: auto;
@@ -67,7 +73,8 @@
   }
 }
 
-@mixin -zf-cell-properties($size, $margin-gutter, $vertical) {
+// Sets our cell widths or heights depending on gutter type.
+@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
   $direction: if($vertical == true, height, width);
   @if($size == 'full') {
     $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
@@ -81,12 +88,11 @@
     #{$direction}: auto;
   }
   @else {
-    $val: if($margin-gutter == 0, #{zf-cell-size($size)}, calc(#{zf-cell-size($size)} - #{rem-calc($margin-gutter)}));
+    $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
     #{$direction}: $val;
   }
 }
 
-
 /// Creates a cell for your grid.
 ///
 /// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
@@ -96,7 +102,7 @@
 /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
 /// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
-@mixin zf-cell(
+@mixin xy-cell(
   $size: full,
   $gutter-output: true,
   $gutters: $grid-margin-gutters,
@@ -119,13 +125,13 @@
   $gutter: -zf-get-bp-val($gutters, $breakpoint);
 
   // Base flex properties
-  @include zf-cell-base($size);
+  @include xy-cell-base($size);
 
   @if($gutter-type == 'margin') {
-    @include -zf-cell-properties($size, $gutter, $vertical);
+    @include -xy-cell-properties($size, $gutter, $vertical);
   }
   @else {
-    @include -zf-cell-properties($size, 0, $vertical);
+    @include -xy-cell-properties($size, 0, $vertical);
   }
 
   @if $gutter-output {
@@ -133,22 +139,30 @@
     @if(type-of($gutters) == 'map') {
       // If $gutters map has a key = $breakpoint, output the value
       @if (map-has-key($gutters, $breakpoint)) {
-        @include zf-gutters($gutter, $gutter-type, $gutter-position);
+        @include xy-gutters($gutter, $gutter-type, $gutter-position);
       }
     }
     // If not a map
     @else {
-      @include zf-gutters($gutter, $gutter-type, $gutter-position);
+      @include xy-gutters($gutter, $gutter-type, $gutter-position);
     }
   }
 }
 
-@mixin zf-cell-static(
+/// Creates a single breakpoint sized grid. Used to generate our grid classes.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
+@mixin xy-cell-static(
   $size: full,
   $gutter-output: true,
   $gutters: $grid-margin-gutters,
-  $breakpoint: $-zf-zero-breakpoint,
   $gutter-type: margin,
+  $breakpoint: $-zf-zero-breakpoint,
   $vertical: false
 ) {
 
@@ -156,23 +170,23 @@
   $gutter-position: if($vertical == true, top bottom, left right);
 
   @if($gutter-type == 'margin') {
-    @include -zf-cell-properties($size, $gutter, $vertical);
+    @include -xy-cell-properties($size, $gutter, $vertical);
   }
   @else {
-    @include -zf-cell-properties($size, 0, $vertical);
+    @include -xy-cell-properties($size, 0, $vertical);
   }
 
   // If we want to output the gutters
   @if($gutter-output) {
     // TODO: Figure out if we need to pass breakpoint in here too.
-    @include zf-gutters($gutter, $gutter-type, $gutter-position);
+    @include xy-gutters($gutter, $gutter-type, $gutter-position);
   }
 }
 
 /// Modifies a cell to give it "block" behavior (overflow auto, inertial scrolling)
 ///
 /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-@mixin zf-cell-block(
+@mixin xy-cell-block(
   $vertical: false
 ) {
   $property: if($vertical == true, 'overflow-y', 'overflow-x');
@@ -192,7 +206,7 @@
 /// Container for inside a grid frame containing multiple blocks. Typically used
 /// as a modifier for a `.cell` to allow the cell to pass along flex sizing
 /// constraints / from parents to children.
-@mixin zf-cell-block-container() {
+@mixin xy-cell-block-container() {
   display: flex;
   flex-direction: column;
   max-height: 100%;
diff --git a/scss/zf-grid/_classes.scss b/scss/xy-grid/_classes.scss
similarity index 63%
rename from scss/zf-grid/_classes.scss
rename to scss/xy-grid/_classes.scss
index 03e2f84fc..fdafa5473 100644
--- a/scss/zf-grid/_classes.scss
+++ b/scss/xy-grid/_classes.scss
@@ -3,49 +3,49 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
 // Margin Grid classes
-@mixin zf-base-grid-classes {
+@mixin xy-base-grid-classes {
 
   // Grid Container
   .grid-container {
-    @include zf-grid-container;
+    @include xy-grid-container;
   }
 
   // Base grid styles
   .grid {
-    @include zf-grid;
+    @include xy-grid;
   }
 
   // Framed grid styles
   .grid-frame {
-    @include zf-grid-frame;
+    @include xy-grid-frame;
   }
 
   .cell {
-    @include zf-cell-base();
-    @include zf-cell-static($grid-columns, false, $gutter-type: padding);
+    @include xy-cell-base();
+    @include xy-cell-static($grid-columns, false, $gutter-type: padding);
   }
 
   .cell-block {
-    @include zf-cell-block();
+    @include xy-cell-block();
   }
 
   .cell-block-container {
-    @include zf-cell-block-container();
+    @include xy-cell-block-container();
   }
 
   .grid {
     > .auto {
-      @include zf-cell-base(auto);
-      @include zf-cell-static(auto, false);
+      @include xy-cell-base(auto);
+      @include xy-cell-static(auto, false);
     }
 
     > .shrink {
-      @include zf-cell-base(shrink);
-      @include zf-cell-static(shrink, false);
+      @include xy-cell-base(shrink);
+      @include xy-cell-static(shrink, false);
     }
   }
 
@@ -53,41 +53,41 @@
   @include -zf-each-breakpoint() {
     @if not($-zf-size == small) {
       .grid > .#{$-zf-size}-auto {
-        @include zf-cell-base(auto);
-        @include zf-cell-static(auto, false);
+        @include xy-cell-base(auto);
+        @include xy-cell-static(auto, false);
       }
 
       .grid > .#{$-zf-size}-shrink {
-        @include zf-cell-base(shrink);
-        @include zf-cell-static(shrink, false);
+        @include xy-cell-base(shrink);
+        @include xy-cell-static(shrink, false);
       }
 
       &.#{$-zf-size}-grid-frame {
         width: auto;
-        @include zf-grid-frame(true);
+        @include xy-grid-frame(true);
       }
       .#{$-zf-size}-cell-block {
-        @include zf-cell-block();
+        @include xy-cell-block();
       }
     }
 
     @for $i from 1 through $grid-columns {
       // Sizing (percentage)
       .#{$-zf-size}-#{$i} {
-        @include zf-cell-static($i, false, $gutter-type: padding);
+        @include xy-cell-static($i, false, $gutter-type: padding);
       }
     }
   }
 }
 
-@mixin -zf-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
+@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
   $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
   > .#{$prefix}auto {
-    @include zf-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
   }
 
   > .#{$prefix}shrink {
-    @include zf-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
   }
 
   @for $i from 1 through $grid-columns {
@@ -95,30 +95,30 @@
     $classname: if($vertical, '.#{$class-breakpoint}-vertical-#{$i}', '.#{$class-breakpoint}-#{$i}');
 
     > #{$classname} {
-      @include zf-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+      @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
     }
   }
 }
 
 // Margin Grid classes
-@mixin zf-margin-grid-classes(
+@mixin xy-margin-grid-classes(
   $gutter-position: left right,
   $vertical: false,
   $wrapping-selector: '.margin-gutters'
 ){
   #{$wrapping-selector} {
-    @include zf-gutters($negative: true, $gutter-position: $gutter-position);
+    @include xy-gutters($negative: true, $gutter-position: $gutter-position);
 
     // Base cell styles
     > .cell {
-      @include zf-cell-static($vertical: $vertical);
+      @include xy-cell-static($vertical: $vertical);
     }
 
     // base styles need to all be before the auto and shrink styles
     @include -zf-each-breakpoint() {
       @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {
         > .cell {
-          @include zf-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+          @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
         }
       }
     }
@@ -128,36 +128,36 @@
       // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)
       // for prior breakpoints based on the responsive gutter.
       @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {
-        @each $bp in -zf-breakpoints-less-than($-zf-size) {
+        @each $bp in -xy-breakpoints-less-than($-zf-size) {
           @if(map-has-key($grid-margin-gutters, $bp)) {
-            @include -zf-breakpoint-cell-classes($bp, $-zf-size, $vertical);
+            @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
           }
         }
       }
 
-      @include -zf-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
+      @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
     }
   }
 }
 
 // Padding Grid classes
-@mixin zf-padding-grid-classes {
+@mixin xy-padding-grid-classes {
   .padding-gutters {
 
     // Negative margin for nested grids
     .padding-gutters {
-      @include zf-gutters($negative: true);
+      @include xy-gutters($negative: true);
     }
 
     // Base cell styles
     > .cell {
-      @include zf-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
+      @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
     }
   }
 }
 
 // Block Grid classes
-@mixin zf-block-grid-classes($margin-grid: true, $padding-grid: true) {
+@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
   @if $margin-grid {
     @include -zf-each-breakpoint {
       @for $i from 1 through $block-grid-max {
@@ -167,7 +167,7 @@
           @each $bp in -zf-breakpoints-less-than($-zf-size) {
             @if(map-has-key($grid-margin-gutters, $bp)) {
               .margin-gutters.#{$bp}-up-#{$i} {
-                @include zf-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
+                @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
               }
             }
           }
@@ -175,7 +175,7 @@
       }
       @for $i from 1 through $block-grid-max {
         .margin-gutters.#{$-zf-size}-up-#{$i} {
-          @include zf-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
+          @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
         }
       }
     }
@@ -185,7 +185,7 @@
     @include -zf-each-breakpoint {
       @for $i from 1 through $block-grid-max {
         .padding-gutters.#{$-zf-size}-up-#{$i} {
-          @include zf-grid-layout($i, '.cell', false, $gutter-type: padding);
+          @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
         }
       }
     }
@@ -193,100 +193,100 @@
 }
 
 // Collapse classes
-@mixin zf-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
+@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
   @include -zf-each-breakpoint {
     @if $margin-grid {
       .#{$-zf-size}-margin-collapse {
-        @include zf-grid-collapse($gutter-type: margin);
+        @include xy-grid-collapse($gutter-type: margin);
       }
     }
 
     @if $padding-grid {
       .#{$-zf-size}-padding-collapse {
-        @include zf-grid-collapse($gutter-type: padding);
+        @include xy-grid-collapse($gutter-type: padding);
       }
     }
   }
 }
 
 // Offset classes
-@mixin zf-offset-cell-classes {
+@mixin xy-offset-cell-classes {
   @include -zf-each-breakpoint {
     @for $i from 1 through $grid-columns {
       // Offsets
       $o: $i - 1;
 
       .#{$-zf-size}-offset-#{$o} {
-        @include zf-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+        @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
       }
 
       .margin-gutters > .#{$-zf-size}-offset-#{$o} {
-        @include zf-cell-offset($o, $breakpoint: $-zf-size);
+        @include xy-cell-offset($o, $breakpoint: $-zf-size);
       }
     }
   }
 }
 
 // Vertical Grid classes
-@mixin zf-vertical-grid-classes(
+@mixin xy-vertical-grid-classes(
   $margin-grid: true,
   $padding-grid: true
 ) {
 
   .cell-block-vertical {
-    @include zf-cell-block(true);
+    @include xy-cell-block(true);
   }
 
   @include -zf-each-breakpoint() {
     @if not($-zf-size == small) {
       .#{$-zf-size}-cell-block-vertical {
-        @include zf-cell-block(true);
+        @include xy-cell-block(true);
       }
     }
   }
 
   .grid-vertical {
-    @include zf-grid(vertical);
+    @include xy-grid(vertical);
 
     &.grid-frame {
       width: auto;
-      @include zf-grid-frame(true);
+      @include xy-grid-frame(true);
     }
 
 
     > .cell {
-      @include zf-cell-reset();
+      @include xy-cell-reset();
     }
 
     > .auto {
-      @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+      @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
     }
 
     > .shrink {
-      @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+      @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
     }
 
 
     @include -zf-each-breakpoint() {
       @if not($-zf-size == small) {
         > .#{$-zf-size}-auto {
-          @include zf-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+          @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
         }
 
         > .#{$-zf-size}-shrink {
-          @include zf-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+          @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
         }
 
         &.#{$-zf-size}-grid-frame {
           width: auto;
-          @include zf-grid-frame(true);
+          @include xy-grid-frame(true);
         }
       }
 
       @for $i from 1 through $grid-columns {
         // Sizing (percentage)
         > .#{$-zf-size}-vertical-#{$i} {
-          @include zf-cell-static($i, false, $vertical: true, $gutter-type: padding);
+          @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
         }
       }
     }
@@ -295,24 +295,24 @@
       &.padding-gutters {
         // Negative margin for nested grids
         .padding-gutters {
-          @include zf-gutters($negative: true, $gutter-position: top bottom);
+          @include xy-gutters($negative: true, $gutter-position: top bottom);
         }
 
         // Base cell styles
         > .cell {
-          @include zf-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
+          @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
         }
       }
     }
   }
 
   @if $margin-grid {
-    @include zf-margin-grid-classes(top bottom, true, '.grid-vertical.margin-gutters')
+    @include xy-margin-grid-classes(top bottom, true, '.grid-vertical.margin-gutters')
   }
 }
 
 // Final classes
-@mixin foundation-zf-grid-classes(
+@mixin foundation-xy-grid-classes(
   $base-grid: true,
   $margin-grid: true,
   $padding-grid: true,
@@ -324,36 +324,36 @@
 
   // Base grid styles
   @if($base-grid) {
-    @include zf-base-grid-classes();
+    @include xy-base-grid-classes();
   }
 
   // Margin grid
   @if($margin-grid) {
-    @include zf-margin-grid-classes();
+    @include xy-margin-grid-classes();
   }
 
   // Padding grid
   @if($padding-grid) {
-    @include zf-padding-grid-classes();
+    @include xy-padding-grid-classes();
   }
 
   // Block grid
   @if($block-grid) {
-    @include zf-block-grid-classes($margin-grid, $padding-grid);
+    @include xy-block-grid-classes($margin-grid, $padding-grid);
   }
 
   // Collapse gutters
   @if($collapse) {
-    @include zf-collapse-grid-classes($margin-grid, $padding-grid);
+    @include xy-collapse-grid-classes($margin-grid, $padding-grid);
   }
 
   // Offset gutters
   @if($offset) {
-    @include zf-offset-cell-classes();
+    @include xy-offset-cell-classes();
   }
 
   // Vertical grid
   @if($vertical-grid) {
-    @include zf-vertical-grid-classes($margin-grid, $padding-grid);
+    @include xy-vertical-grid-classes($margin-grid, $padding-grid);
   }
 }
diff --git a/scss/zf-grid/_collapse.scss b/scss/xy-grid/_collapse.scss
similarity index 86%
rename from scss/zf-grid/_collapse.scss
rename to scss/xy-grid/_collapse.scss
index 53a951a23..71a6f9701 100644
--- a/scss/zf-grid/_collapse.scss
+++ b/scss/xy-grid/_collapse.scss
@@ -3,16 +3,15 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
 /// Collapses the grid a cells within it.
 ///
 /// @param {String} $selector [.cell] - The child element to remove the gutter from.
 /// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.
-/// @param {Number|Map} $margin [$grid-margin-gutters] - Map or single value for gutters.
 /// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.
-@mixin zf-grid-collapse(
+@mixin xy-grid-collapse(
   $selector: '.cell',
   $gutter-type: margin,
   $gutter-position: right left
@@ -35,7 +34,7 @@
       @for $i from 1 through $grid-columns {
         // Sizing (percentage)
         > .#{$bp}-#{$i} {
-          @include zf-cell-static($i, $gutter-output: false, $gutter-type: padding);
+          @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);
         }
       }
     }
diff --git a/scss/zf-grid/_grid.scss b/scss/xy-grid/_grid.scss
similarity index 84%
rename from scss/zf-grid/_grid.scss
rename to scss/xy-grid/_grid.scss
index c283b5d5b..da6c249ea 100644
--- a/scss/zf-grid/_grid.scss
+++ b/scss/xy-grid/_grid.scss
@@ -3,13 +3,13 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
 /// Creates a max width container, designed to house your grid content.
 ///
 /// @param {Number} $width [$grid-container] - a width to limit the container to.
-@mixin zf-grid-container(
+@mixin xy-grid-container(
   $width: $grid-container
 ) {
   max-width: rem-calc($width);
@@ -20,7 +20,7 @@
 ///
 /// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.
 /// @param {Boolean} $wrap [true] - If the cells within should wrap or not.
-@mixin zf-grid(
+@mixin xy-grid(
   $direction: horizontal,
   $wrap: true
 ) {
@@ -35,7 +35,8 @@
 /// Modifies a grid to give it "frame" behavior (no overflow, no wrap, stretch behavior)
 ///
 /// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.
-@mixin zf-grid-frame(
+/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.
+@mixin xy-grid-frame(
   $vertical: false,
   $nested: false
 ) {
diff --git a/scss/zf-grid/_gutters.scss b/scss/xy-grid/_gutters.scss
similarity index 93%
rename from scss/zf-grid/_gutters.scss
rename to scss/xy-grid/_gutters.scss
index 16460e6ca..3ab987ea1 100644
--- a/scss/zf-grid/_gutters.scss
+++ b/scss/xy-grid/_gutters.scss
@@ -3,7 +3,7 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
 /// Create gutters for a cell/container.
@@ -11,8 +11,8 @@
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
 /// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.
 /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
-/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nexted grids.
-@mixin zf-gutters(
+/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.
+@mixin xy-gutters(
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
   $gutter-position: right left,
diff --git a/scss/zf-grid/_layout.scss b/scss/xy-grid/_layout.scss
similarity index 80%
rename from scss/zf-grid/_layout.scss
rename to scss/xy-grid/_layout.scss
index 6b5be9895..bd8c14284 100644
--- a/scss/zf-grid/_layout.scss
+++ b/scss/xy-grid/_layout.scss
@@ -3,19 +3,19 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
 /// Sizes child elements so that `$n` number of items appear on each row.
 ///
 /// @param {Number} $n - Number of elements to display per row.
-/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
+/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.
 /// @param {Boolean} $gutter-output [true] - Whether or not to output gutters
 /// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
-/// @param {Keyword} $gutter-type [margin] - Type of margin to output. Accepts `margin` or `padding`.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.
 /// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.
 /// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.
-@mixin zf-grid-layout(
+@mixin xy-grid-layout(
   $n,
   $selector: '.cell',
   $gutter-output: true,
@@ -28,6 +28,6 @@
   $size: percentage(1/$n);
 
   & > #{$selector} {
-    @include zf-cell($size, $gutter-output, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $vertical: $vertical);
+    @include xy-cell($size, $gutter-output, $gutter-type: $gutter-type, $gutter-position: $gutter-position, $vertical: $vertical);
   }
 }
diff --git a/scss/zf-grid/_position.scss b/scss/xy-grid/_position.scss
similarity index 83%
rename from scss/zf-grid/_position.scss
rename to scss/xy-grid/_position.scss
index f9ae5670b..c9c85fffa 100644
--- a/scss/zf-grid/_position.scss
+++ b/scss/xy-grid/_position.scss
@@ -3,14 +3,14 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
 /// Offsets a column to the right/bottom by `$n` columns.
 ///
 /// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.
 /// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.
-@mixin zf-cell-offset(
+@mixin xy-cell-offset(
  $n,
  $gutters: $grid-margin-gutters,
  $gutter-type: margin,
@@ -21,7 +21,7 @@
 
   @include -zf-breakpoint-value($breakpoint, $gutters) {
     $gutter: rem-calc($-zf-bp-value) / 2;
-    $size: if($gutter-type == 'margin', calc(#{zf-cell-size($n)} + #{$gutter}), #{zf-cell-size($n)});
+    $size: if($gutter-type == 'margin', calc(#{xy-cell-size($n)} + #{$gutter}), #{xy-cell-size($n)});
 
     margin-#{$direction}: #{$size};
   }
diff --git a/scss/zf-grid/_zf-grid.scss b/scss/xy-grid/_xy-grid.scss
similarity index 93%
rename from scss/zf-grid/_zf-grid.scss
rename to scss/xy-grid/_xy-grid.scss
index 12f6ef397..c708e9b1f 100644
--- a/scss/zf-grid/_zf-grid.scss
+++ b/scss/xy-grid/_xy-grid.scss
@@ -3,12 +3,12 @@
 // Licensed under MIT Open Source
 
 ////
-/// @group zf-grid
+/// @group xy-grid
 ////
 
-/// Enables the zf-grid.
+/// Enables the XY grid.
 /// @type Boolean
-$zf-grid: true !default;
+$xy-grid: true !default;
 
 /// The maximum width of a grid container.
 /// @type Number
diff --git a/test/visual/zf-grid/block-grid.html b/test/visual/xy-grid/block-grid.html
similarity index 98%
rename from test/visual/zf-grid/block-grid.html
rename to test/visual/xy-grid/block-grid.html
index b6782f386..ffa8054c9 100644
--- a/test/visual/zf-grid/block-grid.html
+++ b/test/visual/xy-grid/block-grid.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>zf block grid</title>
+    <title>xy block grid</title>
     <link href="../assets/css/foundation.css" rel="stylesheet" />
     <style>
       body {
diff --git a/test/visual/zf-grid/collapse.html b/test/visual/xy-grid/collapse.html
similarity index 100%
rename from test/visual/zf-grid/collapse.html
rename to test/visual/xy-grid/collapse.html
diff --git a/test/visual/zf-grid/frame-grid.html b/test/visual/xy-grid/frame-grid.html
similarity index 99%
rename from test/visual/zf-grid/frame-grid.html
rename to test/visual/xy-grid/frame-grid.html
index 9c658fde1..9eae054bb 100644
--- a/test/visual/zf-grid/frame-grid.html
+++ b/test/visual/xy-grid/frame-grid.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>zf margin grid</title>
+    <title>xy frame grid</title>
     <link href="../assets/css/foundation.css" rel="stylesheet" />
     <style>
       body {
diff --git a/test/visual/zf-grid/margin-grid.html b/test/visual/xy-grid/margin-grid.html
similarity index 99%
rename from test/visual/zf-grid/margin-grid.html
rename to test/visual/xy-grid/margin-grid.html
index f5ab444e4..ed5afe7b7 100644
--- a/test/visual/zf-grid/margin-grid.html
+++ b/test/visual/xy-grid/margin-grid.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>zf margin grid</title>
+    <title>xy margin grid</title>
     <link href="../assets/css/foundation.css" rel="stylesheet" />
     <style>
       body {
diff --git a/test/visual/zf-grid/offset.html b/test/visual/xy-grid/offset.html
similarity index 100%
rename from test/visual/zf-grid/offset.html
rename to test/visual/xy-grid/offset.html
diff --git a/test/visual/zf-grid/padding-grid.html b/test/visual/xy-grid/padding-grid.html
similarity index 99%
rename from test/visual/zf-grid/padding-grid.html
rename to test/visual/xy-grid/padding-grid.html
index 0dce82c48..233c339e8 100644
--- a/test/visual/zf-grid/padding-grid.html
+++ b/test/visual/xy-grid/padding-grid.html
@@ -4,7 +4,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>zf padding grid</title>
+    <title>xy padding grid</title>
     <link href="../assets/css/foundation.css" rel="stylesheet" />
     <style>
       body {
diff --git a/test/visual/zf-grid/vertical-grid.html b/test/visual/xy-grid/vertical-grid.html
similarity index 96%
rename from test/visual/zf-grid/vertical-grid.html
rename to test/visual/xy-grid/vertical-grid.html
index d596fd8b9..5106cee96 100644
--- a/test/visual/zf-grid/vertical-grid.html
+++ b/test/visual/xy-grid/vertical-grid.html
@@ -20,13 +20,14 @@
         /*background: dodgerblue;*/
         color: white;
         text-align: center;
-        margin-bottom: 30px;
       }
     </style>
   </head>
   <body>
     <h1>Vertical Grid</h1>
 
+    <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>
@@ -34,6 +35,8 @@
       <div class="cell small-vertical-auto medium-vertical-3 large-vertical-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>
@@ -47,4 +50,4 @@
       $(document).foundation();
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>