Gå til sidens indhold

Kom i gang

Til udviklere

FDS er opdelt i to projekter:

Installation

Projektet er på npm og kan installeres ved at skrive følgende i en kommando-prompt:

npm install --save dkfds

Modulet 'dkfds' er nu installeret i 'node_modules' mappen.
Du kan enten benytte source-filerne i 'src/'-mappen eller de kompilerede filer i 'dist/'-mappen.

Inkluder DKFDS Components i dit projekt

Den hurtigste måde at få inkluderet FDS' css i dit projekt er at tilføje følgende link-tag:

  <link type='text/css' rel='stylesheet' href='[path to dkfds folder]/dist/css/dkfds.css'>

For at inkludere JavaScript skal du tilføje følgende tag i slutningen af body-tagget:

  <script src='[path to dkfds folder]/dist/js/dkfds.js'></script>

Note til Webpack

For at inkludere stylingen skal du tilpasse disse variabler:

  $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 '../node_modules/dkfds/dist/scss/dkfds';

Browserspecifik styling tilføjes i projektet

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.

For at inkludere JavaScript via webpack skal du tilføje følgende linje i din main.js fil:

  import "dkfds";

Note til gulp

Browserspecifik styling tilføjes i projektet

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 stylingen 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";