Menu icon Foundation
Do you mix core F6 breakpoints and custom breakpoints in $breakpoints?

Hello fellow members of the foundation framework :),

I have a question for you regarding how you organize core F6 breakpoints values and custom breakpoints.

In my team, we put our custom breakpoints in the F6 $breakpoints map variable, we wanted to have a single source of truth, so that at a glance for example, if two custom breakpoints are too close in value, we could choose to fuse them into a single one.

But breakpoints variables in $breakpoints are exported through CSS as a font-family to be made available to javascript media-query helpers. And finally some people in my team are wondering if it's such a good idea to mix core foundation breakpoints and custom breakpoints in $breakpoints.

If you have custom breakpoints (you're not relying only on core F6 media queries), do you have them isolated or in the $breakpoints variable? If you have custom breakpoints in $breakpoints does it bother you in any way in your devs organization in sass or JavaScript?

breakpoints$breakpointsmedia queriesJS helpershelpersmediaquery

Hello fellow members of the foundation framework :),

I have a question for you regarding how you organize core F6 breakpoints values and custom breakpoints.

In my team, we put our custom breakpoints in the F6 $breakpoints map variable, we wanted to have a single source of truth, so that at a glance for example, if two custom breakpoints are too close in value, we could choose to fuse them into a single one.

But breakpoints variables in $breakpoints are exported through CSS as a font-family to be made available to javascript media-query helpers. And finally some people in my team are wondering if it's such a good idea to mix core foundation breakpoints and custom breakpoints in $breakpoints.

If you have custom breakpoints (you're not relying only on core F6 media queries), do you have them isolated or in the $breakpoints variable? If you have custom breakpoints in $breakpoints does it bother you in any way in your devs organization in sass or JavaScript?

Rafi Benkual over 2 years ago

I typically add custom breakpoints into the maps but namespace them based on use case. For example if i need a custom navigation breakpoint I would namespace like 

$breakpoints: (
  small: 0,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
  nav-breakpoint,
);

Sven COSNUAU over 2 years ago

Hello Rafi, thanks for getting the post out of the spam :), and for your answer, i appreciate.

My team is using BEM notation to namespace our breakpoints in $breakpoints, like so: $breakpoint__main-nav.

Is there anybody else with a mind to share on the practice of mixing or keeping separate your breakpoints variables?