Spacing

Our pages and applications must prioritize readability and comprehensiveness above all else. Optimal spacing is essential in order to achieve a balanced and intuitive layout, as it allows the user to read the page as a story, with pauses, indentations, and sequences that bring the user to their desired destination. Using spacing as a tool is not necessarily easy, but with defined guidelines it becomes a simple process.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

Properties

m - margin

p - padding

Sides

t - For classes that set margin-top or padding-top

b - For classes that set margin-bottom or padding-bottom

s - For classes that set margin-left or padding-left

e - For classes that set margin-right or padding-right

x - For classes that set both *-left and *-right

y - For classes that set both *-top and *-bottom

Screen Sizes

( responsiveness )

xs - 0px

sm - 576px

md - 768px

lg - 992px

xl - 1200px

xxl - 1900px

Sizes

0 - For classes that eliminate the margin or padding by setting it to 0

1 - (by default) For classes that set the margin or padding to $spacer * .25

2 - (by default) For classes that set the margin or padding to $spacer * .5

3 - (by default) For classes that set the margin or padding to $spacer

4 - (by default) For classes that set the margin or padding to $spacer * 1.5

5 - (by default) For classes that set the margin or padding to $spacer * 3

auto - For classes that set the margin to auto

* The spacer size was defined as 1rem at the variables.scss file but it can be overrided by the developer * Other variables were also set at the variables.scss file and can be overwritten by the developers who are using it according to their need

Spacing

Download the UI Kit