Installation

The GOV.UK theme contains full CSS and works out-of-the-box. However if you need to modify and compile the theme's SASS files then you will need to install the GOV.UK Design System Frontend node module.

Detailed install for Ubuntu

The following should work for any version of a Debian type system and Mac OS. For installing on Windows, see here.

In a terminal, issue node -v

If you see:

Command 'node' not found, but can be installed with:

sudo apt install nodejs

DO NOT DO THIS! This will install node.js V8 and the GOV.UK Frontend needs node.js V12 or better. Switch to your home directory cd ~ and issue the following to install node.js V12:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt install -y nodejs

If you see a version of node.js that is less the V10 e.g.

V8.7.0

Follow the same instructions above. This will replace your existing version of node.js with V12.

Now check your version of node.js with node -v and you should see something like:

12.22.9

Now check your version of NPM (Node Package Manager) with npm -v and you should see something like:

8.5.1

Now switch to the GOV.UK theme's folder e.g. themes/contrib/govuk_theme and issue:

npm install

This will install the GOV.UK Frontend node module and all the required dependencies. This will take several seconds and you will see a lot of activity. Once this is finished, you will see something like:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 451 packages from 375 contributors and audited 10234 packages in 25.355s
found 0 vulnerabilities

The 2 warnings are normal and the important part is found 0 vulnerabilities. At this point the theme is fully installed and can be enabled by going to Admin > Appearance and clicking on "Enable and set default" link under the "GOV.UK Theme" (which will be in the DISABLED THEMES section).

Gulp installation

In order to compile your changes/additions to the SASS files, the GOV.UK theme utililises Gulp. To install Gulp, go back to the terminal (still in the govuk_theme folder) and issue:

sudo npm install --global gulp-cli
npm install gulp

Now Gulp is installed you can test with:

gulp

You should see something like:

[17:30:12] Using gulpfile /var/www/drupal8/web/themes/contrib/govuk_theme/gulpfile.js
[17:30:12] Starting 'default'...
[17:30:12] Starting 'sass'...
[17:30:12] Finished 'sass' after 346 ms
[17:30:12] Finished 'default' after 348 ms

In order to compile your SASS files automatically, issue:gulp watch and you will see something like this:

[14:09:55] Using gulpfile /var/www/drupal8/web/themes/custom/govuk/gulpfile.js
[14:09:55] Starting 'watch'...

Make some changes to the "style.scss" file (under /sass) and save. You will see something like:

[14:09:55] Using gulpfile /var/www/drupal8/web/themes/custom/govuk/gulpfile.js
[14:09:55] Starting 'watch'...
[14:15:57] Starting 'sass'...
[14:15:57] Finished 'sass' after 364 ms

Updating

Occasionally, it is worth checking if the GOV.UK Frontend (or any other dependant package) has been updated. To do this, cd to the govuk_theme folder e.g. themes/contrib/govuk_theme and issue:

npm outdated

This should not return anything. If a list of outdated packages is returned then issue:

npm update