Spacing
This page is under construction
In web development, use of space plays a key role in creating usable and responsive user experiences. This page describes how Triton uses spacing.
Note: We also have a component to enable spacing, the Triton Gap component.
Sizes
Size | Rem | Default px |
---|---|---|
tiny | 0.25rem | 4px |
mini | 0.5rem | 8px |
small | 0.75rem | 12px |
base | 1rem | 16px |
moderate | 1.25 | 20px |
medium | 1.5rem | 24px |
large | 2rem | 32px |
xlarge | 3rem | 48px |
xxlarge | 4rem | 64px |
xxxlarge | 8rem | 128px |
How to use
Triton Component Library in use will add all common sizes as rem to the :root
with the prefix --space-
.
To use it in your project pass in the CSS property (Variable) e.g.
.space-between {
margin: 0rem var(--space-medium);
}