Gå til hovedinnhold
TOKENS

Breakpoints

Breakpoints er de punktene der designet "bryter" eller tilpasses for å passe til ulike skjermstørrelser, fra små mobilenheter til store skjermer.

Ved å bruke våre breakpoints kan du enkelt tilpasse ditt design for å sikre at innholdet presenteres på en optimal måte på tvers av ulike enheter og skjermstørrelser.

Om du ønsker mer hjelp til å lage responsive løsninger kan du bruke vår grid-pakke.

NavnVerdi
800px (50rem)
1200px (75rem)

I vår utils-pakke finnes det en mixin for bruk av våre breakpoints:

@mixin for-desktop {
  @media screen and (min-width: #{t.$breakpoints-large}) {
    @content;
  }
}

@mixin for-large-desktop {
  @media screen and (min-width: #{t.$breakpoints-extra-large}) {
    @content;
  }
}

Eksempel på bruk:

@use '@entur/utils/dist/breakpoints.scss';

.main-content{
    padding: 16px;

    @include for-desktop {
        padding: 24px;
    }
}
Rediger denne siden på Bitbucket