Guide for developers

Dependencies

To use the design system, you must use Node.js version 14.21.1 in your project and NPM to manage packages.

To install the package you will need access to our NPM registry. If you can't access this, please contact us on the #design-system Slack channel.

You will also need to install the following third-party packages in your project:

• bootstrap: 4.5.3
• @fortawesome/fontawesome-free: 5.13.0

Sass partials provide the foundations, components and global elements to your project. As a result, you will need to use a Sass compiler in your development environment. You can either use the Sass NPM package or, if your project is also using Angular, use the compiler it provides.

Installation

To install the design system you will first need to set NPM to use our private registry.

npm set registry https://npm.parliament.uk

Then install the design system package itself.

npm install @pds-design-system/core@0.8.0

SCSS

To use the design system styles, you must import the dependencies along with the global design system styles into the main Sass entry point in your project.

@import "path/to/node_modules/bootstrap/scss/bootstrap.scss";
@import "path/to/node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
@import "path/to/node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
@import "path/to/node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "path/to/node_modules/@pds-design-system/core/lib/scss/styles.scss";

JS

To enable JavaScript capabilities you will also need to import the global JS dependencies in your JS entry point.

import "@fortawesome/fontawesome-free/js/all";

Fonts

The design system NPM package and its dependencies also include required custom fonts.

You must copy these assets from the node_modules directory to an appropriate location in your project structure during the build process. How you do this depends on your project architecture so the process is not covered in this guide.

National

National is the primary font used in the design system. You must use it for all text.

You can find the files for the design system's National font in the directory path/to/node_modules/@pds-design-system/core/lib/fonts.

Once you have copied these files to a location within your project structure you need to update the $font-path variable in your main Sass entry point. This declaration must come before the SCSS imports described above.

$font-path: "/fonts";

Font Awesome

Font Awesome is only used for icons. You must only use it in components that already include icons, for example cards.

You can find the files for the Font Awesome font at path/to/node_modules/@fortawesome/fontawesome-free/webfonts/*.woff2.

The Font Awesome SCSS expects the fonts it depends on to be in the directory ../webfonts, relative to the compiled CSS output. You can override this location in the same way as with the National font above.

$fa-font-path: "/fonts";