Spacing
Spacing is used intentionally throughout Placer Toolkit to create predictable rhythm and meaningful proximity. These properties use rem units in order to scale proportionately with the root font size.
You can use --pc-spacing-scale to increase or decrease all spacing by the scale you provide at once. By default, this multiplier is 1.
The raw size without the scale is provided for better readability. Font size values in px are based on a root font size of 16px.
| Custom property | Default value | Example |
|---|---|---|
--pc-spacing-xxxs | 0.0625rem (1 px) | |
--pc-spacing-xxs | 0.125rem (2 px) | |
--pc-spacing-xs | 0.25rem (4 px) | |
--pc-spacing-s | 0.5rem (8 px) | |
--pc-spacing-m | 0.75rem (12 px) | |
--pc-spacing-l | 1rem (16 px) | |
--pc-spacing-xl | 1.25rem (20 px) | |
--pc-spacing-xxl | 1.75rem (28 px) | |
--pc-spacing-xxxl | 2.25rem (36 px) | |
--pc-spacing-xxxxl | 3rem (48 px) | |
--pc-spacing-xxxxxl | 4.5rem (72 px) |