Breakpoints

• Breakpoints er kjernen i responsiv design.
• Lag mobil først design ved hjelp av media queries.
• Gjør det enkelt å skrive media queries med navngitte breakpoints eller tilpassede verdier i rem.

Det er 4 standard breakpoints tilgjengelig.

Breakpoint	Dimensjon	Pixler
mobile	opp til 48rem	~768px
tablet	fra 48rem	fra ~768px
tablet-big	fra 64rem	fra ~1024px
laptop	fra 80rem	fra ~1280px

Figma

I Figma vil du ha tilgang på 7 ulike grids for størrelser fra mobil til desktop. I desktop varianten finner vi to versjoner, i Oslo kommune har vi ulike behov derfor finner du en variant for admin-panel og nettsidene. Når siden går over 1600px anbefaler vi at sidene av griden får hvit luft/spacing. I

Disse størrelsene finnes i Figma:

Type	Dimensjon	Kolonner
Adminpanel Desktop	1600px	12
Desktop	1600px	12
Laptop	1280px	12
Tablet-big	1024px	8
Tablet	768px	8
Phablet	576px	8
Mobile	360px	4

Figma har av praktiske grunner flere grids enn CSS har breakpoints, og har varierende antall kolonner. Designes det på 576px eller 1600px, treffer du en bredde som ikke har et navngitt breakpoint i koden. Bruk bp-up() med verdien.

Variabler

Breakpointsene er tilgjengelige som et Sass map i abstracts/variables/_breakpoints.scss.

$breakpoints: (
  'mobile': 0,
  'tablet': 48rem /* ~768px */,
  'tablet-big': 64rem /* ~1024px */,
  'laptop': 80rem /* ~1280px */,
) !default;

Punkt genererer de responsive hjelpeklassene ut fra denne lista. Legger du til et breakpoint, får du klassene for det med det samme. Se Egne breakpoints og spacing-verdier.

SCSS mixin

Det finnes ulike media queries tilgjengelig for bruk ved bruk av SCSS mixin.

Min-width

Dette er den vanligste måten å bruke media queries på i Punkt sine Sass-filer.

@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;

@include bp('mobile-up') {
  // Unødvendig, tar alle skjermstørrelser
  ...;
}
@include bp('tablet-up') { /* 768px og opp */
  ...;
}
@include bp('tablet-big-up') { /* 1024px og opp */
  ...;
}
@include bp('laptop-up') { /* 1280px og opp */
  ...;
}

// Eksempel
.eksempel {
  width: 100%;

  @include bp('tablet-up') {
    width: $pageWidth;
  }
}

Enkeltbreakpoints

Det er også mulighet for å angi et enkelt område av skjermstørrelse.

@use "@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints" as *;

@include bp('mobile') { /* opp til 767px */
  ...;
}
@include bp('tablet') { /* 768px til 1023px */
  ...;
}
@include bp('tablet-big') { /* 1024px til 1279px */
  ...;
}

// Eksempel
.eksempel {
  width: 100%;

  @include bp('tablet') {
    width: $pageWidth;
  }
}

laptop er det øverste breakpointet, så det har ingen øvre grense. bp('laptop') gir derfor det samme som bp('laptop-up'). Trenger du et intervall som slutter høyere oppe, skriv media queryen selv.

Egne verdier

bp-up() tar en verdi i stedet for et navn, og lager en min-width-spørring av den. Bruk den når terskelen ikke faller sammen med et av de navngitte breakpointene.

@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/breakpoints' as *;

.eksempel {
  @include bp-up(52rem) {
    width: $pageWidth;
  }
}

Container queries

Skal en komponent svare på bredden til beholderen sin i stedet for på skjermbredden, bruk cq(). Den faller tilbake til en media query i nettlesere uten støtte.

@use '@oslokommune/punkt-css/dist/scss/abstracts/mixins/container-queries' as *;

.min-komponent {
  container-type: inline-size;
  container-name: min-beholder;

  @include cq('min-beholder', 48rem) {
    /* når beholderen er 768px eller bredere */
  }
}

Egne breakpoints og spacing-verdier

Bruker du SCSS, bestemmer du selv hva som ligger i $breakpoints og $spacing. Punkt genererer hjelpeklassene ut fra listene, så du kan legge tilbake en verdi vi har fjernet, eller legge til en terskel vi aldri har hatt.

Legg oppsettet i en egen fil, og hent den inn før Punkt:

// punkt-config.scss
@use 'sass:map';
@use '@oslokommune/punkt-css/dist/scss/abstracts/variables' as v;

v.$breakpoints: map.merge(
  v.$breakpoints,
  (
    'phablet': 36rem,
  )
);

// main.scss
@use 'punkt-config';
@use '@oslokommune/punkt-css/dist/scss/pkt';

Med map.merge beholder du hele lista vår og legger bare til dine egne verdier. Du slipper å kopiere den, og du kan ikke komme i skade for å fjerne noe komponentene våre trenger.

Legger du til et breakpoint, får du responsive klasser for typografi, grid og synlighet med det samme. Responsiv spacing følger bare med hvis du også henter inn pkt-spacing-responsive. Se Spacing.