Installing the Design System Install with npm

The ONS Design System is available as an npm package  . Every release is published to npm and provides a quick way to install everything you need. Inside the package are the following:

• components – each component contains a macro file that can be used in a Nunjucks-compatible application
• Sass files – all Sass rules are available to import, either everything or specific parts like a single component or the Sass that controls layout
• CSS files – compiled CSS of all components and layout styles
• JS files – bundled JavaScript modules
• fonts, images, favicons – static assets used in components and templates
• base page template – a Nunjucks template that contains the core markup and components needed to create an ONS service

To install the ONS Design System npm package you will need to install node.js  and you will need a package.json  file in the root of your project.

Then run:

<pre class="ons-patternlib-example__pre  language-markup" tabindex="0"><code class="ons-patternlib-example__code ons-  language-markup">npm install @ons/design-system</code></pre>

This will install the latest version of @ons/design-system in your node_modules folder.

The next step is to get some styles, scripts and other assets working in your project.