Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions source/changes-to-govuk-frontend-v6/index.html.md.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
---
title: Changes in GOV.UK Frontend v6.0.0
weight: 95
---

# Changes in GOV.UK Frontend v6.0.0

GOV.UK Frontend v6.0.0 includes changes to:

- improve our Sass architecture
- use an updated type scale to improve accessibility for small screens
- update colours to use the GOV.UK web palette in the GOV.UK brand guidelines
- improve the page template layout

We’ve also removed a number of deprecated APIs, Sass variables and component options.

## Migrating from v5 to v6.0.0

Follow the guidance about [staying up to date with GOV.UK Frontend](https://frontend.design-system.service.gov.uk/staying-up-to-date/).

When making the decision to migrate, consider your service’s requirements and your ability to update Sass tooling and templates. In particular, you must update to [Dart Sass v1.79.0 or later](https://sass-lang.com/dart-sass/) before upgrading to v6.0.0.

## Benefits of updating to v6.0.0

By updating to v6.0.0 you’ll:

- stay aligned with the GOV.UK look and feel: we’ve updated GOV.UK Frontend to use the GOV.UK web palette from the GOV.UK brand guidelines
- benefit from a more consistent colour system in certain components
- get the latest accessibility improvements, based on ongoing testing and feedback from services across government
- benefit from a smaller CSS payload
- be able to customise the page template further than before

## Updating to v6.0.0

Read the [GOV.UK Frontend v6.0.0 release notes](https://github.com/alphagov/govuk-frontend/releases/v6.0.0) to see the full list of breaking and recommended changes.

You might need to update some items to update to v6.0.0, including:

- updating your Sass compiler to [Dart Sass v1.79.0 or later](https://sass-lang.com/dart-sass/)
- using the latest GOV.UK web palette
- using the new colour functions and replacing colours to follow the new naming convention

You'll need to check some items still work as expected, including:

- making sure any custom use of functional colours still follows best accessibility practice for contrast and legibility
- updating any custom header or footer content, as we've changed how you can use and customise these components
- testing the new type scale in your service to see if you need to make any adjustments

You’ll also need to remove references to any APIs, Sass variables and component options that we’ve removed.
3 changes: 1 addition & 2 deletions source/import-font-and-images-assets/index.html.md.erb
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,12 @@ If you decide to copy the assets instead, copy the:
- `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `<YOUR-APP>/assets/images`
- `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `<YOUR-APP>/assets/fonts`
- `/node_modules/govuk-frontend/dist/govuk/assets/manifest.json` file to `<YOUR-APP>/assets`
- `/node_modules/govuk-frontend/dist/govuk/assets/rebrand folder` to `<YOUR-APP>/assets/rebrand`

You should use an automated task or your build pipeline to copy the files, so your project folder stays up to date when we update GOV.UK Frontend.

### If you have your own folder structure

If you use a different folder structure than `<YOUR-APP>/assets/images`, `<YOUR-APP>/assets/fonts` and `<YOUR-APP>/assets/rebrand`, you can set Sass variables so that Sass builds the CSS to point to your folders.
If you use a different folder structure than `<YOUR-APP>/assets/images` and `<YOUR-APP>/assets/fonts`, you can set Sass variables so that Sass builds the CSS to point to your folders.

Set one of the following before the `@import` line in your Sass file:

Expand Down