altinn-designsystem

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 6 or newer) is installed. The package manager npm will be included.

Install bower and gulp:

npm install -g bower
npm install -g gulpjs/gulp-cli

If you are going to work on the design system, you'll need to install these packages too:

npm install -g gifsicle
npm install -g optipng-bin
npm install -g pngquant-bin

Setup

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

Navigate to the root of the code and run:

npm install

Also make sure the project in styleguidekit-assets-altinn is built. This requires Ruby to be installed in order to install the sass gem. For Windows users, see Ruby

cd styleguidekit-assets-altinn
gem install sass # run with sudo if you get an error
npm install
bower install
gulp
cd ..

Run

This will take a couple of minutes...

npm start

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