Kom i gang
Oppsett
Kom i gang med Designsystemet i kode
Følg disse stegene for å komme i gang med bruk av Designsystemet i kode første gang.
1. Installer pakkene
Designsystemet består av flere kodepakker som du kan fritt velge mellom, avhengig av dine behov og preferanser.
Vi anbefaler at du starter med @digdir/designsystemet-web og @digdir/designsystemet-css, som er de mest grunnleggende pakkene for å komme i gang.
2. Importer Javascript
Importer @digdir/designsystemet-web i din hoved JavaScript fil.
Dette vil registrere alle web-komponenter og observers globalt, så du trenger bare å gjøre dette en gang.
Importer @digdir/designsystemet-react ved bruk av komponenter.
3. Importer CSS
Importer @digdir/designsystemet-css.
Les mer om CSS.
Merk: background og color blir satt på <body>
background og color blir automatisk definert på body-elementet og ellers der data-color-scheme blir satt, slik at vi ivaretar universell utforming (w3.org) og får samme font og farge på tvers.
Dette kan lett overstyres i ditt eget tema, eller i din globale CSS fil.
4. Importer temaet
Designsystemet er laget for å være tematiserbart, og det er derfor viktig at du importerer ditt tema etter at du har importert @digdir/designsystemet-css.
Bygg ditt eget tema eller bruke standardtemaet; @digdir/designsystemet-css/theme.
5. Bruk
Nå er du klar til å bruke Designsystemet i kode!
Alle komponenter har egen side i komponent-dokumentasjonen, vi anbefaler at du leser gjennom disse for å se hvordan du kan bruke komponentene.
Det er også anbefalt at du leser gjennom tilgjengelighets-sida.
- Bruk
data-color-scheme="light | dark | auto"for å sette dark/light mode. - Bruk
data-size="sm | md | lg"for å sette størrelse på komponentene. - Bruk
data-colorfor å sette farge på komponentene som du har definert for ditt tema.
Typescript
Designsystemet tilbyr typesikkerhet for flere data-attributter.
Installer type pakken og legg til typefilene i tsconfig.json for å få tilgang til disse.
Font
Komponentene er designet og utviklet med Inter fonten (github.com), så variasjoner kan forekomme dersom du bruker en annen font.
Dersom du velger å installere fonten på en annen måte enn altinncdn.no, husk å inkludere fontvektene 400, 500 og 600.
Legg til Inter fonten (valgfritt)
Legg til <link> taggen under i <head>, og sett font-family til Inter i din globale css fil.
Du kan bruke denne koden for å legge til fonten i <head>:
Konfigurasjon av fonten
Vi anbefaler sterkt at du legger til følgende i din globale CSS fil.
font-feature-settings legger til en hale på små L'er.
Polyfill
Designsystemet bruker popover (mozilla.org) i enkelte komponenter. Dette apiet er klassifisert som Baseline: Newly available (mozilla.org) fra april 2024, da Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en polyfill for å sikre at popover fungerer for alle.