foundation-rails 6.5.3.0 → 6.6.1.0

data/vendor/assets/scss/util/_math.scss

@@ -70,3 +70,78 @@
   $h: nth($ratio, 3);
   @return $h / $w * 100%;
 }
+
+/// Parse the given `$fraction` to numerators and denumerators.
+///
+/// @param {*} $fraction - Value representing a fraction to parse. It can be formatted as `50%`, `1 of 2`, `1/2` or `50` (no denominator would be returned).
+///
+/// @return {List} List of parsed values with numerator at first position and denumerator as second. These values may be null.
+@function zf-parse-fraction($fraction) {
+
+  @if type-of($fraction) == 'number' {
+    // "50%"
+    @if unit($fraction) == '%' {
+      @return (strip-unit($fraction), 100);
+    }
+    @else if (unit($fraction) == '') {
+      // "0.5"
+      @if $fraction < 1 {
+        @return ($fraction * 100, 100);
+      }
+      // "50"
+      @else {
+        @return ($fraction, null);
+      }
+    }
+  }
+
+  @else if type-of($fraction) == 'list' {
+    // "50 of 100", "50/100"...
+    @if length($fraction) == 3
+      and type-of(nth($fraction, 1) == 'number')
+      and type-of(nth($fraction, 3) == 'number') {
+      @return (nth($fraction, 1), nth($fraction, 3));
+    }
+  }
+
+  @return (null, null);
+}
+
+/// Returns whether the given `$value` represents a fraction. Supports formats like `50%`, `1 of 2`, `1 per 2` or `1/2`.
+///
+/// @param {*} $value - Value to test.
+/// @param {Boolean} $allow-no-denominator [false] - If `true`, simple numbers without denominators like `50` are supported.
+///
+/// @return {Boolean} `true` if `$value` represents a fraction, `false` otherwise.
+@function zf-is-fraction($value, $allow-no-denominator: false) {
+  $parsed: zf-parse-fraction($value);
+  @return not(nth($parsed, 1) == null
+    or (nth($parsed, 2) == null and $allow-no-denominator == false));
+}
+
+/// Calculate a percentage from a given fraction.
+///
+/// @param {Number|List} $fraction - Value representing a fraction to use to calculate the percentage, formatted as `50` (relative to `$denominator`), `50%`, `1 of 2` or `1/2`.
+/// @param {Number|List} $denominator - Default value to use as denominator when `$fraction` represents an absolute value.
+@function fraction-to-percentage(
+  $fraction,
+  $denominator: null
+) {
+  $parsed: zf-parse-fraction($fraction);
+  $parsed-nominator: nth($parsed, 1);
+  $parsed-denominator: nth($parsed, 2);
+
+  @if $parsed-nominator == null {
+    @error 'Wrong syntax for "fraction-to-percentage()". Use a number, decimal, percentage, or "n of n" / "n/n".';
+  }
+  @if $parsed-denominator == null {
+    @if type-of($denominator) == 'number' {
+      $parsed-denominator: $denominator;
+    }
+    @else {
+      @error 'Error with "fraction-to-percentage()". A default "$denominator" is required to support absolute values';
+    }
+  }
+
+  @return percentage($parsed-nominator / $parsed-denominator);
+}

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

@@ -207,25 +207,36 @@
 /// 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);
-  white-space: nowrap;
-  border: 0;
+///
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible(
+  $enforce: true
+) {
+  $important: if($enforce, '!important', null);
+
+  position: absolute #{$important};
+  width: 1px #{$important};
+  height: 1px #{$important};
+  padding: 0 #{$important};
+  overflow: hidden #{$important};
+  clip: rect(0,0,0,0) #{$important};
+  white-space: nowrap #{$important};
+  border: 0 #{$important};
 }
 
 /// Reverses the CSS output created by the `element-invisible()` mixin.
-@mixin element-invisible-off {
-  position: static !important;
-  width: auto;
-  height: auto;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
+/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties
+@mixin element-invisible-off(
+  $enforce: true
+) {
+  $important: if($enforce, '!important', null);
+
+  position: static #{$important};
+  width: auto #{$important};
+  height: auto #{$important};
+  overflow: visible #{$important};
+  clip: auto #{$important};
+  white-space: normal #{$important};
 }
 
 /// Vertically centers the element inside of its first non-static parent,
@@ -257,22 +268,64 @@
 ///
 /// @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.
 /// @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;
+@mixin -zf-each-breakpoint(
+  $small: true,
+  $auto-insert-breakpoints: true
+) {
+  @include -zf-each-breakpoint-in(auto, -zf-bool($small), -zf-bool($auto-insert-breakpoints)) {
+    @content
+  };
+}
+
+/// Iterates with `@content` through the given list of breakpoints `$breakpoints`.
+///
+/// @access private
+///
+/// @param {Keyword|List} $breakpoints [auto] - Breakpoints to iterates on. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints.
+/// @param {Boolean|Null} $zero-breakpoint [null] - Whether the zero-breakpoint (often `small`) must be included. If `true`, it will always be added to the list if not already there. If `false`, it will always be removed. Does nothing by default.
+/// @param {Boolean|Keyword} $media-queries [true] - Whether media-queries must be generated. If `for-lists`, only generate media-queries when `$breakpoints` is a list.
+@mixin -zf-each-breakpoint-in(
+  $breakpoints: auto,
+  $zero-breakpoint: null,
+  $media-queries: true
+) {
+  $-list: ();
+  $-breakpoints-is-a-list: true;
 
-  @if not $small {
-    $list: sl-remove($list, $-zf-zero-breakpoint);
+  // Retrieve the list of breakpoint(s) to iterate on.
+  @if $breakpoints == auto {
+    $-list: $breakpoint-classes;
+  }
+  @else if type-of($breakpoints) == 'list' {
+    $-list: $breakpoints;
+  }
+  @else if type-of($breakpoints) == 'string' {
+    $-list: ($breakpoints);
+    $-breakpoints-is-a-list: false;
+  }
+  @else {
+    @error 'Wrong syntax for "$breakpoints" in "-zf-each-breakpoint-in()". Got "#{$breakpoints}" (#{type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or "auto"';
   }
 
-  @each $name in $list {
+  // Add or remove the zero breakpoint according to `$zero-breakpoint`
+  @if $zero-breakpoint == true {
+    $-list: join(($-zf-zero-breakpoint), sl-remove($-list, $-zf-zero-breakpoint));
+  }
+  @else if $zero-breakpoint == false {
+    $-list: sl-remove($-list, $-zf-zero-breakpoint);
+  }
+
+  // Iterate on breakpoint(s)
+  @each $bp in $-list {
     $old-zf-size: null;
     @if global-variable-exists(-zf-size) {
       $old-zf-size: $-zf-size;
     }
-    $-zf-size: $name !global;
+    $-zf-size: $bp !global;
 
-    @if $auto-insert-breakpoints {
-      @include breakpoint($name) {
+    @if ($media-queries == true
+      or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) {
+      @include breakpoint($bp) {
         @content;
       }
     }
@@ -307,7 +360,10 @@
   @else {
     // breakpoint name
     @if type-of($name) == 'string' {
-      $name: -zf-get-bp-val($map, $name);
+      $bp-value: -zf-get-bp-val($map, $name);
+      @if $bp-value != null {
+        $name: $bp-value;
+      }
     }
 
     // breakpoint value

data/vendor/assets/scss/util/_value.scss

@@ -139,6 +139,35 @@
 
 }
 
+/// Return a join of the two given strings `$str1` and `$str2`.
+/// If the two strings are not empty, they are separated by `$delimiter`.
+///
+/// @param {String} $str1 [null] - First string to join.
+/// @param {String} $str1 [null] - Second string to join.
+/// @param {String} $delimiter [null] - Delimieter between `$str1` and `$str2`.
+///
+/// @returns {String} Join of `$str1`, `$delimiter` and `$str2`.
+@function zf-str-join(
+  $str1: null,
+  $str2: null,
+  $delimiter: null
+) {
+  $ret: '';
+
+  @if $str1 and str-length($str1) > 0 {
+    $ret: $ret + $str1;
+
+    @if $delimiter and str-length($delimiter) > 0 and $str2 and str-length($str2) > 0 {
+      $ret: $ret + $delimiter;
+    }
+  }
+  @if $str2 and str-length($str2) > 0 {
+    $ret: $ret + $str2;
+  }
+
+  @return $ret;
+}
+
 /// Safely return a value from a map.
 ///
 /// @param {Map} $map - Map to retrieve a value from.
@@ -158,3 +187,14 @@
     @error '`#{$map}` is not a valid map';
   }
 }
+
+/// Convert the given `$val` to a Boolean. Empty values are considered as false.
+////
+/// @access private
+///
+/// @param {*} $val - Value to convert.
+///
+/// @returns {Boolean} Converted Boolean value.
+@function -zf-bool($val) {
+  @return $val != false and has-value($val);
+}

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

@@ -6,154 +6,245 @@
 /// @group xy-grid
 ////
 
-/// Calculate the percentage size of a cell.
+/// Returns the appropriate CSS flex value for a cell base.
+///
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
+///
+/// @returns {List} The cell flex property value.
+@function xy-cell-base($size: full) {
+  @if ($size == 'auto') {
+    @return 1 1 0px;
+  }
+  @else if ($size == 'grow') {
+    @return 1 0 auto;
+  }
+  @else if ($size == 'shrink' or $size == 'full' or zf-is-fraction($size, $allow-no-denominator: true)) {
+    @return 0 0 auto;
+  }
+  @return null;
+}
+
+/// Calculate the size of a cell gutters.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - 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 `auto`, returns the responsive gutters map `$gutters`. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|Map} The cell gutter size or the responsive gutters map.
+@function xy-cell-gutters(
+  $gutters: $grid-margin-gutters,
+  $breakpoint: null
+) {
+  // For `auto`, returns the responsive map `$gutters`.
+  @if ($breakpoint == 'auto') {
+    @return $gutters;
+  }
+
+  // Use the contextual breakpoint by default.
+  $breakpoint: -zf-current-breakpoint($breakpoint);
+
+  @if ($breakpoint) {
+    @return -zf-get-bp-val($gutters, $breakpoint);
+  }
+  @else {
+    @return -zf-get-bp-val($gutters, $-zf-zero-breakpoint) or 0;
+  }
+}
+
+/// Returns 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`.
+///
+/// @returns {Number} Size of the cell (in percent).
 @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);
-    }
+  @return fraction-to-percentage($size, $denominator: $grid-columns);
+}
+
+/// Returns the appropriate CSS value for a cell size.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full`, `auto`, `shrink` or any fraction like `6`, `50%`, `1 of 2` or `1/2`.
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns a map of sizes adapted to responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+///
+/// @returns {Number|String|Map} The cell sizing property value, or a responsive map of them.
+@function xy-cell-size-css(
+  $size: full,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $breakpoint: null
+) {
+  $margin-gutter: 0;
+
+  @if ($size == 'auto' or $size == 'shrink') {
+    @return auto;
   }
 
-  // Parsing "n of n" or "n/n" expressions
-  @else if type-of($size) == 'list' {
-    @if length($size) != 3 {
-      @error 'Wrong syntax for xy-cell-size(). Use the format "n of n" or "n/n".';
+  // For cells with margin gutters, the gutter is included in the width.
+  @if ($gutter-type == 'margin') {
+    $margin-gutter: xy-cell-gutters($gutters, $breakpoint);
+    @if ($margin-gutter == null) {
+      @error 'xy-cell-size: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
     }
-    @else {
-      $size: percentage(nth($size, 1) / nth($size, 3));
+  }
+
+  // Calculate the cell size (number)
+  $size-raw: if($size == 'full', 100%, xy-cell-size($size));
+
+  // Calculate the cell CSS size including gutters (string)
+  // If the cell has responsive margin gutters, return a responsive map of sizes.
+  @if type-of($margin-gutter) == 'map' {
+    $responsive-css-sizes: ();
+
+    @each $bp, $mg in $margin-gutter {
+      $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($mg)}));
+      $responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));
     }
+
+    @return $responsive-css-sizes;
   }
-  // Anything else is incorrect
+  // Otherwise, return a single CSS size.
   @else {
-    @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or "n of n" / "n/n".';
+    $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{rem-calc($margin-gutter)}));
+    @return $css-size;
   }
-
-  @return $size;
 }
 
 /// Sets base flex properties for cells.
 ///
-/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.
+/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).
 @mixin xy-cell-base($size: full) {
+  $base: xy-cell-base($size);
+
+  flex: #{$base};
+
+  // Set base styles for "full" only
   @if($size == 'full') {
-    // This is the base style, all others inherit from it
-    flex: 0 0 auto;
     min-height: 0px;
     min-width: 0px;
   }
-  @else if ($size == 'auto') {
-    flex: 1 1 0px; // sass-lint:disable-line zero-unit
-  }
-  @else if ($size == 'shrink') {
-    flex: 0 0 auto;
-  }
-  @else if ($size == 'grow') {
-    flex: 1 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: if($vertical == true, height, width);
   #{$direction}: auto;
   max-#{$direction}: none;
 }
 
-// Sets our cell widths or heights depending on gutter type.
-@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {
+/// Sets sizing properties for cells.
+///
+/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates sizes adapted for responsive gutters. 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(
+  $size: full,
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $breakpoint: null,
+  $vertical: false
+) {
+  $sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);
   $direction: if($vertical == true, height, width);
-  @if($size == 'full') {
-    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
-    #{$direction}: $val;
+
+  @if (type-of($sizes) == 'map') {
+    @include -zf-breakpoint-value(auto, $sizes) {
+      #{$direction}: $-zf-bp-value;
+    }
   }
-  @else if ($size == 'auto') {
-    #{$direction}: auto;
-    $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));
+  @else {
+    #{$direction}: $sizes;
   }
-  @else if ($size == 'shrink') {
-    #{$direction}: auto;
+}
+
+/// Sets gutters properties for cells.
+///
+/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.
+/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.
+/// @param {Boolean} $vertical [false] - Direction of the gutters to output. See `$gutter-position`.
+@mixin xy-cell-gutters(
+  $gutters: $grid-margin-gutters,
+  $gutter-type: margin,
+  $gutter-position: null,
+  $breakpoint: null,
+  $vertical: false
+) {
+  // Get the default gutter position according to cell direction
+  @if($gutter-position == null) {
+    $gutter-position: if($vertical == true, top bottom, left right);
   }
-  @else {
-    $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));
-    #{$direction}: $val;
+
+  // Get the gutter width for this breakpoint
+  $gutter-width: xy-cell-gutters($gutters, $breakpoint);
+  @if ($gutter-width == null) {
+    @error 'xy-cell-gutters: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}"';
+  }
+
+  @if ($gutter-type and $gutter-type != none) {
+    @include xy-gutters($gutter-width, $gutter-type, $gutter-position);
   }
 }
 
 /// 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 {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Boolean} $gutter-output [null] - [DEPRECATED] 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 {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.
+/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.
+/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. 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.
+/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work properly otherwise.
 @mixin xy-cell(
   $size: full,
-  $gutter-output: true,
+  $gutter-output: null,
   $gutters: $grid-margin-gutters,
   $gutter-type: margin,
-  $gutter-position: right left,
+  $gutter-position: null,
   $breakpoint: null,
-  $vertical: false
+  $vertical: false,
+  $output: (base size gutters)
 ) {
-  $bp-is-fallback: 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') and $-zf-size != null {
-      $breakpoint: $-zf-size;
-    }
-    @else {
-      $breakpoint: $-zf-zero-breakpoint;
-      $bp-is-fallback: true;
+  // Default for $gutter-output
+  @if ($gutter-output != null) {
+    @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';
+    @if ($gutter-output == false) {
+      $output: sl-remove($output, gutters);
     }
   }
 
-  // Get the gutter for the given breakpoint/value.
-  $gutter: -zf-get-bp-val($gutters, $breakpoint);
-  // If the breakpoint is a fallback, use a fallback gutter as well
-  @if ($bp-is-fallback == true and $gutter == null) {
-    $gutter: 0;
-  }
-
-  @if($gutter != null) {
-    // Base flex properties
+  @if (index($output, base)) {
     @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 {
-      @include xy-gutters($gutter, $gutter-type, $gutter-position);
-    }
   }
-  @else {
-    @warn 'xy-cell: no gutters were found in `$gutters` for "$breakpoint: #{$breakpoint}", cell was not generated`'
+  @if (index($output, size)) {
+    @include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);
+  }
+  @if (index($output, gutters)) {
+    @include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);
   }
 }
 
 /// 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
+/// `xy-cell-static()` is deprecated and will be removed.
+/// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.
+/// See migration notes at https://git.io/foundation-6-6-0
+///
+/// @deprecated v6.6.0
+///
+/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).
+/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin 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.
@@ -166,20 +257,16 @@
   $breakpoint: $-zf-zero-breakpoint,
   $vertical: false
 ) {
+  @warn 'xy-cell-static() mixin is deprecated and will be removed. Use "xy-cell()" instead. See migration notes at https://git.io/foundation-6-6-0';
 
   $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);
-  }
+  $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);
+  $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);
 
-  // If we want to output the gutters
-  @if($gutter-output) {
-    // TODO: Figure out if we need to pass breakpoint in here too.
+  @include -xy-cell-properties($size, $-gutter-margin, $vertical);
+  @if ($-gutter-output) {
     @include xy-gutters($gutter, $gutter-type, $gutter-position);
   }
 }