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
The guide can be seen here: http://govuk-elements.herokuapp.com. This is the most recent tagged version.
There is a staging app, to preview what is currently in master: http://govuk-elements-test.herokuapp.com/
It can be used as a base of frontend code.
GOV.UK elements has the GOV.UK frontend toolkit and the GOV.UK template as dependencies.
The toolkit provides Sass variables, functions and mixins, they must be imported before any of the GOV.UK elements Sass files.
Take a look at the top of /public/sass/_govuk-elements.scss to see how the GOV.UK frontend toolkit's Sass files are imported.
Choose the Sass files you need to build on top of those provided by the frontend toolkit.
Ignore the /public/sass/elements-page.scss files, these exist to style the page furniture of GOV.UK elements (for example, the HTML example boxes and colour swatches).
If you would like to import the govuk elements Sass files into your project, you can do so using:
`npm install govuk-elements-sass`
This will install the files within public/sass to node_modules/govuk-elements-sass.
The GOV.UK frontend toolkit dependencies are listed at the top of the _govuk_elements.scss partial, shown below:
// GOV.UK frontend toolkit
// Sass variables, mixins and functions
// https://github.com/alphagov/govuk_frontend_toolkit/tree/master/stylesheets
// Settings (variables)
@import "colours"; // Colour variables
@import "font_stack"; // Font family variables
@import "measurements"; // Widths and gutter variables
// Mixins
@import "conditionals"; // Media query mixin
@import "device-pixels"; // Retina image mixin
@import "grid_layout"; // Basic grid layout mixin
@import "typography"; // Core bold and heading mixins, also external links
@import "shims"; // Inline block mixin, clearfix placeholder
// Mixins to generate components (chunks of UI)
@import "design-patterns/alpha-beta";
@import "design-patterns/buttons";
// Functions
// @import "url-helpers"; // Function to output image-url, or prefixed path (Rails and Compass only)
Either copy these files your Sass directory, or configure the includeFiles path if you’re using a task runner like Grunt.
If you're not using the GOV.UK template, you'll also need to uncomment the base partial in _govuk_elements.scss, or create your own.
// @import "elements/base"; // HTML elements, set by the GOV.UK template
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 the required node modules
npm install
Run the app
node start.js
Go to localhost:3000 in your browser.
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.
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 feature branch run:
wraith latest config.yaml
Here are examples of service-specific pattern libraries using GOV.UK elements.