11 Spacing Spacing

We have 5 different spacing sizes: 0, s, m, l, and xl.

These classes are similar to Bootstrap's except that we don't use md or lg so that it doesn't get confused with responsive breakpoints.

11.1 Spacing - Margins Margins

Examples

Default styling

.[modifier class]

m-a-m

default margin on all sides

.m-a-m

m-x-m

default margin on left and right

.m-x-m

m-y-m

default margin on top and bottom

.m-y-m

m-t-m

default margin top

.m-t-m

m-r-m

default margin right

.m-r-m

m-b-m

default margin bottom

.m-b-m

m-l-m

default margin left

.m-l-m

m-a-s

margin all sides small

.m-a-s

m-a-m

default (medium) margin on all sides

.m-a-m

m-a-l

margin all sides large

.m-a-l

m-a-xl

margin all sides x-large (shrinks for smaller screen widths)

.m-a-xl

<div class="[modifier class]">
    .[modifier class]
</div>

11.2 Spacing - Padding Padding

Examples

Default styling

.[modifier class]

p-a-m

default padding on all sides

.p-a-m

p-x-m

default padding on left and right

.p-x-m

p-y-m

default padding on top and bottom

.p-y-m

p-t-m

default padding top

.p-t-m

p-r-m

default padding right

.p-r-m

p-b-m

default padding bottom

.p-b-m

p-l-m

default padding left

.p-l-m

p-a-s

padding all sides small

.p-a-s

p-a-m

default (medium) padding on all sides

.p-a-m

p-a-l

padding all sides large

.p-a-l

p-a-xl

padding all sides x-large (shrinks for smaller screen widths)

.p-a-xl

<div class="[modifier class]">
.[modifier class]
</div>