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.