Skip to main content

Upgrading from v5 to v6

v6.0.0 contains a number of breaking changes.

Customise GOV.UK Frontend settings

It’s now possible to customise all GOV.UK Frontend settings to adjust the appearance of your site.

Add values to a SCSS file and save it as /sass/_settings.scss, within your site’s input directory. You can choose an alternative location for this settings file with the scssSettingsPath option.

For example, to change your site’s brand colour and typeface, set values for the following SCSS variables:

$govuk-brand-colour: #2288aa;
$govuk-font-family: system-ui, sans-serif;

With this more flexible method of customising styles available, the following options have been removed:

  • brandColour ($govuk-brand-colour)
  • fontFamily ($govuk-font-family)
  • assetsPath ($govuk-assets-path)
  • fontsPath ($govuk-fonts-path)
  • imagesPath ($govuk-images-path)

Customising the header

With the introduction of govuk-frontend version 5.0.0, the logo in the header is now provided as a single SVG image. To support this change, the following options have been added:

  • header.logotype.text - Text to show instead of the GOV.UK logo. This text will appear bold and replace the crown icon and ‘GOV.UK’ text.
  • header.logotype.html - HTML to use instead of the GOV.UK logo. Use this option to supply your own SVG image. If header.logotype.text is set, this is not required. If header.logotype.html is provided, the header.logotype.text option will be ignored.

With this change, the following options have been removed:

  • header.organisationLogo
  • header.organisationName

url filter no longer required

The plugin enables Eleventy’s HTML base plugin which rewrites URLs to include a configured pathPrefix.

This means you no longer need to use the url filter. Remove this filter from any custom templates and check that paths point to their correct location.