diff --git a/source/changes-to-govuk-frontend-v6/index.html.md.erb b/source/changes-to-govuk-frontend-v6/index.html.md.erb new file mode 100644 index 00000000..86205744 --- /dev/null +++ b/source/changes-to-govuk-frontend-v6/index.html.md.erb @@ -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. diff --git a/source/import-font-and-images-assets/index.html.md.erb b/source/import-font-and-images-assets/index.html.md.erb index b1b516ee..a64fc123 100644 --- a/source/import-font-and-images-assets/index.html.md.erb +++ b/source/import-font-and-images-assets/index.html.md.erb @@ -28,13 +28,12 @@ If you decide to copy the assets instead, copy the: - `/node_modules/govuk-frontend/dist/govuk/assets/images` folder to `/assets/images` - `/node_modules/govuk-frontend/dist/govuk/assets/fonts` folder to `/assets/fonts` - `/node_modules/govuk-frontend/dist/govuk/assets/manifest.json` file to `/assets` -- `/node_modules/govuk-frontend/dist/govuk/assets/rebrand folder` to `/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 `/assets/images`, `/assets/fonts` and `/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 `/assets/images` and `/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: