GOV.UK Elements is two 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 front end toolkit
The guide can be seen at: http://govuk-elements.herokuapp.com/.
GOV.UK Elements is still in alpha so the CSS might change but you're welcome to use whatever form of it you feel fits your project. Please use GitHub's watch feature to keep an eye on what may change.
It can be used as a sensible base of front end code. Choose the Sass files you need to build on top of those provided by the front end toolkit. For example, add grids, typography and additional modules as you need them.
As you get a better understanding of the user needs for your project you should be iterating this code so it best fits the resulting requirements.
Here are examples of service-specific pattern libraries using GOV.UK Elements.
There is a Hackpad for feeding back on the design patterns contained in elements:
https://designpatterns.hackpad.com/GOV.UK-elements-feedback-sKrDyQxcfA2
The code in GOV.UK Elements is built on top of the GOV.UK front end toolkit.
If you want to suggest changes or raise bugs on code from the toolkit, please do so through its repository, not this one.
GOV.UK Elements code in use across live projects but not already in the toolkit should eventually be added to it. All contributions towards this goal are welcome and should be in the form of pull requests on the toolkit repository.
Examples of pull requests already raised to this end:
You can find the Sass files here:
/public/sass/
/public/sass/main.scss
The main.scss file shows how to import the Elements Sass files.
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
- install the required node modules
npm install --production
- run the app
foreman start -p 3000
- go to localhost:3000 in your browser.