@dataforsyningen/css NPM

Design System CSS

Design System CSS (DSCSS) is an implementation of SDFIs official design guide.

The design system guide is available on Figma. (Requires SDFI login)

The system is a single CSS file and useful accompanying font files that you can embed in your web project for at SDFI branded look and feel.

Get started with the official documentation here!

Usage

Option 1 - Bundle with your JS/CSS

Presently, you can install DSCSS via NPM and bundle it with your other frontend assets.

Install package
```
npm i --save @dataforsyningen/css
```
Import DSCSS
Javascript
```
import "@dataforsyningen/css";
```
CSS
```
@import "@dataforsyningen/css";
```
Your bundler should accept SASS/SCSS and know how to bundle it properly. You might need to install and set up a loader depending on your build setup.

Option 2 - Refer assets in HTML `<head>`

Link to designssytem.css CSS directly into your HTML's <head>.

Download designsystem.css
Add a link element in your HTML head that refers to the CSS file:

<!doctype html>
<html lang="da">
  <head>
    ...

    <link rel="stylesheet" href="/somewhere/designsystem.css">

    ...
  </head>

Typography

The Design System assumes you host the "Roboto" and "Source Code Pro" fonts yourself and have them available in a ./fonts directory related to the path of your designsystem.css file.

So if your CSS file has path /somewhere/somewhere/designsystem.css, your font files should be at /somewhere/somewhere/fonts/

Font files are included in assets/fonts along with font.css file to give you an example on how to use @font-face to make custom font includes.

Alternatively, you can include the fonts from Google Fonts, but beware of Google using the font files to track users.