Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Hent kodepakken
Kodepakken kan installeres ved brug af NPM-pakken eller via GitHub som zip-fil.
Hent via NPM
Vi anbefaler som udgangspunkt, at kodepakken hentes via NPM, hvor kodepakken går under navnet DKFDS.
Navigér til roden af dit projekt i en kommandoprompt og installer DKFDS med følgende kommando:
npm install --save dkfds
Modulet ‘dkfds’ er nu installeret i ‘node_modules’ mappen.
Hent via GitHub (zip)
Hent nyeste version som zipfil på GitHub, og pak indholdet ud i dit projekt.
Inkludér CSS
Virk tema
<link type="text/css" rel="stylesheet" href="[sti til DKFDS mappen]/dist/css/dkfds-virkdk.css" />
Borger.dk tema
<link type="text/css" rel="stylesheet" href="[sti til DKFDS mappen]/dist/css/dkfds-borgerdk.css" />
Eget tema
Har du brug for dit eget tema? Så læs, hvordan du tilpasser koden under Justering af tema og stylesheets.
Inkludér JavaScript
JavaScript kan inkluderes med et script tag eller importeres ind i en eksisterende js fil.
<script>
tag
Indsæt følgende script tag før</body>
<script src='[sti til DKFDS mappen]/dist/js/dkfds.js'></script>
Importer modulet i en .js fil
import * as DKFDS from "dkfds";
Init
Når DKFDS er inkluderet kan du køre funktionen DKFDS.init();
ved dom ready, eller hvornår det nu end passer i dit projekt.
DKFDS.init();
aktiverer javascript for alle komponenter, men man kan også tilføje javascript specifikt for hver komponent, hvis man foretrækker denne metode. Hvis man kun har få komponenter, hvor javascript er nødvendig eller hvis man har meget fokus på performance, kan dette være værd at undersøge. Information omkring javascript for hver komponent finder du i kodesektionen for den specifikke komponent.
Eksempel på init:
document.addEventListener("DOMContentLoaded", function(){
DKFDS.init();
});
Initiér alle komponenter i et bestemt område
Det er muligt at bruge DKFDS.init() i bestemte områder af din side ved at medsende parameter.
I nedenstående eksempel vil vi gerne initiere alle komponenter i headeren. Det vil sige navigation, alle overflow menuer samt eventuelle modaler i headeren. Komponenter uden for headeren vil ikke blive berørt.
let $header = document.getElementsByTagName('header')[0];
DKFDS.init({'scope': $header});
Vejledning til integration på borger.dk og Virk
Det Fælles Designsystem er som udgangspunkt udviklet til selvbetjeningsløsninger på borger.dk og Virk. For at integrere din løsning på borger.dk eller Virk, kan du her få vejledning til, hvordan du integrerer din løsning på platformene. Hvis du anvender designsystemet til andre løsninger, kan du se bort fra dette.