Installation
The npm package for the Design System code has been renamed from @scottish-government/pattern-library to @scottish-government/design-system. Please update your projects to use the new package.
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
- there are some easy component customisation options available to you if you compile the CSS yourself
What you need to do
-
Install Node.js.
We recommend using the latest Long Term Support (LTS) version.
-
If your project does not already have a
package.jsonfile, create one by running this command from your project’s root folder:npm init -
Install a SASS compiler. We recommend installing Dart Sass into your project.
npm install sass --save-dev -
Install the Design System with this command:
npm install @scottish-government/design-system --save-devYou’ll now have a copy of the Design System’s source code in your project’s
node_modulesfolder.
Using the Design System
CSS and Sass
A precompiled CSS file containing the styles used by the Design System is included in the Design System’s npm package at /dist/css/main.css.
The Design System’s components are also provided as SCSS files. See the documentation about CSS and Sass for more information about how to work with the Design System's SCSS.
JavaScript
A precompiled JavaScript file containing all of the scripts for Design System components is provided in the Design System’s npm package at /dist/scripts/design-system.js.
See the documentation about JavaScript for more information about how to use the Design System's JavaScript in your projects.
Feedback, help and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback