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);
}