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 fritt kan velge mellom, avhengig av behov og preferanser. Du kan bruke pakkene sammen, eller bare plukke ut de delene som gir deg fart, samtidig som du beholder friheten til å kode selv der du ønsker det.
Vi anbefaler at du starter med @digdir/designsystemet-web og @digdir/designsystemet-css. Du kan også bruke @digdir/designsystemet-web uten @digdir/designsystemet-css hvis du allerede har egen styling, eller bare bruke CSS-pakken hvis du håndterer interaktivitet selv.
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.