How we handle Spacing and sizing in the Royal Navy Design System
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.
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;
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:
For example, adding a class of
.rn_mt-10 would result in the following:
To use the Utility classes in conjunction with media queries, add the required breakpoint to the Utility class: