Spacing
In order to have consistency in all Bifrost projects, we created a set of spacing guidelines. The spacing can be used between and inside components.
Guidelines
These are guidelines, not rules. If your project looks better with another size of spacing, you should use your own, but please keep custom overrides to a minimum.
8px grid system
The values for our spacing guidelines are based on a 8 px grid system. The principle of a this system is that it uses multiples of 8 (8, 16, 24, 32, 40, 48, 56 etc.).
var()
px
rem
--bfs0
0
0
--bfs2
2
0.125
--bfs4
4
0.25
--bfs8
8
0.5
--bfs12
12
0.75
--bfs16
16
1
--bfs24
24
1.5
--bfs32
32
2
--bfs40
40
2.5
--bfs48
48
3
--bfs52
52
3.25
--bfs56
56
3.5
--bfs80
80
5
| var() | px | rem | |
|---|---|---|---|
| --bfs0 | 0 | 0 | |
| --bfs2 | 2 | 0.125 | |
| --bfs4 | 4 | 0.25 | |
| --bfs8 | 8 | 0.5 | |
| --bfs12 | 12 | 0.75 | |
| --bfs16 | 16 | 1 | |
| --bfs24 | 24 | 1.5 | |
| --bfs32 | 32 | 2 | |
| --bfs40 | 40 | 2.5 | |
| --bfs48 | 48 | 3 | |
| --bfs52 | 52 | 3.25 | |
| --bfs56 | 56 | 3.5 | |
| --bfs80 | 80 | 5 |
Page padding
A rule of thumb for designers is that the page padding of your designs should be
40px when viewed on a large device, and 24px on smaller devices.
Spacing between elements
When it comes to spacing between elements you can use 8px on smaller elements
that are “related” to each other (e.g a save button next to an input field).
Spacing between larger sections and cards can be elevated to 16px or 24px,
depending on visual flow and hierarchy in your design.
Developer notes
Using a Bifrost CSS var like var(--bfs16) is optional. The only
advantage over simply using 16px is that you will be able to tell
whether you have used a Bifrost-spacing value just from looking at your
css code rather than having to refer to this page.
The diagram above assumes the root font size is 16px. This is not the case
if a user sets a custom font-size in their browser.
Almost always, using px as a spacing value is preferred over rem, except
for font-sizes, and anything that should scale with the font-size. In summary:
- Use
--bf-font-size-*font-size variables for font-sizes - Use
remfor anything that should scale with custom browser font-size - Use
pxfor anything else (or--bfs*if you prefer)