❗️GOV.UK Frontend Toolkit is deprecated, and will only receive major bug fixes and security patches.
GOV.UK Frontend Toolkit:
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 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.
package.jsonin this directory, but they are only for running tests and are not an indication that this project prefers Ruby or Node.js.
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
The easiest way to integrate it would be to create a
package.jsonfile in your application with
You then install the toolkit with
With Django you can use https://github.com/jrief/django-sass-processor to compile Sass files.
Note: if you need complete styles you might want to install govuk-elements-sass package that also installs toolkit
Each version of the toolkit is tagged with the version number in this format:
v*version number*, for example
v4.1.1for 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
"govuk_frontend_toolkit": "git://github.com/alphagov/govuk_frontend_toolkit#v4.1.1"(assuming you want version 4.1.1)
You can include the toolkit as a git submodule.
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
sshfor 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
scss-lintto check the stylesheets.
The requirements are Node.js 0.8 or higher and PhantomJS, and Ruby:
bundle install npm install npm test
The test suite can be run by opening the
./spec/support/LocalTestRunner.htmlfile in a browser for a more detailed trace of errors.
At the top of a Sass file in your project you should use an
@importrule 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