KOMPONENTER
Spacing
Spacing brukes konsekvent på margin og padding for å oppnå konsistens på tvers av komponenter og UI.
Vårt spacing system baserer seg på standardariserte klesstørrelser fra XS til XXXL. Spacing M er default. Størrelsesskalaen baserer seg på 8 gangen som gjør det enkelt å skalere for et bredt utvalg av størrelser.
Vi skal forholde oss til denne skalaen når vi skal definere ulike avstandsituasjoner.
Navn | Sass variabel | Rem | px |
---|---|---|---|
XXS | $space-extra-small2 | 0.25 | 4 |
XS | $space-extra-small | 0.5 | 8 |
S | $space-small | 0.75 | 12 |
M (Default) | $space-medium | 1 | 16 |
L | $space-large | 1.5 | 24 |
XL | $space-extra-large | 2 | 32 |
2XL | $space-extra-large2 | 2.5 | 40 |
3XL | $space-extra-large3 | 3 | 48 |
4XL | $space-extra-large4 | 3.5 | 56 |
5XL | $space-extra-large5 | 4 | 64 |
6XL | $space-extra-large6 | 4.5 | 72 |
7XL | $space-extra-large7 | 5 | 80 |
8XL | $space-extra-large8 | 5.5 | 88 |
9XL | $space-extra-large9 | 6 | 96 |
Retningslinjer for bruk
Spacing brukes f.eks innenfor konteksten til en komponent (dvs. avstand mellom en label og et inputfelt).
Det kan også brukes til å lage en god avstand mellom komponenter i en layout (dvs. avstand mellom et inputfelt og en nedtrekksmeny). Denne avstandsskalaen kontrollerer mengden av whitespace mellom komponenter og layout.