Design System for the NIHR

Install with npm

npm is a JavaScript package manager that handles the installation and updates of third-party software, including the Design System for the NIHR.

Requirements

On your command line, from your project's root directory, run npm install @nihruk/design-system.

This installs the Design System's source and distribution code into your project, where you can import only those parts you need. 

@import "~@nihruk/design-system/dist/design-system.bundle.css";

import "~@nihruk/design-system/dist/design-system.bundle.js";

Bundling your application

Before your application can be published for the web, it must be bundled. The Design System uses SCSS and newer EcmaScript features that must be transpiled before use. Additionally, bundlers such as Browserify, gulp, or Webpack are often able to skip parts of your code base and its dependencies that are not needed in your bundles.

How to choose and configure a bundler depends on your team and your project, and is outside the scope of the Design System. For example, the Design System documentation site you are currently reading was bundled using Bootstrap's Webpack configuration guide.

When to install using npm

You should install the Design System using npm if you need to:

  • reduce the bundle size and bandwidth usage
  • override SCSS variables
  • host all assets yourself

Alternative package managers

Any package manager that uses the npm Registry is supported, but exact instructions may vary.