Breakpoints are the foundation of responsive design; Pun intended. Breakpoints are the widths at which different grids or CSS styles take effect. In Foundation we chose its default settings to accommodate most scenarios. But most doesn’t cover everyone. Sometimes a project requires different breakpoints. Here’s how you can tailor, use, and add Foundation’s breakpoints to suit your product's design requirements.

1. First let's recap how to customize the Breakpoints.

You’re probably already used to the built in classes like small-12 and medium-6. Media queries let you do a little more.

All of these media query ranges are defined in the _settings.scss file. So you have the standard small, medium, and large breakpoints here.

You can un-comment the breakpoint you want to change, make the change, then save. This will automatically update the media query ranges below the breakpoints in the _settings.scss file.

Now, say for example you’re doing something exciting, like a company dashboard that will go on a big tv in your lobby. You'll control things that need to be larger with these.

You start by un-commenting the xlarge and/or xxlarge media query ranges.

Make sure you also uncomment this line if you want the the extra large classes to be compiled into your CSS.

2. Using Foundation's breakpoints

For this example, we are using a media query of medium-up to affect the changes.

                              
.flying-yeti {
  position: absolute;

  img {
    max-width: 50%;
    position: absolute;
    right: 3rem;
    top: 3rem;

    @media #{$medium-up} {
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
    }
  }
}

                              
                            

There are many breakpoint variables to choose from:

• $small-up
• $small-only
• $medium-up
• $medium-only
• $large-up
• $large-only
• $xlarge-up
• $xlarge-only
• $xxlarge-up
• $xxlarge-only

Even device orientation:

• $landscape
• $portrait

Foundation's CSS is mobile-first. For this reason, using a variable like $medium-up will affect CSS in the medium range and wider. To only target the medium range, use $medium-only.

3. Adding more grid breakpoints

There may be situations where your content dictates an extra breakpoint. You can add your own custom grid breakpoints like to get finer control.

The best place to add the new breakpoint is the _global.scss file. We'll add a tiny breakpoint before the default small one.

You'll see how the media query ranges are defined here. We’ve added a tiny breakpoint, then created a tiny range with it. Once you’ve done this, you can create the breakpoint variables.

Now you can use tiny-up and tiny-only to get finer control over your layout.

---