Not able to change the Breakpoints

[yesjoar]

In version 6.2.4 of foundation sites I simply changed the breakpoints in my variable with this peace of code. As you can see... the small and medium value was still a workaround there. Without these two breakpoints it doesn't work also.. What I got was my four breakpoint classes like xs-2, lg-offset-4, and so on.

$breakpoints: (
	small: 0px,
	medium: 640px,
	xs: 0px,
	sm: 480px,
	md: 768px,
	lg: 992px,
	xl: 1200px
);

$breakpoint-classes: (xs sm md lg);

With the latest version (6.3.1) nothing of them worked anymore. At least I got a lot of error messages, but the documentation still give the info how breakpoints can be changed in name and value.

[10:34:41] WARNING: null was passed to rem-calc(), which is not a number.
Backtrace:
bower_components/foundation-sites/scss/util/_unit.scss:78, in function -zf-to-rem
bower_components/foundation-sites/scss/util/_unit.scss:47, in function rem-calc
bower_components/foundation-sites/scss/grid/_row.scss:83, in mixin @content
bower_components/foundation-sites/scss/util/_mixins.scss:240, in mixin @content
bower_components/foundation-sites/scss/util/_breakpoint.scss:149, in mixin breakpoint
bower_components/foundation-sites/scss/util/_mixins.scss:239, in mixin -zf-each-breakpoint
bower_components/foundation-sites/scss/grid/_row.scss:82, in mixin grid-row-nest
bower_components/foundation-sites/scss/grid/_classes.scss:40, in mixin foundation-grid
Resources/Private/Frontend/sass/screen.scss:39
[10:34:41] gulp-notify: [Sass Error] Error: Invalid null operation: "null div 2".
on line 83 of bower_components/foundation-sites/scss/grid/_row.scss
$margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;
-------------^

Kevin Ball said in the slack channel that this sounds like a bug. So I opened this issues. Perhaps it isn't a bug... we'll see.

Best
Kai

[tbaraniecki]

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

And still got: WARNING: breakpoint(): "xsmall" is not defined in your $breakpoints setting.

[jackmcpickle]

Same issue here. When you change the smallest breakpoint to anything other than small: 0 and add it to the $breakpoint-classes it seems to not play nice.

[yesjoar]

Hey @tbaraniecki and @jackmcpickle,
currently I use 6.3.1 and these are currently my custom settings.

$breakpoints: ( small: 0px, medium: 640px, large: 1024px, xs: 0px, sm: 480px, md: 768px, lg: 992px, xl: 1200px );

$breakpoint-classes: ('xs', 'sm', 'md', 'lg', 'xl');

As you can see small, medium and large are the default settings from foundation. I've added my custom breakpoints used them in the breakpoint-classes.

Worked pretty well for me without and problems.

[jackmcpickle]

@yesjoar I can confirm that I can compile my sass when I use your trick. But get the following warning. I'm running version 6.4.0

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/xy-grid/_cell.scss:80, in function `if`
	node_modules/foundation-sites/scss/xy-grid/_cell.scss:80, in mixin `-xy-cell-properties`
	node_modules/foundation-sites/scss/xy-grid/_cell.scss:168, in mixin `xy-cell-static`
	node_modules/foundation-sites/scss/xy-grid/_classes.scss:41, in mixin `xy-base-grid-classes`
	node_modules/foundation-sites/scss/xy-grid/_classes.scss:419, in mixin `foundation-xy-grid-classes`
	node_modules/foundation-sites/scss/foundation.scss:83, in mixin `foundation-everything`
	node_modules/foundation-sites/assets/foundation.scss:3

[homerjam]

+1

[moondawg69]

+1

Default breakpoints do not handle iPad as a quick test of the new grid, to me that is still a 'medium' but medium-up-2 renders large-up-4 on a block grid in landscape.

[ghost]

+1

[jveens]

+1

[Harti]

+1

[christianmagill]

I use

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

The trick is to make sure you also add the smallest breakpoint to $grid-column-gutter

$grid-column-gutter: (
  xxsmall: 20px,
  medium: 30px,
);

[andycochran]

 $breakpoints: (
  small: 0px,
  medium: 640px,
  xs: 0px,
  sm: 480px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

This isn't a valid map. The first value must be 0 and each following value should increase in size. This should work if you remove small and medium.