foundation-rails 6.3.1.0 → 6.4.1.0

data/vendor/assets/scss/typography/_base.scss

@@ -469,10 +469,10 @@ $abbr-underline: 1px dotted $black !default;
   }
 
   // Abbreviations
-  abbr {
+  abbr, abbr[title] {
     border-bottom: $abbr-underline;
-    color: $body-font-color;
     cursor: help;
+    text-decoration: none;
   }
 
   // Figures

data/vendor/assets/scss/typography/_helpers.scss

@@ -70,9 +70,11 @@ $stat-font-size: 2.5rem !default;
     }
   }
 
-  // Use to remove the bullets from an unordered list
-  .no-bullet {
-    margin-#{$global-left}: 0;
-    list-style: none;
+  ul, ol {
+    // Use to remove numbers from ordered list & bullets from unordered list
+    &.no-bullet {
+      margin-#{$global-left}: 0;
+      list-style: none;
+    }
   }
 }

data/vendor/assets/scss/util/_breakpoint.scss

@@ -144,6 +144,10 @@ $breakpoint-classes: (small medium large) !default;
   $bp: index($-zf-breakpoints-keys, $value);
   $pbp: index($-zf-breakpoints-keys, $print-breakpoint);
 
+  // Make breakpoint size available as a variable
+  $old-zf-size: $-zf-zero-breakpoint;
+  $-zf-size: nth($value, 1) !global; // get the first value to account for `only` and `down` keywords
+
   // If $str is still an empty string, no media query is needed
   @if $str == '' {
     @content;
@@ -163,6 +167,9 @@ $breakpoint-classes: (small medium large) !default;
       }
     }
   }
+
+  // Restore the old breakpoint size
+  $-zf-size: $old-zf-size !global;
 }
 
 /// Convers the breakpoints map to a URL-encoded string, like this: `key1=value1&key2=value2`. The value is then dropped into the CSS for a special `<meta>` tag, which is read by the Foundation JavaScript. This is how we transfer values from Sass to JavaScript, so they can be defined in one place.
@@ -211,6 +218,53 @@ $breakpoint-classes: (small medium large) !default;
 
 }
 
+/// Return a list of our named breakpoints less than $key. Useful for dealing with
+/// responsive gutters for the grid.
+/// @access private
+///
+/// @param {String} $key - Key to use as last breakpoint.
+///
+/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
+@function -zf-breakpoints-less-than($key) {
+  $list: ();
+  $found_key: false;
+
+  @each $name in $-zf-breakpoints-keys {
+    @if ($name == $key) {
+      $found_key: true;
+    }
+    @if not $found_key {
+      $list: append($list, $name);
+    }
+  }
+  @return $list;
+}
+
+/// Return a list of our named breakpoints less than $key. Useful for dealing with
+/// responsive gutters for the grid.
+/// @access private
+///
+/// @param {String} $breakpoing - a named or non-named breakpoing.
+///
+/// @returns {Array} The list of breakpoints up to and. If $key is auto, returns breakpoints above the zero
+@function -zf-closest-named-breakpoint($breakpoint) {
+  $last: $-zf-zero-breakpoint;
+  $found: false;
+
+  $value: unitless-calc($breakpoint, 1px);
+  @each $key, $val in $breakpoints {
+    @if not $found {
+      @if unitless-calc($val) > $value {
+        $found: true;
+      } @else {
+        $last: $key;
+      }
+    }
+  }
+
+  @return $last;
+}
+
 /// Get a value for a breakpoint from a responsive config map or single value.
 /// - If the config is a single value, return it regardless of `$value`.
 /// - If the config is a map and has the key `$value`, the exact breakpoint value is returned.
@@ -227,9 +281,14 @@ $breakpoint-classes: (small medium large) !default;
     @return $map;
   }
 
+
   // Check if the breakpoint name exists globally
   @if not map-has-key($breakpoints, $value) {
-    @return null;
+    @if type-of($value) == 'number' {
+      $value: -zf-closest-named-breakpoint($value);
+    } @else {
+      @return null;
+    }
   }
   // Check if the breakpoint name exists in the local config map
   @else if map-has-key($map, $value) {

data/vendor/assets/scss/util/_color.scss

@@ -4,6 +4,8 @@
 
 @import 'math';
 
+$contrast-warnings: true !default;
+
 ////
 /// @group functions
 ////
@@ -55,11 +57,12 @@
 
 /// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
 ///
-/// @param {Color} $color1 - First color to compare.
-/// @param {Color} $color2 - Second color to compare.
+/// @param {Color} $base - Color to check luminance.
+/// @param {List} $colors [($white, $black)] - Colors to compare.
+/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.
 ///
-/// @returns {Number} The contrast ratio of the compared colors.
-@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: 0) {
+/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.
+@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {
   $contrast: color-contrast($base, nth($colors, 1));
   $best: nth($colors, 1);
 
@@ -71,7 +74,7 @@
     }
   }
 
-  @if ($contrast < 3) {
+  @if ($contrast-warnings and $contrast < 3) {
     @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
   }
 

data/vendor/assets/scss/util/_mixins.scss

@@ -6,6 +6,33 @@
 /// @group functions
 ////
 
+/// Creates an inner box-shadow for only one side
+/// 
+/// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.
+/// @param {Number} $size - Width for the target side.
+/// @param {Color} $color - Color of the shadow.
+@mixin inner-side-shadow(
+  $side: bottom,
+  $size: 20px,
+  $color: rgba($black, 0.25)
+) {
+
+  $helper: round($size * 0.65);
+
+  @if ($side == top) {
+    box-shadow: inset 0 $helper $size (-1)*$helper $color;
+  }
+  @elseif ($side == left) {
+    box-shadow: inset $helper 0 $size (-1)*$helper $color;
+  }
+  @elseif ($side == right) {
+    box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;
+  }
+  @elseif ($side == bottom) {
+    box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;
+  }
+}
+
 /// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.
 ///
 /// @param {Number} $triangle-size - Width of the triangle.
@@ -99,7 +126,7 @@
     background: $color;
     box-shadow: $shadow;
 
-    content: '';    
+    content: '';
   }
 
   // Hover state
@@ -182,12 +209,17 @@
 
 /// Makes an element visually hidden, but still accessible to keyboards and assistive devices.
 /// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility
+/// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 @mixin element-invisible {
   position: absolute !important;
   width: 1px;
   height: 1px;
+  padding: 0;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
 }
 
 /// Reverses the CSS output created by the `element-invisible()` mixin.
@@ -197,6 +229,8 @@
   height: auto;
   overflow: visible;
   clip: auto;
+  white-space: normal;
+  clip-path: none;
 }
 
 /// Vertically centers the element inside of its first non-static parent,
@@ -227,7 +261,8 @@
 /// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
 ///
 /// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
-@mixin -zf-each-breakpoint($small: true) {
+/// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.
+@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
   $list: $breakpoint-classes;
 
   @if not $small {
@@ -237,7 +272,12 @@
   @each $name in $list {
     $-zf-size: $name !global;
 
-    @include breakpoint($name) {
+    @if $auto-insert-breakpoints {
+      @include breakpoint($name) {
+        @content;
+      }
+    }
+    @else {
       @content;
     }
   }
@@ -247,7 +287,7 @@
 /// - For a single value, `$-zf-bp-value` is this value.
 /// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.
 /// - For "auto", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.
-/// @param {Number|Keyword} $name [auto] - Single value or breakpoint name to use. "auto" by default.
+/// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. "auto" by default.
 /// @param {Number|Map} $map - Map of breakpoints and values or single value to use.
 @mixin -zf-breakpoint-value(
   $name: auto,

data/vendor/assets/scss/xy-grid/_cell.scss

@@ -0,0 +1,179 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @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 xy-cell-size(
+  $size: $grid-columns
+) {
+  // Parsing percents, decimals, n of n and number counts
+  @if type-of($size) == 'number' {
+    @if unit($size) == '%' {
+      $size: $size;
+    }
+    @else if $size < 1 {
+      $size: percentage($size);
+    }
+    @else {
+      $size: percentage($size / $grid-columns);
+    }
+  }
+
+  // Parsing "n of n" or "n/n" expressions
+  @elseif type-of($size) == 'list' {
+    @if length($size) != 3 {
+      @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));
+    }
+  }
+  // Anything else is incorrect
+  @else {
+    @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+  }
+
+  @return $size;
+}
+
+/// 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) {
+  @if($size == 'full') {
+    // This is the base style, all others inherit from it
+    flex: 0 0 auto;
+    min-height: 0px;
+    min-width: 0px;
+  }
+  @elseif ($size == 'auto') {
+    flex: 1 1 0px; // sass-lint:disable-line zero-unit
+  }
+  @elseif ($size == 'shrink') {
+    flex: 0 0 auto;
+  }
+}
+
+/// 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);
+  #{$direction}: auto;
+}
+
+// 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)}));
+    #{$direction}: $val;
+  }
+  @elseif ($size == 'auto') {
+    #{$direction}: auto;
+    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+  }
+  @elseif ($size == 'shrink') {
+    #{$direction}: auto;
+  }
+  @else {
+    $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.
+/// @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 {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 xy-cell(
+  $size: full,
+  $gutter-output: true,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: right left,
+  $breakpoint: null,
+  $vertical: false
+) {
+  @if($breakpoint == null) {
+    // If `$bp-size` is available then use this, otherwise revert to the smallest bp.
+    @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') {
+      $breakpoint: $-zf-size;
+    }
+    @else {
+      $breakpoint: $-zf-zero-breakpoint;
+    }
+  }
+
+  // Get our gutters from map if available, if not map just return the value.
+  $gutter: -zf-get-bp-val($gutters, $breakpoint);
+
+  // Base flex properties
+  @include xy-cell-base($size);
+
+  @if($gutter-type == 'margin') {
+    @include -xy-cell-properties($size, $gutter, $vertical);
+  }
+  @else {
+    @include -xy-cell-properties($size, 0, $vertical);
+  }
+
+  @if $gutter-output {
+    // If gutters = map
+    @if(type-of($gutters) == 'map') {
+      // If $gutters map has a key = $breakpoint, output the value
+      @if (map-has-key($gutters, $breakpoint)) {
+        @include xy-gutters($gutter, $gutter-type, $gutter-position);
+      }
+    }
+    // If not a map
+    @else {
+      @include xy-gutters($gutter, $gutter-type, $gutter-position);
+    }
+  }
+}
+
+/// 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,
+  $gutter-type: margin,
+  $breakpoint: $-zf-zero-breakpoint,
+  $vertical: false
+) {
+
+  $gutter: -zf-get-bp-val($gutters, $breakpoint);
+  $gutter-position: if($vertical == true, top bottom, left right);
+
+  @if($gutter-type == 'margin') {
+    @include -xy-cell-properties($size, $gutter, $vertical);
+  }
+  @else {
+    @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 xy-gutters($gutter, $gutter-type, $gutter-position);
+  }
+}

data/vendor/assets/scss/xy-grid/_classes.scss

@@ -0,0 +1,455 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group xy-grid
+////
+
+// Margin Grid classes
+@mixin xy-base-grid-classes {
+
+  // Grid Container
+  .grid-container {
+    @include xy-grid-container;
+  }
+
+  .grid-container-padded {
+    @include xy-grid-container-padding;
+  }
+
+  // Base grid styles
+  .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-x {
+    > .auto {
+      @include xy-cell-static(auto, false);
+    }
+
+    > .shrink {
+      @include xy-cell-static(shrink, false);
+    }
+  }
+
+  // Auto width
+  @include -zf-each-breakpoint() {
+    // This is a bit of a hack/workaround, see these issues & PRs for the backstory:
+    // https://github.com/zurb/foundation-sites/issues/10244
+    // https://github.com/zurb/foundation-sites/pull/10222 and
+    // https://github.com/zurb/foundation-sites/pull/10164
+    .grid-x {
+      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      @for $i from 1 through $grid-columns {
+        $str: $str + ", > #{$-zf-size}-#{$i}"
+      }
+      #{$str} {
+        flex-basis: auto;
+      }
+    }
+  }
+
+  @include -zf-each-breakpoint() {
+    @if not($-zf-size == small) {
+      .grid-x > .#{$-zf-size}-auto {
+        @include xy-cell-base(auto);
+        @include xy-cell-static(auto, false);
+      }
+
+      .grid-x > .#{$-zf-size}-shrink {
+        @include xy-cell-base(shrink);
+        @include xy-cell-static(shrink, false);
+      }
+    }
+
+    @for $i from 1 through $grid-columns {
+      // Sizing (percentage)
+      .grid-x > .#{$-zf-size}-#{$i} {
+        @include xy-cell-static($i, false, $gutter-type: padding);
+      }
+    }
+  }
+
+  // Reset width when using `.grid-margin-x` not on `.grid-x`
+  .grid-margin-x:not(.grid-x) > .cell {
+    width: auto;
+  }
+
+  // Reset height when using `.grid-margin-y` not on `.grid-y`
+  .grid-margin-y:not(.grid-y) > .cell {
+    height: auto;
+  }
+}
+
+@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {
+  $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');
+  > .#{$prefix}auto {
+    @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+  }
+
+  > .#{$prefix}shrink {
+    @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+  }
+
+  @for $i from 1 through $grid-columns {
+    // Sizing (percentage)
+    $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');
+
+    > #{$classname} {
+      @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);
+    }
+  }
+}
+
+// Margin Grid classes
+@mixin xy-margin-grid-classes(
+  $gutter-position: left right,
+  $vertical: false,
+  $wrapping-selector: '.grid-margin-x'
+){
+  #{$wrapping-selector} {
+    @include xy-gutters($negative: true, $gutter-position: $gutter-position);
+
+    // Base cell styles
+    > .cell {
+      @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 xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);
+        }
+      }
+    }
+
+    @include -zf-each-breakpoint() {
+
+      // 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) {
+          @if(map-has-key($grid-margin-gutters, $bp)) {
+            @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);
+          }
+        }
+      }
+
+      @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);
+    }
+  }
+}
+
+// Padding Grid classes
+@mixin xy-padding-grid-classes {
+  .grid-padding-x {
+
+    // Negative margin for nested grids
+    .grid-padding-x {
+      @include xy-gutters($negative: true);
+    }
+
+    // Base cell styles
+    > .cell {
+      @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);
+    }
+  }
+}
+
+// Block Grid classes
+@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {
+  @if $padding-grid {
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $block-grid-max {
+        .#{$-zf-size}-up-#{$i} {
+          @include xy-grid-layout($i, '.cell', false, $gutter-type: padding);
+        }
+      }
+    }
+  }
+
+  @if $margin-grid {
+    @include -zf-each-breakpoint {
+      @for $i from 1 through $block-grid-max {
+        // 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) {
+            @if(map-has-key($grid-margin-gutters, $bp)) {
+              .grid-margin-x.#{$bp}-up-#{$i} {
+                @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $bp);
+              }
+            }
+          }
+        }
+      }
+      @for $i from 1 through $block-grid-max {
+        .grid-margin-x.#{$-zf-size}-up-#{$i} {
+          @include xy-grid-layout($i, '.cell', false, $gutter-type: margin, $breakpoint: $-zf-size);
+        }
+      }
+    }
+  }
+}
+
+// Collapse classes
+@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {
+  @include -zf-each-breakpoint {
+    @if $margin-grid {
+      .#{$-zf-size}-margin-collapse {
+        @include xy-grid-collapse($gutter-type: margin);
+      }
+    }
+
+    @if $padding-grid {
+      .#{$-zf-size}-padding-collapse {
+        @include xy-grid-collapse($gutter-type: padding);
+      }
+    }
+  }
+}
+
+// Offset 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 xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);
+      }
+
+      .grid-margin-x > .#{$-zf-size}-offset-#{$o} {
+        @include xy-cell-offset($o, $breakpoint: $-zf-size);
+      }
+    }
+  }
+}
+
+// Vertical Grid classes
+@mixin xy-vertical-grid-classes(
+  $margin-grid: true,
+  $padding-grid: true
+) {
+
+  @include -zf-each-breakpoint() {
+    @if not($-zf-size == small) {
+    }
+  }
+
+  .grid-y {
+    @include xy-grid(vertical, false);
+
+
+    > .cell {
+      @include xy-cell-reset();
+    }
+
+    > .auto {
+      @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+    }
+
+    > .shrink {
+      @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+    }
+
+
+    @include -zf-each-breakpoint() {
+      // This is a bit of a hack/workaround, see these issues and PRs for the backstory:
+      // https://github.com/zurb/foundation-sites/issues/10244
+      // https://github.com/zurb/foundation-sites/pull/10222 and
+      // https://github.com/zurb/foundation-sites/pull/10164
+      $str: "> #{$-zf-size}-shrink, > #{$-zf-size}-full";
+      @for $i from 1 through $grid-columns {
+        $str: $str + ", > #{$-zf-size}-#{$i}"
+      }
+      #{$str} {
+        flex-basis: auto;
+      }
+    }
+
+    @include -zf-each-breakpoint() {
+      @if not($-zf-size == small) {
+        > .#{$-zf-size}-auto {
+          @include xy-cell-base(auto);
+          @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);
+        }
+
+        > .#{$-zf-size}-shrink {
+          @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);
+        }
+
+      }
+
+      @for $i from 1 through $grid-columns {
+        // Sizing (percentage)
+        > .#{$-zf-size}-#{$i} {
+          @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);
+        }
+      }
+
+    }
+  }
+
+  @if $padding-grid {
+    .grid-padding-y {
+      // Negative margin for nested grids
+      .grid-padding-y {
+        @include xy-gutters($negative: true, $gutter-position: top bottom);
+      }
+
+      // Base cell styles
+      > .cell {
+        @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);
+      }
+    }
+  }
+
+  @if $margin-grid {
+    @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y')
+  }
+}
+
+@mixin xy-frame-grid-classes($vertical-grid: true) {
+  // Framed grid styles
+  .grid-frame {
+    @include xy-grid-frame;
+  }
+
+  .cell .grid-frame {
+    width: 100%; // Same as include with $nested, but with less css
+  }
+
+  .cell-block {
+    @include xy-cell-block();
+  }
+
+  .cell-block-y {
+    @include xy-cell-block(true);
+  }
+
+
+  .cell-block-container {
+    @include xy-cell-block-container();
+  }
+
+
+  @include -zf-each-breakpoint(false) {
+
+    .#{$-zf-size}-grid-frame {
+      @include xy-grid-frame;
+    }
+
+    .cell .#{$-zf-size}-grid-frame {
+      width: 100%; // Same as include with $nested, but with less css
+    }
+
+    .#{$-zf-size}-cell-block {
+      @include xy-cell-block();
+    }
+
+    .#{$-zf-size}-cell-block-container {
+      @include xy-cell-block-container();
+    }
+
+    .#{$-zf-size}-cell-block-y {
+      @include xy-cell-block(true);
+    }
+  }
+
+  @if $vertical-grid {
+
+    .grid-y {
+      &.grid-frame {
+        width: auto;
+        @include xy-grid-frame(true);
+      }
+
+      @include -zf-each-breakpoint(false) {
+        &.#{$-zf-size}-grid-frame {
+          width: auto;
+          @include xy-grid-frame(true);
+        }
+
+      }
+    }
+    .cell {
+      .grid-y.grid-frame {
+        height: 100%; // Same as include with $nested, but with less css
+      }
+      @include -zf-each-breakpoint(false) {
+        .grid-y.#{$-zf-size}-grid-frame {
+          height: 100%; // Same as include with $nested, but with less css
+        }
+      }
+    }
+  }
+}
+
+// Final classes
+@mixin foundation-xy-grid-classes(
+  $base-grid: true,
+  $margin-grid: true,
+  $padding-grid: true,
+  $block-grid: true,
+  $collapse: true,
+  $offset: true,
+  $vertical-grid: true,
+  $frame-grid: true
+) {
+
+  // Base grid styles
+  @if($base-grid) {
+    @include xy-base-grid-classes();
+  }
+
+  // Margin grid
+  @if($margin-grid) {
+    @include xy-margin-grid-classes();
+  }
+
+  // Padding grid
+  @if($padding-grid) {
+    @include xy-padding-grid-classes();
+  }
+
+  // Block grid
+  @if($block-grid) {
+    @include xy-block-grid-classes($margin-grid, $padding-grid);
+  }
+
+  // Collapse gutters
+  @if($collapse) {
+    @include xy-collapse-grid-classes($margin-grid, $padding-grid);
+  }
+
+  // Offset gutters
+  @if($offset) {
+    @include xy-offset-cell-classes();
+  }
+
+  // Vertical grid
+  @if($vertical-grid) {
+    @include xy-vertical-grid-classes($margin-grid, $padding-grid);
+  }
+
+  @if ($frame-grid) {
+    @include xy-frame-grid-classes($vertical-grid)
+  }
+}