Kode

Implementering af DKFDS

FDS er opdelt i to projekter:

Installation

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 tema

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

<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 skal du køre funktionen DKFDS.init(); ved dom ready, eller hvornår det nu end passer i dit projekt.

Eksempel:

document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
  DKFDS.init();
});

For yderligere JavaScript funktioner, se under hver komponent.

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, giving the style the borger.dk theme
$color-primary:               #44831E;
$color-primary-medium:        #3C5C22;
$color-primary-dark:          #233614;

.header {
    .portal-header{
        background-color: #f1f1f1;
        .logo{
            background-image: url($image-path + '/logo-borgerdk.svg');
            height: 4.8rem;
        }
    }
}

$font-path:         '~dkfds/src/fonts/IBMPlexSans/';
$image-path:        '~dkfds/src/img';
$site-image-path:   '~dkfds/src/img';
$icons-folder-path: '~dkfds/src/img/svg-icons';
@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, 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, 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',
]

Fix for bug i Microsoft Edge og Internet Explorer

En bug i Edge og Internet Explorer gør at list-style-type:none bliver ignoreret, hvis den bliver sat mens en liste er skjult. Du kan undgå dette ved at tilføje css direkte i head sektionen.

  <style>
    /* Fixes Edge bug, where list-style-type:none is ignored if it's set after li has been hidden. */   
    ul {
      list-style-type: none;
    }
  </style>

DKFDS Plugins

Du skal kun inkludere styling (CSS eller SCSS) fra dkfds-plugins projektet.

Der er i øjeblikket lavet temaer til følgende:

dkfds-plugins projektet er tilgængeligt via npm og du kan installere det ved at skrive følgende i en kommando-prompt:

npm install dkfds-plugins --save

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

Inkluder derefter temaerne enten som css direkte:

<link rel="stylesheet" href="[path-to-plugins-project]/dist/css/dkfds-datatables-theme.standalone.min.css">

Eller inkluder temaerne i SCSS (Bemærk, at du først skal importere DKFDS):

@import "~dkfds-plugins/dist/scss/dkfds-datatables-theme";