Spacing

How we handle Spacing and sizing in the Standards Toolkit

Spacing

Spacing is a key (and often overlooked) aspect of ensuring your application is easy to read and understand. Too little whitespace will cause components to become visually cramped, therefore decreasing readability. The general rule is to start with whitespace that is too large for an element and then decrease it until it is at an appropriate size. It is far better to have too much whitespace than too little.

Dense User Interfaces

Sometimes interfaces (particularly dashboards or data heavy components) need to have a more condensed UI to ensure all information is presented to the user. This is a tradeoff with readability, so try to use this sparingly.

The Spacing Scale

By reducing application Spacing to a predetermined scale, it is easy to ensure all elements and components are spaced in proportion to each other, rather than with arbitrary values.

The Spacing Scale values, much like the Typography Scale values, doesn't increase in a linear fashion. This is because as elements get positioned further apart, the difference between adjacent values becomes less noticeable. Whilst the Scale values itself increases non-linearly, the Scale is linear. This is to help developers quickly adjust spacing, without having to worry about the underlying Spacing API values.

ScaleSize
10.125rem
20.25rem
30.375rem
40.5rem
50.625rem
61.75rem
70.875rem
81rem
91.125rem
101.25rem
111.5rem
122rem
132.5rem
143rem
154rem
165rem
176rem
188rem
199rem
2010rem
px1px
full100%

Using the Spacing Scale

To help use the Spacing scale, there is a handy SCSS function provided: spacing(). This function accepts one parameter, the Scale value:

padding: spacing("4");
// Result
padding: 0.5rem;

Utility Classes

The CSS Frameworks Spacing Variables are available in Utility Class form, allowing components to be quickly positioned and manipulated without having to jump into the CSS. All Utility classes are prefixed with the namespace .rn_. This is to prevent them clashing with any custom styles you author.

Both margin and padding can be set via Utility classes. The class syntax follows this pattern:

.rn_[Property][Direction?]-[Size]
PropertyDirectionSize
m marginall1 0.125rem
p paddingt top2 0.25rem
 r right3 0.375rem
 b bottom4 0.5rem
 l left5 0.625rem
 x x-axis6 0.75rem
 y y-axis7 0.875rem
 8 1rem
 9 1.125rem
 10 1.25rem
 11 1.5rem
 12 2rem
 13 2.5rem
 14 3rem
 15 4rem
 16 5rem
 17 6rem
 18 7rem
 19 8rem
 20 9rem
 px 1px
 full 100%

For example, adding a class of .rn_mt-10 would result in the following:

margin-top: 1.25rem;

To use the Utility classes in conjunction with media queries, add the required breakpoint to the Utility class:

.md:rn_mt-10