Designsystem.dk

Owned by Mogens Kjeldsen (Unlicensed)
Last updated: Jun 12, 2023
2 min read

The external web part of OS2valghalla will use Det Fælles Designsystem - Forside | Det Fælles Designsystem - for the design.

On meetings with @Jesper Borup, @Dan Nobel, @Anne-Marie Mikkelsen and @Mogens Kjeldsen (Unlicensed) it has been discussed how to implement Det Fælles Designsystem.

The guide to implement is as follows:

Kodefrihed under ansvar

Vi har bestræbt os på at lave et designsystem, der er let at anvende og kode med, men vi vil ikke tvinge nogen væk fra deres favorit (JavaScript) framework. Så længe det visuelle design (CSS) består som beskrevet i systemet, så er du velkommen til at udnytte de teknologier du finder bedst, men giv vores kode et kig, den er lige til at gå til.”

Decided implementation model

As stated on Development packages Angular is the Selected Frontend JavaScript library and Angular Material has been chosen as components and visualization library for Angular. Be aware that Angular Material is for the administration part of OS2valghalla.

It has been decided on Mar 13, 2023 to implement Det Fælles Designsystem on external web according to the guide. This means that the visuel design - the CSS - components from Det Fælles Designsystem will be used. We won’t aim to implement the HTML and JavaScript from Det Fælles Designsystem in order to keep needed developer time at a minimum.

It is important to stress that this means it will be the actual CSS from Det Fælles Designsystem and not an “imitated” version of it. It is therefore important that the components use the exact CSS as provided by Det Fælles Designsystem’s CSS framework (dkfds-components/dist at master · detfaellesdesignsystem/dkfds-components) and ensuring that the Angular Material CSS does not cause any overlap or conflicts.

In the light of an urgent time pressure in the project, it has been decided on Jun 8, 2023 that the CSS from Det Fælles Designsystem will be used as far as possible, but when conflicts arise with Angular in for example a more complex component like a table, it is accepted to style them to look like Det Fælles Designsystem even though it won’t be the actual CSS. Precio Fishbone har analyzed parts of borger.dk and virk.dk and also found similar code examples there.