GOV.UK frontend toolkit
This project is not tied to a specific language and is designed to be used as a dependency in as many different languages as needed.
Gemfile and a
package.json in this directory, but they are only
for running tests and are not an indication that this project prefers
Ruby or Node.js.
Ruby on Rails
If you are using a build tool that depends on Libsass then you
may need to upgrade to a more recent version to use the grid helpers. Minimal
compatible versions include
gulp-sass 1.2.0 and
Using the tagged versions
Each version of the toolkit is tagged with the version number in this format:
v*version number*, for example
v4.1.1 for version 4.1.1.
If your dependency management tool allows the use of Git repositories as dependencies, you can point to a version by using its tag.
For example, if you are using bower, you can add the toolkit to your
bower.json like so:
"govuk_frontend_toolkit": "git://github.com/alphagov/govuk_frontend_toolkit#v4.1.1" (assuming you want version 4.1.1)
Using git submodules
You can include the toolkit as a [git submodule][https://git-scm.com/book/en/v2/Git-Tools-Submodules].
To add the submodule to your project run the following command substituting the path to a subdirectory in your project's assets directory:
$ git submodule add https://github.com/alphagov/govuk_frontend_toolkit.git ./path/to/assets/govuk_frontend_toolkit
We recommend you use
https rather than
ssh for submodules as they don't require key exchanges when deploying to remote servers.
If you clone a project with the toolkit submodule installed you will need to initialise the submodule with the following command:
$ git submodule init
To update the toolkit to the latest version you can use:
$ git submodule update
to check the stylesheets.
The requirements are Node.js 0.8 or higher and PhantomJS, and Ruby:
bundle install npm install npm test
Using the local test runner
The test suite can be run by opening the
./spec/support/LocalTestRunner.html file in a browser for a more detailed trace of errors.
At the top of a Sass file in your project you should use an
to include the file for the mixins you require, eg if you want the
conditionals and typography mixins you should add:
@import '_conditionals'; @import '_typography';
You may need to include the relative path to the toolkit if it is installed as a submodule:
If you are compiling Sass from the command-line tool, here are some options we recommend.
sass --style expanded --line-numbers --load-path [path to]/govuk_frontend_toolkit/stylesheets input.scss output.css
sass --style compressed --load-path [path to]/govuk_frontend_toolkit/stylesheets input.scss output.css
Released under the MIT Licence, a copy of which can be found in the file