The Seattle Times UI has some predefined breakpoints setup to get you quickly developing responsive pages.
Customizing Breakpoint Variables
It’s possible to customize these variables or adapt them into your own system. You might create your own _variables.scss partial in your project and rename these variables, insert new breakpoints, or disregard existing breakpoints. These breakpoints and variables were designed to be used as a base starting point.
These variables are used in the included
@media uses a mobile-first approach, defaulting to a min-width expression in the resulting media query.
You can also use a desktop-first breakpoint or range breakpoints to target specific screens. Do this by passing in your desired expression. You might consider making these Sass variables if you plan on reusing them throughout your project.
See the notes in Bourbon’s docs for more uses of this mixin.