Altinn Design System

This design system is based on Pattern Lab code and atomic design principles. The repo contains the source code and configuration for building and running the design system locally and for creating distribution files.

You can always test the live version of the latest build, or download the altinn-designsystem npm package.

Dependencies

Make sure that Node.js (version 14 or newer) is installed. The package manager npm will be included.

Setup

git clone https://github.com/Altinn/DesignSystem.git

Navigate to the root of the code and run:

npm install

Run

The design system is divided into three projects: Altinn.no (Infoportal and Portal), Altinn Digital and common.

To run the design system for altinn.no

npm run start:altinn

To run the design system for Altinn Digital

npm run start:altinndigital

To run the design system for components that are common to all projects

npm run start:common

The command will build and run the design system locally on http://127.0.0.1:3000 and automatically rebuild if the source code is changed.

Distribution

The /dist folder contains css, javascript, fonts and images for distribution via the npm package.

To update the /dist folder

npm run dist

GitHub pages

To update the live version of the design system

npm run update:gh-pages

then commit and push the changes to git.

Source code

The source code is structured as follows:

###/_patternlab PatternLab specific files: patterns, meta, data and config.

Each project has its own folder. Common components should only be changed in the /common folder, where they will automatically be copied to all other projects. Changes to common components anywhere else will be automatically overwritten.

###/css Changes to css should be made in the scss files under /css/scss. The css files will be automatically updated.

###/fonts

###/images

###/js JavaScript files are divided into /production and /prototype and bundled automatically. To add new files to a bundle update the config under /scripts/build-config.json