The GOV.UK Design System launched on 22 June 2018

GOV.UK Elements:

• is no longer maintained
• will only be updated for major bug fixes and security patches
• does not meet the Web Content Accessibility Guidelines (WCAG 2.1 level AA) accessibility standard

This framework will remain available in case you’re currently using it. To help your service meet accessibility requirements, you should use the GOV.UK Design System. You can migrate to the Design System from GOV.UK Elements.

GOV.UK elements ·

GOV.UK elements is three things:

1. An online design guide, explaining how to make your service look consistent with the rest of GOV.UK.
2. An example of how to use the code in the GOV.UK template and the GOV.UK frontend toolkit.
3. An npm package of the Sass files.

GOV.UK elements guide

https://govuk-elements.herokuapp.com/.

Using govuk-elements-sass

Installation and usage instructions can be found in the govuk-elements-sass README.

Running this site locally

If you would like to clone the repository and run it locally, you will need Node.js (at least version v0.10.0).

Clone this repository

git clone [email protected]:alphagov/govuk_elements.git

Install all dependencies

npm install

Run the app

npm start

Go to localhost:3000 in your browser.

Running tests

To check the whole codebase, run:

npm test

Linting

GOV.UK lint

GOV.UK elements uses govuk-lint, which uses scss-lint as its scss linter.

Standard JavaScript

GOV.UK elements uses standardjs, an opinionated JavaScript linter. All JavaScript files follow its conventions.

Both linters run on CI to ensure that new pull requests are in line with them.

Running Wraith to compare changes

GOV.UK elements uses Wraith so that regressions can be easily spotted.

This needs to be run from the Wraith directory /tests/wraith and some dependencies need to be installed on the local machine first.

1. Install Wraith and its dependencies.

    gem install wraith
    
    brew install phantomjs
    
    brew install imagemagick
   

2. Take a baseline of the current version.

On master run:

    wraith history config.yaml

3. Switch to your feature branch and make changes.

On your feature branch run:

    wraith latest config.yaml

Releasing a new version

Follow the instructions in CONTRIBUTING.md.

Pattern libraries using GOV.UK elements

Here are examples of service-specific pattern libraries using GOV.UK elements.

• Rural Payments style guide | Source Code
• Land Registry pattern library | Source Code
• Digital Marketplace frontend toolkit | Source Code

Contributing

You can find contribution guidelines in CONTRIBUTING.md