User interface

• Design patterns
• Templates
• Styles

Design patterns

The application implements the GOV.UK design system. Visit the project website https://design-system.service.gov.uk for more information and documentation.

Templates

All templates for rendering the user interface are located in the views directory.

Components

Nunjucks

The application uses the Nunjucks templating language to implement the GOV.UK design system. Visit the website https://mozilla.github.io/nunjucks for more information and documentation.

GOV.UK design system components

GOV.UK provide Nunjucks implementations for all of the design system components. When developing templates it is advisable to always implement the Nunjucks version of a component i.e. avoid using the plain HTML implementation where possible. This abstracts component implementation detail away from the application and facilitates upgrading the GOV.UK design system.

Custom components

Custom components should be created as macros inside the /views/macros directory. The convention is to namespace a custom macro with htbhf- allowing easy distinction between GOV.UK and custom components. e.g:

// views/macros/htbhf-my-component.njk

{% macro htbhfMyComponent(params) %}
  <div class="c-htbhf-my-component">
    ...
  </div>
{% endmacro %}

Styles

Custom styles are located in the assets/sass directory

CSS structure

The application implements a rough ITCSS structure for CSS. As most styles are implemented by the GOV.UK design system only the required directories have been implemented.

CSS namespacing

CSS classnames should implement a version of BEM, using prefixes and an htbhf- namespace to identify the purpose of the class e.g:

// sass/components/_my-component.scss

.c-htbhf-my-component {
  ...
} 

Compiling styles

The application implements a basic pipeline for building custom styles by compiling SASS to CSS.

Styles are compiled by default during the application build process (npm run build). To build any custom styles run:

npm run build:sass

To watch for changes to SASS files run:

npm run watch:sass