Responsive Utilities

Responsive classes which combine with utility classes to apply them at specific breakpoints.

Here are the responsive breakpoints you can prefix to utility classes:

• nys-mobile-lg: min-width: 480px
• nys-tablet: min-width: 768px
• nys-desktop: min-width: 1024px
• nys-widescreen: min-width: 1400px

Responsive utilities are written as their screen size followed by a colon, followed by the utility class you want to make responsive. Here is an example of a responsive display utility that applies display: none to desktop screens and larger:

• <p class="nys-desktop:nys-display-none">Hello Mobile World</p>

List of supported utilities

• Display
• Flex
• Float
• Grid
• Opacity
• Z-index

Currently unsupported:

• Margin and Padding

Same utility on all breakpoints

If you want to have a utility class apply at every breakpoint, simply use the utility class on its own. No need to use the responsive utilities to target specific breakpoints as they will apply mobile-first through all larger breakpoints. Let's see an example using the nys-grid-col classes.

<div class="nys-grid-row">
    <div class="nys-grid-col-6">.nys-grid-col-6</div>
    <div class="nys-grid-col-6">.nys-grid-col-6</div>
</div>
<div class="nys-grid-row">
    <div class="nys-grid-col-8">.nys-grid-col-8</div>
    <div class="nys-grid-col-4">.nys-grid-col-4</div>
</div>

Different utility at different breakpoints

Columns are full-width until the narrowest breakpoint specified in a .nys-grid-col class. For instance, using a single set of nys-desktop:nys-grid-col-4 classes, you can create a basic grid system that starts out stacked before displaying as columns at the desktop breakpoint (nys-desktop:) as illustrated in the following rows and corresponding code.

You can see in the preview below, the columns are stacked on top of each other at narrow screen widths (Smaller than desktop breakpoint size of 1024px).

<div class="nys-grid-row">
    <div class="nys-desktop:nys-grid-col-4">.nys-desktop:nys-grid-col-4</div>
    <div class="nys-desktop:nys-grid-col-4">.nys-desktop:nys-grid-col-4</div>
    <div class="nys-desktop:nys-grid-col-4">.nys-desktop:nys-grid-col-4</div>
</div>

Mix and match breakpoints

Use a combination of different breakpoints for each layout as needed. See the following example code for a better idea of how it all works. Use caution when applying styles at different breakpoints, changing the layout on a screen drastically between breakpoints can be confusing to users.

<div class="nys-grid-row">
  <div class="
    nys-mobile-lg:nys-grid-col-3
    nys-tablet:nys-grid-col-6
    nys-desktop:nys-grid-col-9
    nys-widescreen:nys-grid-col-12
    ">
    Multi-column</div>
</div>