Spacing

8-point spacing system

We follow a 8-point spacing system – multiples of 8 to define the different dimensions, margins and paddings of our elements. The reason for this is to streamline the process, saving time by minimize the amount of choices and create consistent usage of space across all our product.

Figure 1. Example on multiples of 8px horizontal spacing between elements.

If you are interested in learning more about the 8-point spacing system, you can read more about it in this Introduction articleopen_in_new, which provides a brief explanation of the reasons why to use the 8-point spacing system. To dive even deeper into the nitty gritty, please refer to this in-depth explanationopen_in_new of the 8-point spacing system.

What if I need something in between?

Even though we try to adhere to the 8-point spacing system as much as possible, we also know that sometimes you need to use something in between. Especially when it comes to building certain components which requires smaller space in between in order to show grouping and simply produces a better result visually. In those cases, it is allowed to use values from the multiples of 4, but this should be kept to 4 px and 12 px as we try to keep the larger increments for a consistent vertical spacing alignment between sections.

Vertical spacing

Similar to horizontal spacing, we also use spacing vertically in order to create good vertical structure. While we don’t have strict usage definitions for each size, it is important to always evaluate what fits best in your context and what type of devices you are designing for. Make sure to group items relevant to each other close and separate sections with good amount of spacing to provide a clear separation.

Figure 2. Example on multiples of 8 px vertical spacing between elements

Touch target

On mobile devices, we have to consider the size of the different components to make sure that there is enough space in between interactive components such as: Links, buttons and other input actions to avoid miss clicks and errors.

A touch target area needs to be a certain size: 48*48 dp (distribution point) according to Android and 44 px minimum size according to iOS. Keep in mind this does not mean your component has to fill these area, even smaller components can work as long as the touch target area fulfills the size requirement.

Base increment of rem

In our system the base size of a rem unit is 16px, this means you can easily use 0.5 rem increments to create layouts in code on a 8-point spacing system. See example below for reference:

Dive deeper into spacing

There are a lot more to learn about best practices when it comes to spacing, it involves much more than just spacing in between elements. Even though, we can’t explain all these concepts here in our spacing section. We would like to provide you with links to learn more about what other factors should be considered when designing layouts and what to think about in order to create the best experience for our users.

How it works in code

Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are ranging from 0.25 rem to 3 rem.

Notation

Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

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

Where property is one of:

• m - for classes that set margin
• p - for classes that set padding

Where sides is one of:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left or *-right
• y - for classes that set both *-top or *-bottom

Where size is one of:

• 0 - for classes that eliminate the margin or padding by setting it to 0
• 1 - for classes that set the margin or padding to @spacer * 0.25
• 2 - for classes that set the margin or padding to @spacer * 0.5
• 3 - for classes that set the margin or padding to @spacer
• 4 - for classes that set the margin or padding to @spacer * 1.5
• 5 - for classes that set the margin or padding to @spacer * 3
• auto - for classes that set margin to auto

For margin you can also set negative size (excluding 0):

• n1 - for classes that set the margin to -@spacer * 0.25
• n2 - for classes that set the margin to -@spacer * 0.5
• n3 - for classes that set the margin to -@spacer
• n4 - for classes that set the margin to -@spacer * 1.5
• n5 - for classes that set the margin to -@spacer * 3

(@spacer is set to 1rem (16px))

Examples

Here are some representative examples of these classes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.mt-0 {
    margin-top: 0 !important;
}

.ml-1 {
    margin-left: (@spacer * 0.25) !important;
}

.px-2 {
    padding-left: (@spacer * 0.5) !important;
    padding-right: (@spacer * 0.5) !important;
}

.p-3 {
    padding: @spacer  !important;
}

Horizontal centering

Additionally, DesignGuide also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.

1
2
3

<div class="mx-auto p-2 bg-default">
    Centered element
</div>