Spacing

mesh has a wide range of spacing utility classes, which makes it easy to toggle margin and padding responsively in your web builds.

Usage

Sometimes it can be a pain writing out padding & margin responsively using CSS, which is why we have included handy utility classes to make things easier.

Notation:

You can target the margin util classes by using m{side}-{breakpoint}-{number}.
The side being is optional and is notated with t, b, l, r, x or y.
The breakpoint is also optional and would be be one of our five breakpoints and the amount ranging from 1 to 5.
You can target the padding util classes by using p{side}-{breakpoint}-{number}.

Properties:

Class Side (optional) Space

{p} padding

{m} margin

{} All sides

{t} top

{r} right

{b} bottom

{l} left

{x} horizontal

{y} vertical

{1} 0.5rem

{2} 0.75rem

{3} 1rem

{4} 2rem

{5} 3rem

Examples

Responsive padding:

A common usage for these utility classes would be to extend with value of padding when screen size becomes larger. Below is an example of just that:

py-3 py-tab-4 py-desk-5


<div class="py-3 py-tab-4 py-desk-5">py-3 py-tab-4 py-desk-5</div>

Variables

With the spacing-properties map you can add and delete padding & margin classes and define their size.

Variable	Value	Description
`$spacing-properties: ( 0: 0, 1: 0.5rem, 2: 0.75rem, 3: 1rem, 4: 2rem, 5: 3rem );`	Map(number:pixel/em/rem)	The number of the `spacing-properties` map corresponds to the class name, the rem's corresponds to the size of the margin/padding. Add and delete as you please but be aware this map is heavy on kb.