Skip to content

GOV.UK Frontend release v3.0.0
Compare
Choose a tag to compare
@m-green m-green released this 29 Jul 12:46
v3.0.0
899264c
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

In this release, we’ve made some important changes to improve the accessibility of pages built with GOV.UK Frontend. This includes making sure that the styles, components and patterns in GOV.UK Frontend meet level AA of WCAG 2.1.

We recommend you update GOV.UK Frontend with npm.

If you’re updating compiled files, you only need to:

  • update and add data-module attributes
  • update CSS class names

Contact the GOV.UK Design System team if you need help updating or installing GOV.UK Frontend.

Thanks to @colinrotherham, edwardhorsford, @frankieroberto and @Nooshu for their help with this release.

Breaking changes

You must make the following changes when you migrate to this release, or your service may break.

Update file paths, attributes and class names

To make sure GOV.UK Frontend's files do not conflict with your code, we've moved our package files into a directory called govuk.

If you’re using Sass

Add govuk/ after govuk-frontend/ to @import paths in your Sass file.

For example:

@import "node_modules/govuk-frontend/govuk/all";

If you’ve added node_modules/govuk-frontend as a Sass include path, add govuk/ to your @import paths:

@import "govuk/all";

If you’re using Javascript

You must do the following.

  1. Update file paths.
  2. Update and add data-module attributes.
  3. Update CSS class names.
Update file paths

You must add govuk/ to your import paths.

If you're importing node_modules/govuk-frontend/all.js, change this import path to node_modules/govuk-frontend/govuk/all.js.

If you’re importing a specific path, add govuk/ after govuk-frontend/. For example, if you're importing the button component:

import Button from 'govuk-frontend/govuk/components/button/button'
Update and add data-module attributes

You do not need to do anything if you're using Nunjucks macros and the initAll function.

If you are not using Nunjucks macros, add a govuk- prefix to data-module attribute values. For example:

<div class="govuk-accordion" data-module="govuk-accordion">
...
</div>

The button and details components now also use the data-module attribute for initialisation. If you are not using Nunjucks macros, add:

  • data-module="govuk-button" to each <button> HTML tag
  • data-module="govuk-details" to each <details> HTML tag

If you're using your own JavaScript code to initialise components, add a govuk- prefix to any selectors that find components using the data-module attribute.

Pull request #1443: Ensure GOV.UK Frontend component selectors cannot conflict when initialised

Update CSS class names

You do not need to do anything if you're using Nunjucks.

If you're using HTML or custom JavaScript, change:

  • js-character-count to govuk-js-character-count
  • js-header-toggle in the GOV.UK Frontend header component to govuk-js-header-toggle

Pull request #1444: Renames js- css prefix to govuk-js-

If you’re using Nunjucks

  1. Change the list of paths in nunjucks.configure so that the only GOV.UK Frontend path is node_modules/govuk-frontend/:
nunjucks.configure([
  "node_modules/govuk-frontend/"
])
  1. If you've extended the page template, add govuk/ to the template path:
{% extends "govuk/template.njk" %}
  1. Change the import paths in your components so they include govuk/components/. For example:
{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}

Update asset paths

In the assets path, add govuk/ after govuk-frontend/:

/node_modules/govuk-frontend/govuk/assets

If your code uses Express.js, you must also use the following code in your configuration file:

app.use('/assets', express.static(path.join(__dirname, '/node_modules/govuk-frontend/govuk/assets')))

Pull requests:

Migrate to the new accessible focus states

The focus state of components now meets the new WCAG 2.1 level AA requirements.

You must update your component’s focus state to make your design consistent with our new focus styles.

If you've extended or created components, you can no longer use the govuk-focusable or govuk-focusable-fill Sass mixins.

If you're using govuk-focusable, you must remove it. There’s no direct replacement, so you must use our Sass variables to make your components consistent with GOV.UK Frontend.

If you're using govuk-focusable-fill, include the govuk-focused-text mixin inside your component's :focus selector. For example:

.app-component:focus {
  @include govuk-focused-text;
}

Pull requests:

Update colours

You can now use the following new colour variables that we've added to the colour palette:

  • dark-blue
  • dark-grey
  • mid-grey
  • light-grey

5 Sass colour variables no longer exist. Replace the following colour variables if you're using Sass:

Colour variable removed Suggested replacement
bright-red red
grey-1 dark-grey
grey-2 mid-grey
grey-3 light-grey
grey-4 light-grey

You should check the contrast ratio of your colours.

If you're not using Sass, change the values of the following colours:

Colour name Old value Replace with
purple #2e358b #4c2c92
red #b10e1e #d4351c
yellow #ffbf47 #ffdd00
green #006435 #00703c
grey-2 #bfc1c3 #b1b4b6
grey-3 #dee0e2 #f3f2f1
grey-4 #f8f8f8 #f3f2f1
light-blue #2b8cc4 #5694ca
blue #005ea5 #1d70b8
bright-red #df3034 #d4351c

We've also changed the background of the following components:

  • buttons - green instead of a custom green
  • confirmation panels - green instead of turquoise
  • links in their hover state - dark-blue instead of light-blue

If you're using legacy projects like GOV.UK Elements, you can keep your current colours by turning on compatibility mode.

Read our blog post about why we changed the colour palette.

Pull request #1288: Update colour palette.

Check the new version of the font

The size and baseline of the Design System's font are now more consistent with other fonts. Text now aligns vertically in text boxes without you needing to adjust it.

If you've extended or created components, you should check that your text is still vertically aligned correctly.

If you're using GOV.UK Frontend and GOV.UK Template, you can turn on compatibility mode to keep using the font from GOV.UK Template.

Pull requests:

Update links from error summary components to radios and checkboxes

If you've linked from an error summary component to the first input in a radios or checkboxes component, the link will no longer work.

This is because the id of the first input no longer has the suffix -1.

If there are links back to radios or checkboxes components in your error summary component, remove -1 from the end of the href attribute.

Pull request #1426: Make radios and checkboxes components easier to link to from error summary

Update the markup for tabs

You do not need to do anything if you're using Nunjucks macros.

If you are not using Nunjucks macros, remove the govuk-tabs__tab--selected class from the first tab's link, then add the govuk-tabs__list-item--selected class to that link's parent list item.

For example:

<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
  <a class="govuk-tabs__tab" href="#tab1">
    Tab 1
  </a>
</li>

Pull request #1496: Update the focus state for tabs

Update start button icon

Start buttons have a new icon. Your start buttons will lose their current icons unless you replace the old icon with the new one.

If you're using Nunjucks:

  • set the isStartButton option to true
  • remove the .govuk-button--start class

For example:

govukButton({
  text: "Start now",
  href: "#",
  isStartButton: true
})

If you're using HTML, add the SVG code from the start button example in the Design System.

Pull request #1341: Add new start button icon

Adjust text alignment in tables

Text now aligns to the top of table cells. If you've used a different alignment in a table, you should use your own CSS styles to keep the alignment the same.

For example, to align text in the centre:

.app-table--vertical-align-middle .govuk-table__header,
.app-table--vertical-align-middle .govuk-table__cell {
  vertical-align: middle;
  ...
}

Pull request #1345: Set 'vertical-align:top' positioning on table headers and cells

Replace Sass mixins in grids

If you're using the @govuk-grid-column Sass mixin to create custom grid classes, you must remove the $class parameter.

If you're passing a class name, put the mixin inside your selector. For example:

.your-class-name {
  @include govuk-grid-column(...)
}

You can no longer use the govuk-grid-row mixin. You can replace it with the .govuk-grid-row class in your HTML.

You must also replace calls to the grid-width mixin with calls to the govuk-grid-width mixin.

Pull requests:

Rename the border width variable

If you use Sass and you’ve extended or created components that use the border width variable, rename $govuk-border-width-mobile to $govuk-border-width-narrow.

Pull request #1287: Rename border-width-mobile to reflect how it's used

New features

Add attributes to table headings

You can now add attributes like classes, rowspan and colspan to table row headers.

Pull request #1367: Allow for classes, rowspan, colspan and attributes on row headers. Thanks to edwardhorsford.

Use page wrapper auto spacing

You can now add the .govuk-main-wrapper--auto-spacing modifier class to your <main> element to add responsive padding to the top and bottom of the page.

This will add the correct amount of padding depending on if there are elements above the <main> element inside the govuk-width-container wrapper. Elements above the <main> element could include a back link or breadcrumb component.

If you need to control the spacing manually, use the .govuk-main-wrapper--l modifier instead.

The govuk-main-wrapper and govuk-main-wrapper--l Sass mixins are now deprecated. Contact us if you need to continue using these mixins.

Pull request #1493: Add automatic vertical spacing modifier for main wrapper

GDS Transport now falls back to Arial in Internet Explorer 8 (IE8)

IE8 will now use Arial instead of GDS Transport.

This is because IE8 requires a very large Embedded Open Type (.eot) font file for external fonts. Arial will take less time to render for IE8 users, who are likely to be on older computers.

Pull request #1434: Update font to use v2 of GOV.UK Transport font. Thanks to @Nooshu.

Fixes

Assets 3
Loading