⬅

Responsive

Responsive Prefixes

Some of Bluprnt’s utility classes are built with reponsive layouts in mind. Use the prefixes .u-, .u-sm-, .u-md-, and .u-lg- to quickly and easily adjust your layout and content for different screen sizes and devices.

Resize your browser to see each breakpoint in action:

u-sm-size2of4
u-md-size2of8
u-lg-size8of12

u-sm-size2of4
u-md-size6of8
u-lg-size4of12 

<div class="o-grid">
  <div class="o-grid-cell  u-sm-size2of4  u-md-size2of8  u-lg-size8of12">
    <p class="u-bgGrayLight  u-p4">
      u-sm-size2of4  <br>
      u-md-size2of8  <br>
      u-lg-size8of12
    </p>
  </div>
  <div class="o-grid-cell  u-sm-size2of4  u-md-size6of8  u-lg-size4of12">
    <p class="u-bgGrayLight  u-p4">
      u-sm-size2of4  <br>
      u-md-size6of8  <br>
      u-lg-size4of12
    </p>
  </div>
</div>

How it Works

By default, Bluprnt works responsively from the lowest breakpoint and up, as opposed to largest-to-smallest. This means that .u- is the default prefix when writing a Bluprnt utility class.

Class Name Description
u- Apply at min-width of 0. (default)
u-sm- Apply at min-width of 360px
u-md- Apply at min-width of 600px
u-lg- Apply at min-width of 840px

Which Utils Have a Responsive Prefix?

To avoid code bloat and unneccessary prefixing, not all Bluprnt’s classes are responsive. Below is an easy reference list of which ones are responsive natively in Bluprnt: