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>