Space

Spaces are used to consistently apply margin and padding across modules and UIs. The spacing scale brings a rhythm to the UI and the accurate design from page to page.

Spacing scale #

The spacing scale is based on a progressive grid in 4px increment and an additional small value of 2px.

2px $space-2
4px $space-4
8px $space-8
12px $space-12
16px $space-16
20px $space-20
24px $space-24
28px $space-28
32px $space-32
36px $space-36
40px $space-40
44px $space-44
48px $space-48
52px $space-52
56px $space-56
60px $space-60
64px $space-64
80px $space-80
100px $space-100
120px $space-120

Applying spacing #

Just add the predefined spacing classes to your container and see the result.

My container with 32px padding
<div class="is-inset-32">...</div>

Here is the full list of spacing classes.

Set

.is-inset-2 - .is-inset-120 Sets the padding on all sides of the container.
.is-inset-x-2 - .is-inset-x-120 Sets the padding on the left and right side of the container.
.is-inset-y-2 - .is-inset-y-120 Sets the padding on the top and bottom side of the container.
.is-inset-top-2 - .is-inset-top-120 Sets the padding on the top side of the container.
.is-inset-bottom-2 - .is-inset-bottom-120 Sets the padding on the bottom side of the container.
.is-inset-left-2 - .is-inset-left-120 Sets the padding on the left side of the container.
.is-inset-right-2 - .is-inset-right-120 Sets the padding on the right side of the container.
.is-outset-2 - .is-outset-120 Sets the margin around all sides of the container.
.is-outset-x-2 - .is-outset-x-120 Sets the margin from the left edge and from the right edge of the container.
.is-outset-y-2 - .is-outset-y-120 Sets the margin from the top edge and from the bottom edge of the container.
.is-stack-2 - .is-stack-120 Sets the bottom margin of the container.
.is-col-stack-2 - .is-col-stack-120 Sets the bottom margin of each grid column (with .is-col class) in the row.

Remove

.is-inset-x-none Removes the padding from the left and right side of the container.
.is-inset-none Removes the padding from all sides of the container.
.is-inset-y-none Removes the padding from the top and bottom side of the container.
.is-inset-top-none Removes the padding from the top side of the container.
.is-inset-bottom-none Removes the padding from the bottom side of the container.
.is-inset-right-none Removes the padding from the right side of the container.
.is-inset-left-none Removes the padding from the left side of the container.
.is-outset-none Removes the margin from the container.
.is-outset-x-none Removes the left and right margin from the container.
.is-outset-y-none Removes the top and bottom margin from the container.
.is-stack-none Removes the bottom margin from the container.
.is-col-stack-none Removes the bottom margin from each grid column (with .is-col class) in the row.

Changing spacing on the mobile devices #

To change the spacing on the mobile devices and the -mobile prefix to the modifier class. For example:

My container with 32px padding and 16px on the mobile
<div class="is-inset-32 is-inset-16-mobile">...</div>

That works with all the spacing classes:

.is-outset-40-mobile
.is-inset-x-32-mobile
.is-stack-20-mobile
.is-col-stack-20
.is-col-stack-24-mobile
.is-inset-none-mobile
.is-stack-none-mobile
.is-col-stack-none-mobile
etc.