Spacing Responsive

The spacing system is set up by default to have 10 increments, each representing 1rem in size. For example, to achieve a margin-top which uses the 2nd step in the spacing scale (2rems by deafult), you would use .mt2. If you wanted a padding-left with the 8th step in the scale, it's .pl8.

Name Class
Margin Vertical .mv
Margin Horizontal .mh
Margin Top .mt
Margin Right .mr
Margin Bottom .mb
Margin Left .ml
Padding Vertical .pv
Padding Horizontal .ph
Padding Top .pt
Padding Right .pr
Padding Bottom .pb
Padding Left .pl

Example:


<div class="mv2 md-mv4 lg-mv6 ph1 md-ph3 lg-ph6">This div has stuff in it</div>