The design system v2 (npm) supersedes this project. Consider moving your project to rely on the newer design system instead of this one.
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.
Make sure that Node.js (version 14 or newer) is installed. The package manager npm will be included.
git clone https://github.com/Altinn/DesignSystem.git
Navigate to the root of the code and run:
npm install
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 https://127.0.0.1:3000 and automatically rebuild if the source code is changed.
The /dist folder contains css, javascript, fonts and images for distribution via the npm package.
To update the /dist folder
npm run dist
To update the live version of the design system
npm run update:gh-pages
then commit and push the changes to git.
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