Media Queries

Media queries are available through a series of aliases, both through utilities and in SCSS itself.

The aliases are meant to supply a normalized set of media query breakpoints that designers, development, and QA can all consider in tandem from feature ideation to completion.

Available aliases

• mid (Rarely used in our project, as the body will be set to this width as our minimum supported width.) - 64em (1024px @ 16px font-size)
• wide-sm - 80em (1280px @ 16px font-size)
• wide - 85em (1360px @ 16px font-size)
• wide-lg - 90em (1440px @ 16px font-size)

Media query utilities

Padding, margin, sizing, and offset utilities are available as through the media query aliases. Typically, you should use utilities from a smallest to largest style, with the default use first. For example:

<div class="u-m- u-wide-sm-m u-wide-m++">{content}</div>

As another example, it is often preferable to restrict content sizes at larger widths:

<div class="u-size1of1 u-wide-size5of8 u-wide-lg-size1of2">{content}</div>

Media queries in SASS

All media query aliases are available through a SASS mixin:

@include media-query('wide') {
    .c-someClass {
        // props to be applied at wide min-width
    }
}