• 2.5.0

Spacings 

<div class="pdg box box--tight box--default">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Tempore fuga delectus debitis asperiores distinctio saepe itaque aut,
    temporibus veritatis rerum odit exercitationem facilis, impedit amet,
    molestiae necessitatibus natus. Distinctio, nam.
</div>
<div class="mrg- box box--tight box--default">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Tempore fuga delectus debitis asperiores distinctio saepe itaque aut,
    temporibus veritatis rerum odit exercitationem facilis, impedit amet,
    molestiae necessitatibus natus. Distinctio, nam.
</div>
<div class="pdgv- pdgh+ mrgt+ mrgb- box box--tight box--default">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Tempore fuga delectus debitis asperiores distinctio saepe itaque aut,
    temporibus veritatis rerum odit exercitationem facilis, impedit amet,
    molestiae necessitatibus natus. Distinctio, nam.
</div>
<div class="pdg md-pdg- mrgh box box--tight box--default">
    <strong>Responsive</strong>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Tempore fuga delectus debitis asperiores distinctio saepe itaque aut,
    temporibus veritatis rerum odit exercitationem facilis, impedit amet,
    molestiae necessitatibus natus. Distinctio, nam.
</div>
<div class="mrgv lg-mrgv- box box--tight box--default">
    <strong>Responsive</strong>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Tempore fuga delectus debitis asperiores distinctio saepe itaque aut,
    temporibus veritatis rerum odit exercitationem facilis, impedit amet,
    molestiae necessitatibus natus. Distinctio, nam.
</div>

Alter spacings (padding or margin) on elements according to the spacing units defined in the settings.

Type Side(s) Size
mrg
Margin
pdg
Padding
{empty}
All sides
t
Top
r
Right
b
Bottom
l
Left
v
Vertical (top & bottom)
h
Horizontal (left & right)
0
Zero
–
Tiny
-
Small
{empty}
Default
+
Large
++
Huge

You can also restrict style to specific breakpoints by prefixing them with the media query name, for example .lg-pdg+ to match only large screens. Those breakpoints are mobile-first and apply to the targeted breakpoint and above.