Foundation
Spacing units
Why multiples of 8?
The number 8 is easily broken down into smaller measurements before it approaches sub-pixel units. Additionally, many popular screen sizes are also divisible by 8.
Spacing unit tokens
Token | Pixels | Rems | Example |
---|---|---|---|
0 |
0px | 0rem |
|
1px |
1px | .1rem |
|
0.25 |
2px | .2rem |
|
0.5 |
4px | .4rem |
|
1 |
8px | .8rem |
|
1.5 |
12px | 1.2rem |
|
2 |
16px | 1.6rem |
|
2.5 |
20px | 2rem |
|
3 |
24px | 2.4rem |
|
4 |
32px | 3.2rem |
|
5 |
40px | 4rem |
|
6 |
48px | 4.8rem |
|
7 |
56px | 5.6rem |
|
8 |
64px | 6.4rem |
|
9 |
72px | 7.2rem |
|
10 |
80px | 8rem |
|
15 |
120px | 12rem |
|
-1px |
-1px | -.1rem |
|
-0.25 |
-2px | -.2rem |
|
-0.5 |
-4px | -.4rem |
|
-1 |
-8px | -.8rem |
|
-1.5 |
-12px | -1.2rem |
|
-2 |
-16px | -1.6rem |
|
-2.5 |
-20px | -2rem |
|
-3 |
-24px | -2.4rem |
|
-4 |
-32px | -3.2rem |
|
-5 |
-40px | -4rem |
|
-6 |
-48px | -4.8rem |
|
-7 |
-56px | -5.6rem |
|
-8 |
-64px | -6.4rem |
|
-9 |
-72px | -7.2rem |
|
-10 |
-80px | -8rem |
|
-15 |
-120px | -12rem |
|
Using the spacing tokens
In order to keep spacing consistent throughout VA.gov, it is recommended you favor using the units
functions instead of hard coding pixels (or relative units) for margins and padding.
In order to access the spacing tokens in your project, you will need to import Formation’s base files into your project files. Here is how this site is doing that.
There are two ways of using the spacing tokens in your code.
Output CSS as REM units
.foo {
margin: units(5);
padding: units(2.5);
}
will compile to:
.foo {
margin: 4rem;
padding: 2rem;
}
Output CSS as PX units
.foo {
margin: units-px(5);
padding: units-px(2.5);
}
will compile to:
.foo {
margin: 40px;
padding: 20px;
}