Set the friendly margin as m* and padding as p* value to an element or part of the side by writing short code with all directions:

• *t for top
• *r for right
• *b for bottom
• *l for left
• *x horizontally for both left and right
• *y vertically for both top and bottom

You can combine a margin/padding prefix with a direciton suffix. For example:

• for a margin-top, use mt-*
• for a padding-bottom, use pb-*
• for both margin-left and margin-right, use mx-*
• for both padding-top and padding-bottom, use py-*
• for a value negative use *-n*

Each of these property-direction combinations needs to be appended with one of 11 value suffixes:

Because every developer has their own preferences, and to satisfy Buval's customization features, it's possible to specify your own class name shortcuts as well as the spacing values.

For example, if you wanted:

• margin to be abbreviated to mg
• padding to be totally excluded
• and to only have 3 values: "small" at 10px, "medium" at 30px, and "large" at 60px

You can simplify the CSS output by customizing these SCSS variables:

$spacing-shortcuts: ("margin": "mg");
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);