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 All .ma
Margin Vertical .mv
Margin Horizontal .mh
Margin Top .mt
Margin Right .mr
Margin Bottom .mb
Margin Left .ml
Padding All .pa
Padding Vertical .pv
Padding Horizontal .ph
Padding Top .pt
Padding Right .pr
Padding Bottom .pb
Padding Left .pl


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

Adding New Spacing Helpers

This mixin allows you to add a value to be generated along with Beard's default spacing helpers, including responsive versions of each.

@include new-spacing-helper(16); // Outputs responsive helpers like .pt16 { padding-top: 16rem !important }
@include new-spacing-helper('--tiny', 0.3); // Outputs responsive helpers like .pt--tiny { padding-top: 0.3rem !important }

Note: Calling this mixin will only work if you import Beard’s before and after partials, as recommended by the installation guide.