Spacing

How we handle Spacing and sizing in the Royal Navy Design System

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.

ScaleSizePX
10.125rem2px
20.25rem4px
30.375rem6px
40.5rem8px
50.625rem10px
61.75rem12px
70.875rem14px
81rem16px
91.125rem18px
101.25rem20px
111.5rem24px
122rem32px
132.5rem40px
143rem48px
154rem64px
165rem80px
176rem96px
188rem128px
199rem144px
2010rem160px
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