@dataforsyningen/css v3.11.0
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 HTMLhead
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.
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
10 months ago
10 months ago
6 months ago
6 months ago
10 months ago
6 months ago
1 year ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago