Media Queries

This is a mobile first library, so the classes you apply to an element should be the styles for mobile sizes. Responsive Designs are achieved with class suffix flags to change the styles across our 3 Media Queries. Nearly every class in the library has these modifiers.

-ns

The first suffix stands for "NOT SMALL", which means everything BUT the phone.

Often our designs look good on both Medium (Tablet) and Large (Desktop) screens, so we add this suffix to the style that needs to be on Medium and Large screens.

<h1 class="f4 f1-ns">
  This header defaults to font scale 4 on mobile, but on all other screens, is font scale 1.
</h1>

-m

Sometimes you need something to change between tablet and desktop, and that's what the media -m suffix is for.

-l

Finally the -l suffix will render the class only on desktop or larger screens.

<h1 class="f4 f2-m f1-l">
  This header defaults to font scale 4 on mobile, 2 on tablets and 3 on desktop
</h1>