Responsive Suffixes

Responsive Suffix Classes

Utility classes to target a utility at a responsive breakpoint and higher, following a mobile-first approach. Add a responsive breakpoint suffix class separated with @.

Breakpoint Name Width
folwell-sm min-width: 30em
folwell-md min-width: 40em
folwell-lg min-width: 60em


<div class= "display-inline-block@folwell-lg" > </div>

In the above example, adding @folwell-lg to the end of the utility class means the inline-block property will be applied if the browser width is equal to or greater than the Folwell large screen breakpoint value.