Brekkpunkter

NyOPPDATERT 3. mars 2023

Brekkpunkter er spesifikke punkter på en nettside hvor layouten og innholdet reagerer på endringer i skjermbredde. Disse brekkpunktene definerer grensene for hvor designet skal justeres for å optimalisere brukeropplevelsen på ulike enheter og skjermstørrelser.

Brekkpunktene er mest brukt til å bestemme layoutendringer, som for eksempel å endre antall kolonner i et grid, endre størrelsen på tekst og bilder, eller skjule/vise bestemte elementer på siden. Brukeropplevelsen kan variere avhengig av enhet og skjermstørrelse, og brekkpunktene bidrar til en mer bedre og optimalisert opplevelse på tvers av disse.

Brekkpunktene

Nivå	Start	Slutt
xs (extra small)	0 px	479 px
sm (small)	480 px	767 px
md (medium)	768 px	1023 px
lg (large)	1024 px	1279 px
xl (extra large)	1280 px	∞ px

Design

Som designer vil brekkpunkter la deg tilpasse designet til ulike skjermstørrelser og enheter. Overgangen fra et nivå til et annet gir deg muligheten til å endre på layout og antall kolonner en side har.

I Figma blir skissene satt opp med faste bredder. Det er viktig at du lager skisser som treffer alle nivåene som tjenesten bruker i kode.

Tips

På nav.no (åpne og innlogga sider) er mesteparten av besøkene med små skjermer. Derfor er det lurt å starte med skisser på nivå XS.

Kode

Breakpoint-tokensaksel.nav.no

Bruk i media-queries

Breakpoint-tokens kommer i 2 varianter: sm og sm-down. Down-versjon er ment for bruk i "dekstop-first" media-queries, og vanlig token i "mobile-first"

Mobile-first

Desktop-first

Spesifikke brekkpunkt

Noen ganger ønsker man å løse noe for et spesifikt brekkpunkt. Da kan man bruke en kombinasjon av min-width og max-width.

Variabler i media-queries

CSS custom properties støtter enda ikke bruk av variabler i media-queries, men for brukere av Scss fungerer dette. Man må også da importere Scss-variablene fra @navikt/ds-tokens direkte.