Brekkpunkter er spesifikke bredder til en nettside hvor layouten og innholdet kan endre seg. Disse brekkpunktene definerer grensene for når 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.

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, størrelser, typografi og grafikk.

I Figma setter du opp skissene med faste bredder. Det er viktig at du lager skisser for alle breddene (brekkpunktene) som produktet ditt bruker i kode.

Kode

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

@media (min-width: 480px)
@media (min-width: 768px)
@media (min-width: 1024px)
@media (min-width: 1280px)

Desktop-first

@media (max-width: 479px)
@media (max-width: 767px)
@media (max-width: 1023px)
@media (max-width: 1279px)

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.

// Bare for md-breakpoint
@media (min-width: 480px) and (max-width: 767px)

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.

@use '@navikt/ds-tokens/dist/tokens' as *;

@media (min-width: $a-breakpoint-sm)
@media (min-width: $a-breakpoint-md)
@media (min-width: $a-breakpoint-lg)
@media (min-width: $a-breakpoint-xl)