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. Pixel values are based on a root font size of 16 px.
| 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) |