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
linkelement in your HTMLheadthat 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.
Development
Build doc site from source
npm run build
Builds documentation into index.html and copies a new version of designsystem.css into the assets directory.
npm run start
Opens index.html in a Firefox browser (if one is installed).
Publish NPM
Create a new release in Github to publish an updated NPM package. Details are available in the "Npm" section of SDFI ITU's wiki.
Acknowledgements
Design System CSS is heavily inspired by Pico.css