Product Design Lessons

Intro to Foundation  |   Lesson #94

Beyond Small, Medium, and Large. Foundation Breakpoint Crash Course.

We'll cover how to change Foundation's default breakpoints in Sass,
use the Sass breakpoint variables, and how to add more.

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.


Next Steps

The beauty of Sass and Foundation’s breakpoint mixin means you make the change in one place to customize your entire site or app. In our fast paced industry, these kind of conveniences are crucial to meeting deadlines. With this knowledge you can really make Foundation your own. Go out and make something amazing!

Some Additional Resources:

Why do media queries use ems, not rems?

Quickly find the screen specifications of the most popular devices and monitors currently on the market.

Mobile phone screen resolution market share.

Creating presentational classes for new breakpoint variables.

About the instructor

rafi

Rafi Benkual oversees the Foundation Forum. Rafi managed people, stores and small organizations before joining ZURB as our Foundation Advocate.