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.