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.