The GOV.UK Design System launched on 22 June 2018
The Government Digital Service (GDS) is retiring GOV.UK Elements following the launch of the GOV.UK Design System. GOV.UK Elements will remain available to you if you are currently using it but will no longer be maintained. GDS will only roll out major bug fixes and security patches.
For new projects, you can get all of the information about GOV.UK styles, components and patterns in the GOV.UK Design System.
GOV.UK elements is three things:
- An online design guide, explaining how to make your service look consistent with the rest of GOV.UK.
- An example of how to use the code in the GOV.UK template and the GOV.UK frontend toolkit.
- An npm package of the Sass files.
GOV.UK elements guide
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@example.com:alphagov/govuk_elements.git
Install all dependencies
Run the app
Go to localhost:3000 in your browser.
To check the whole codebase, run:
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.
Install Wraith and its dependencies.
gem install wraith brew install phantomjs brew install imagemagick
Take a baseline of the current version.
On master run:
wraith history config.yaml
- 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
You can find contribution guidelines in CONTRIBUTING.md