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 |
Example:
<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.