Overview
Utility classes for positioning.
Every bit of margin and pading throughout Bluprnt utilizes a value from our spacing scale.
The margin and padding utilities work by combining a base letter, a Directional modifier, and a Spacing Scale modifier.
See below for the letter/number and it’s meaning.
Base:
p = padding
m = margin
Directional Modifiers:
x = horizontal
y = vertical
t = top
r = right
b = bottom
l = left
Spacing Scale Modifiers
0 = none (0px)
1 = 1st step in spacing scale (2px)
2 = 2nd step in spacing scale (5px)
3 = 3rd step in spacing scale (10px)
4 = 4th step in spacing scale (20px)
5 = 5th step in spacing scale (30px)
6 = 6th step in spacing scale (40px)
7 = 7th step in spacing scale (50px)
8 = 8th step in spacing scale (60px)
Usage example:
<div class="u-mb4">I have a margin bottom of 20px.</div>
<div class="u-m3">I have a margin of 10px.</div>
<div class="u-p7">I have a padding of 50px.</div>
<div class="u-pl2">I have a padding left of 5px.</div>
Responsive Usage example:
<div class="u-pb4 u-sm-pb5 u-md-pb6 u-lg-pb7">
I have different bottom padding at various browser widths!
</div>