Installation

We recommend using npm to install the Design System and compiling the CSS from the source. This is because:

• npm makes it easier for you to stay up to date with any additions or bug fixes
• compiling the CSS yourself makes it easier to customise the Design System if you need to

What you need to do

1. Install Node.js.

   We recommend using the latest Long Term Support (LTS) version.

2. Create a package.json file if your project does not already have one. Run this command from your project's root folder:

   npm init

3. Install a SASS compiler. For example, Dart Sass

   npm install sass --save-dev

4.  Install the Design System with this command:

   npm install @scottish-government/design-system --save-dev

   You’ll now have a copy of the Design System’s source code in your project’s node_modules folder.

Using the Design System

CSS and Sass

A CSS file containing all the Design System's styles is in the Design System’s npm package at /dist/styles/main.css.

The Design System’s components are also provided as SCSS files. See the documentation about CSS and Sass to learn about how to work with the Design System's SCSS.

JavaScript

A JavaScript file containing all the Design System's scripts is in the Design System’s npm package at /dist/scripts/design-system.js.

See the documentation about JavaScript to learn how to use the Design System's JavaScript in your projects.