GOV.UK Frontend v5.5.0
This release includes an updated list of organisations and brand colours. We’ve also added a new feature to stop long words from ‘breaking out’ of components.
To install this version with npm, run npm install [email protected]. You can also find more information about how to stay up to date in our documentation.
New features
We've updated the list of organisations and brand colours included in Frontend
We've overhauled the list of organisations and organisation brand colours that are shipped with GOV.UK Frontend.
The previous list was outdated and had not kept up with changes to the machinery of government. We’ve updated the list to:
- add all current government departments and their brand colours
- add variants of brand colours that meet a 4.5:1 contrast ratio against white, where required
- provide warnings if defunct organisations are still being referenced in your Sass code
To enable these changes, set the feature flag variable $govuk-new-organisation-colours to true before you import GOV.UK Frontend in your Sass files:
// application.scss
$govuk-new-organisation-colours: true;
@import "govuk-frontend/all";You can also silence warnings about defunct organisations by adding organisation-colours to the $govuk-suppressed-warnings setting.
We introduced this change in pull request #3407: Update organisation colours.
Stop long words breaking out of components with govuk-!-text-break-word
We've added a new override class to help display long words with no obvious break points when the space is too narrow to display them on one line. An example of a long word might be an email address entered by a user.
Wrapping the content with the govuk-!-text-break-word class forces words that are too long for the parent element to break onto a new line.
A confirmation email will be sent to <span class="govuk-!-text-break-word">arthur_phillip_dent.42@peoplepersonalitydivision.siriuscyberneticscorporation.corp</span>.Sass users can also use the govuk-text-break-word mixin.
We introduced this change in pull request #5159: Add break-word typography helper.
Recommended changes
Update the $websafe parameter on the govuk-organisation-colour function
The govuk-organisation-colour Sass function's $websafe parameter has been renamed to $contrast-safe.
This is to more accurately describe the functionality of the parameter.
The old parameter name will stop working in the next major version of GOV.UK Frontend.
We introduced this change in pull request #3407: Update organisation colours.
Fixes
We've made fixes to GOV.UK Frontend in the following pull requests: