We’ve all been there before. You have a specific design that needs to be coded pixel perfect and the default breakpoints need to be adjusted. Normally you’d have to hunt for media queries through dozens or even hundreds of lines in CSS. You need to account for several different scenarios — smartphones, tablets and desktop browsers, and even different screen orientations. If you had to find and replace every media query things could get messy and time consuming very fast.

But it doesn't have to be this way. We chose default settings to accommodate most scenarios. But most doesn’t cover everyone. Sometimes a project requires different breakpoints. Foundation 6’s Sass makes selecting custom breakpoints a snap with very little setup. In this lesson, you’ll learn how to customize and add breakpoints in Foundation to suit your product’s design requirements.

First, A Recap on Breakpoints

Breakpoints are the widths at which different grids or CSS styles take effect. These are CSS styles inside a media query that only take effect within the specified range. So for example:

This media query uses a max-width so for any screen 39.9375em and narrower will apply the style within.

If you had to change the media query in CSS, you’d have to search and replace. You’ll find breakpoints on many different lines. For example:

Each represents the point at which browsers apply different rules: Small, medium, large and extra large, respectively.

Sass Maps to the Rescue!

Instead of tedious find and replace, the Foundation 6 Sass version uses a breakpoint variable so you can make a change in one single place. Let’s check it out!

Open your _settings.scss file and you’ll find the section with the breakpoint settings.

Here you’ll see that each breakpoint name is called in this Sass map with a value. You can change the values here to any px value you’d like. When you change the breakpoint values here, every place you use this breakpoint will automatically update to the new value. No more hunting down media queries and manually changing them.

Adding a New Breakpoint

Say we have a special circumstance where we’d need a breakpoint between small and medium. The Sass map makes it really simple to add.

So we’ll add a breakpoint named smedium. We’ll set this breakpoint at 460px. So at any width between 460px and 640px, the smedium styles will apply. Even though the above values are in pixels, they're converted to ems at the end for use in media queries.

Now you can access this new breakpoint value using the breakpoint mixin:

Using New Grid Classes

To create grid classes for this new breakpoint, we’ll add the new breakpoint into the $breakpoint-classes variable.

Now you can use the new grid classes as you would small, medium, large.

---