Spacing og layout i Jøkul

Lær hvordan Jøkul sitt spacing-system og Flex-komponenten lar deg bygge konsistente layout uten egendefinerte verdier.

Kategori: Design
Publisert: 04.03.2026
Lesetid: 2 min.

Vet du hva som er den vanligste kilden til avvik mellom design og implementasjon? Det er ikke farger. Det er ikke typografi. Det er spacing. Designeren sier 16px mellom elementene, utvikleren skriver margin: 15px fordi det "ser likt ut". Multiplisert over hundre komponenter og ti team over to år, og du har et grensesnitt som aldri helt stemmer. Jøkuls spacing-system er svaret på det problemet.

Skalaen — ni navngitte trinn

I stedet for vilkårlige piksel-verdier bruker Jøkul navngitte trinn. Navnet er kontrakten:

3xs — 2px: Mikroavstand mellom tett relaterte elementer, f.eks. ikon og etikett inline.
2xs — 4px: Indre padding i kompakte komponenter som tags og badges.
xs — 8px: Standard innvendig padding i knapper og inndatafelter.
s — 12px: Avstand mellom relaterte elementer i samme gruppe.
m — 16px: Basisenheten. Avstand mellom uavhengige elementer i en seksjon.
l — 24px: Avstand mellom seksjoner på samme side.
xl — 32px: Avstand mellom store blokker eller kortkomponenter i en grid.
2xl — 48px: Vertikal rytme mellom innholdsrike seksjoner.
3xl — 64px: Heroavstand — kun mellom primære sideblokker på landingssider.

Flex-komponenten — spacing uten egendefinerte verdier

Flex-komponenten er Jøkuls svar på "hvordan distribuerer jeg elementer uten å skrive CSS?". Den tar spacing-verdiene fra skalaen direkte som props:

<Flex gap="m" direction="row" wrap="wrap" align="center">

Ingen magiske tall. Ingen inline styles. Bare kontrakt med systemet.

Grid vs. Flex — det jeg alltid glemmer

Flex — én dimensjon (rad eller kolonne)Grid — to dimensjoner (rad OG kolonne)Flex — dynamisk innholdGrid — fast rutenettstruktur

Flex er best for navigasjonslinjer, kortrekker og knappgrupper der innholdets størrelse varierer.
Grid er best for sidelayout, datatabeller og gallerier med eksplisitt rad- og kolonnestruktur.
Nest gjerne Flex inne i Grid-celler for å justere innholdet i hver celle.

data-size="compact" på et foreldreelement reduserer spacing og typografistørrelser for alle barn-komponenter automatisk. Perfekt for dashbord og tabeller med høy informasjonstetthet.

CSS Logical Properties — fremtidssikker spacing

Jøkul bruker CSS Logical Properties internt for å støtte høyre-til-venstre-språk. I stedet for margin-left brukes margin-inline-start — det speiles automatisk i RTL-kontekster.

Vi anbefalte teamene å gjøre det samme i egne komponenter. Nettleserstøtten er utmerket i alle evergreen-nettlesere, og du fremtidssikrer layouten uten ekstra arbeid når en dag dere trenger å støtte arabisk eller hebraisk:

/* Unngå fysiske egenskaper */
.element { margin-left: 1rem; }

/* Bruk logiske egenskaper */
.element { margin-inline-start: 1rem; }

Spacing er den typen designbeslutning som skalerer stille i bakgrunnen. Når alle bruker de samme navngitte trinnene, forsvinner avvikene av seg selv — ikke fordi folk er mer nøye, men fordi systemet gjør det vanskelig å ta feil.