Styles

Breakpoints

The Seattle Times UI has some predefined breakpoints setup to get you quickly developing responsive pages.

Extra Small: 599 pixels and below

Small: 600 to 767 pixels

Only Mobile: 767 pixels and below

Medium: 768 to 1019 pixels

Small Desktop: 1020 to 1249 pixels

Large: 1020 to 1659 pixels

Extra Large: 1660 pixels and above

Breakpoint Variables

$break-small: 600px; $break-medium: 768px; $break-large: 1020px; $break-extra-large: 1660px;

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.

Usage

These variables are used in the included @media mixin. @media uses a mobile-first approach, defaulting to a min-width expression in the resulting media query.

.st-button { color: blue; @include media($break-medium) { color: red; } }

compiles to

.st-button { color: blue; } @media screen and (min-width: 768px) { .st-button { color: red; } }

More Uses

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.

.st-button { color: blue; @include media(max-width 1019px) { color: red; } }

.st-button { color: blue; @include media(min-width 700px max-width 1019px) { color: red; } }