Installing the Design System Using Nunjucks

The ONS Design System uses Nunjucks  as its templating language. All components and templates are also compatible with applications that use Jinja  .

How to set up Nunjucks

npm package

We recommend installing the design system through the npm package  we publish on each release.

In your Nunjucks configuration you’ll need to add node_modules/@ons/design-system/components and node_modules/@ons/design-system/layout to your search paths.

Zip file

You can get all components and templates from a zip file that is created with each design system release  . You need to create a script that gets the zip and unpacks the contents. For development, the script could run manually, and the folders added to a .gitignore file. In production, it would need to be run within a build process as part of a continuous integration task.

If you are using Jinja, your script will need to copy the components and layout folders from the unzipped download into your templates folder. This is where Jinja looks for templates as multiple search paths cannot be specified.

The zipped templates have already got the content delivery network (CDN) release version and paths set based on the version of the templates you have downloaded.

How to use Nunjucks with components

Each component contains examples and any context-specific variants. You can copy the Nunjucks code directly from the examples.