Cannot implement an xsmall breakpoint v6.4.1

[rykener]

I am unable to add an xsmall breakpoint to the list of breakpoints. Anything other than small: 0 seems to fail.

Seems related to issue 10015

How to reproduce this bug:

make your breakpoint settings like this

$breakpoint-classes: (xsmall, small, medium, large, xlarge, xxlarge);
$breakpoints: (
  xsmall: 0,
  small: 360px,
  medium: 480px,
  large: 600px,
  xlarge: 840px,
  xxlarge: 1280px
);

What should happen:

I should have an xsmall breakpoint as the lowest breakpoint

What happened instead:

WARNING: null was passed to rem-calc(), which is not a number.
Backtrace:
    node_modules/foundation-sites/scss/util/_unit.scss:78, in function `-zf-to-rem`
    node_modules/foundation-sites/scss/util/_unit.scss:47, in function `rem-calc`
    node_modules/foundation-sites/scss/grid/_row.scss:83, in mixin `@content`
    node_modules/foundation-sites/scss/util/_mixins.scss:277, in mixin `@content`
    node_modules/foundation-sites/scss/util/_breakpoint.scss:153, in mixin `breakpoint`
    node_modules/foundation-sites/scss/util/_mixins.scss:276, in mixin `-zf-each-breakpoint`
    node_modules/foundation-sites/scss/grid/_row.scss:82, in mixin `grid-row-nest`
    node_modules/foundation-sites/scss/grid/_flex-grid.scss:29, in mixin `flex-grid-row`
    node_modules/foundation-sites/scss/grid/_flex-grid.scss:136, in mixin `foundation-flex-grid`
    scss/_core.scss:17, in mixin `bonsai-core`
    scss/global.scss:35, in mixin `bonsai`
    stdin:3

webpack: Failed to compile.

compiled with:

webpack
sass-loader

Foundation Version(s) you are using:

6.4.1

[Vuurvlieg]

I'm using a xsmall breakpoint for all of my project too and ran into the same issue. Thanks for reporting!

[jashwant]

The smallest breakpoint must be small: 0. It is fixed.

I use something like small, smedium and medium

[rykener]

@jashwant I can see that it is fixed at small: 0 but that seems like poor behavior, especially as it's not documented, and the documentation implies that xsmall: 0 should be possible.

Do you know exactly where in the codebase the smallest breakpoint is fixed as small: 0?

instead of small it should just be first($breakpoint-classes)

[jashwant]

@shonin , there has been a lot of discussion about it on github.

This should answer your question.

#7644
#8257

Bottomline is small: 0 is fixed. I don't like it either.

[rykener]

@kball according to our brief conversation on slack you indicated that having small: 0 fixed is poor behavior that should be fixed. Looking at these two linked issues in the above comment from @jashwant seems to contradict that.

Is it worth pursuing this work? If not should the documentation be updated to state this behavior?

[kball]

@shonin my sense from reading back through these issues is that the current behavior was a compromise solution, and looking at the timing at least some of that was in the crunch to get to the first version 6 release. I think we should definitely consider improving this

[christianmagill]

So when did this issue arise. I know I've used x-small breakpoint in other versions of Foundation 6.

[rykener]

Closing. According to #10383 this was fixed in #10491