Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Implementering af DKFDS

DKFDS kan installeres ved brug af npm pakken eller du kan download seneste version via Github.

Hent DKFDS (NPM)

Navigér til roden af dit projekt i en kommando prompt.

Installer DKFDS med følgende kommando:

npm install --save dkfds

Modulet ‘dkfds’ er nu installeret i ‘node_modules’ mappen.

Hent DKFDS (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" />

Har du brug for dit eget tema? Så læs sektionen om, hvordan du tilpasser DKFDS til dit eget tema.

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. Information omkring javascript for hver komponent finder du i kode sektionen 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});

Initiér komponenter enkeltvis

Javascript for komponenter kan kaldes enkeltvis, 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.

Javascript dokumentationen for hver komponent findes på de enkelte komponentsider under kodesektionen.

Temahåndtering

Designsystemet er udviklet med 2 forskellige temaer. Standard temaet er det neutrale tema, hvor primærfarven er grå. Denne grå farve skal overskrives, da det neutrale tema blot er ment som en skabelon til ens eget tilpassede tema. De to andre temaer er målrettet borger.dk og virk.dk.

Temaerne er simple, det eneste som er forskelligt mellem standard temaet og de to andre temaer er primærfarven og nogle få variationer i headeren (fx logo). Alt andet er ens på tværs af temaer.

Tema eksempel – borger.dk (scss):

// These variables overwrite the default values
$theme-colors: (
    "virk": (
        100: #0059B3,
        200: #004993,
        300: #003972
    )
);

$theme-color-primary: 'virk-100';
$theme-color-primary-dark: 'virk-200';
$theme-color-primary-darker: 'virk-300';
$header-portal-logo: 'logo_virk.svg';
$header-portal-logo-height: 4.8rem;
$header-portal-logo-width: 7.8rem;
$header-portal-compact-logo-width: 3.8rem;

$font-path:         '/assets/fonts/IBMPlexSans/';
$image-path:        '/assets/img';
$icons-folder-path: '/assets/svg';
@import '~dkfds/src/stylesheets/dkfds';

Browserspecifik styling tilføjes i projektet

Webpack

Bemærk, at scss filen kun indeholder basic CSS. Den indeholder således ikke browser specifik CSS.

For at tilføje dette bør SCSS filen køres igennem autoprefixer til webpack, hvor den relevante styling vil blive tilføjet til output CSS filen.

Gulp

Bemærk, at scss filen kun indeholder basic CSS. Den indeholder således ikke browser specifik CSS.

For at tilføje dette bør SCSS filen køres igennem autoprefixer til gulp, hvor den relevante styling vil blive tilføjet til output CSS filen.

Disse browsers bør defineres i autoprefixer:

[
  '> 1%',
  'Last 2 versions',
  'IE 11',
  'IE 10',
  'IE 9'
]