Skip to content

GOV.UK Frontend v3.7.0
Compare
Choose a tag to compare
@36degrees 36degrees released this 01 Jun 14:58
v3.7.0
3932f5d
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.

New features

Add extra spacing between list items

If a list is hard to read because the items run across multiple lines, you can now add extra spacing between list items using the new govuk-list--spaced class.

This was added in pull request #1775: Add list--spaced modifier. Thanks to @frankieroberto for raising this issue.

Use HTML for navigation items in the header

You can now use HTML for a navigation item in the header component, using the new html option.

This was added in pull request #1819: Add the ability to specify HTML for a navigation item. Thanks to @adamsilver.

Import settings, tools and helpers CSS in one line

You can now import node_modules/govuk-frontend/govuk/base, instead of importing settings, helpers and tools separately.

Sass now compiles faster

GOV.UK Frontend's Sass files now compile to CSS faster, because we've changed the way dependencies work when you import them.

If you already import node_modules/govuk-frontend/govuk/all in your Sass file, you do not need to do anything. Sass will automatically compile faster.

If you import specific parts of GOV.UK Frontend in your Sass file instead, you can now make Sass compile faster by importing base then a component's index file. This will avoid GOV.UK Frontend importing dependencies multiple times.

For example:

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

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

@import "node_modules/govuk-frontend/govuk/components/button/index";
@import "node_modules/govuk-frontend/govuk/components/footer/index";
@import "node_modules/govuk-frontend/govuk/components/header/index";

Find out more about importing CSS.

This was added in pull request #1804: Allow components to be imported without dependencies. Thanks to @kevindew for raising this issue.

Collapse breadcrumb component on mobile

You can now collapse the breadcrumb component on mobile using the new collapseOnMobile option, so it:

  • shows only the first and last items
  • does not wrap

This was added in pull request #1754: Add collapseOnMobile breadcrumbs flag. Thanks to @vanitabarrett and @miaallers.

Back links are easier to select

The back link component is now:

  • bigger, so it's easier to select if you're using a touch screen
  • more consistent with the design of the breadcrumb component

This was added in pull request #1753: Make back link arrow consistent with breadcrumb component. Thanks to @vanitabarrett and @miaallers.

Deprecated features

Importing from the core and overrides layers without base

If you import specific files from the core or overrides layers, you’ll now see a deprecation warning when compiling Sass if you do not import node_modules/govuk-frontend/govuk/base first.

To fix the warning, import node_modules/govuk-frontend/govuk/base first. For example:

@import "node_modules/govuk-frontend/govuk/base";
@import "node_modules/govuk-frontend/core/typography";

If you do not import node_modules/govuk-frontend/govuk/base first, your service will no longer work from GOV.UK Frontend v4.0.0.

This was added in pull request #1807: Warn if importing core, overrides without dependencies.

Fixes

We’ve made fixes to GOV.UK Frontend in the following pull requests:

Assets 3
Loading