Foundation-sites: Custom Breakpoint breaks XY Grid

[mightym]

How to reproduce this bug:

1. Step one
   Add a custom breakpoint to the settings:

$breakpoints: (
  xsmall: 0,
  small: 330px,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

1. Step two
   Use a cell mixin to create a a cell:

  @include xy-cell(4);

What should happen:

Output should be something like:

width: calc(33.33333% - 1.25rem);

What happened instead:

width: calc(33.33333% - );

Browser(s) and Device(s) tested on:

Safari 11.03, Chrome 65.0.3325.181

Foundation Version(s) you are using:

"foundation-sites": "^6.4.4-rc1",

[ncoden]

Hi @mightym, thank you for the issue.

See https://github.com/zurb/foundation-sites/pull/10821 - fix: do not generate invalid xy-cell when breakpoint is not found (@ncoden). With the future Foundation version, no cell is generated.

WARNING: xy-cell: no gutters were found in `$gutters` for "$breakpoint: xsmall", cell was not generated`

This error happens because xy-cell will create a cell for the smallest breakpoint (xsmall), but no gutter is defined for that breakpoint.

I would recommend you to add xsmall in the $grid-margin-gutters config:

$grid-margin-gutters: (
  xsmall: 20px, // instead of `small`
  medium: 30px
);

We can try to improve the search for a gutter in xy-cell by, when no breakpoint is set, using the smallest gutter defined instead of using the gutter for the smallest breakpoint.

[mightym]

@ncoden ah! that makes sense. Sorry, wasn't aware about that. Thanks for the hint!

[ncoden]

We can try to improve the search for a gutter in xy-cell by, when no breakpoint is set, using the smallest gutter defined instead of using the gutter for the smallest breakpoint.

Actually it would be unexpected for a gutter set to small to be used for an _lower_ breakpoint like xsmall. We should rather use a "default zero-breakpoint gutter value" like 0.

[mightym]

That would be what I'd have expected. Like when you don't specify one on your own it defaults to 0