How to start using the Design System in your project
We recommend using npm to install our Design System. This is because:
- npm makes it easier for you to stay up to date with any changes or bug fixes
- installing with npm gives you some extra options to make quick changes to a component or pattern that you’re using
What you need to do
We recommend using the latest Long Term Support (LTS) version, or a minimum of version 8.10.0.
If your project does not already have a
package.jsonfile, create one by running this command from your project’s root folder:
Install a SASS compiler. We recommend installing node-sass into your project.
npm install node-sass --save-dev
Install the Design System with this command:
npm install @scottish-government/pattern-library --save-dev
You’ll now have a copy of the Design System’s source code in your project’s
Using the Design System
SASS and CSS
A typical starting point for your main SCSS file might look something like this.
@import "/path/to/base/all-base"; @import "/path/to/forms/all-forms"; @import "/path/to/components/all-components";
You’ll always need to include the base styles in your file. They contain the typography and colour rules used by the components, and a number of helpful SASS mixins and functions used by them.
You can choose which components you want to include . You do not need to include them all if you do not want to. For example:
@import "/path/to/base/all-base"; @import "/path/to/forms/all-forms"; @import "/path/to/components/accordion/accordion"; @import "/path/to/components/breadcrumbs/breadcrumbs"; @import "/path/to/components/page-header/page-header";
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: firstname.lastname@example.org