Previously, it was not obvious to users if Sass had stopped updating because of an error. An error would be printed to the command line, but nothing would happen in the browser. We know that this error was easy to miss, which could cause confusion.
Now, when there's a Sass error, the GOV.UK Prototype Kit creates a blank application.css file to make the site look broken to users.
If you fix the Sass error, the site will automatically reload.
We have also changed the Gulp log level to be less detailed, so that errors stand out.
This was added in Pull request #990: Make Sass errors clearer to the user.
Links now have underlines that are consistently thinner and a bit further away from the link text.
Links also have a clearer hover state, where the underline gets thicker to make the link stand out to users.
The new link styles are opt-in because Chromium browsers have an issue with links inside a multi-column layout.
Read more about the new link styles in the GOV.UK Frontend release notes.
This was added in Pull request #1012: Implement the new link and hover styles in the Prototype Kit.
This was added in Pull request #1025: Update to GOV.UK Frontend v3.12.0
- Pull request #938: Update Marked module to fix security issue
- Pull request #944: Disable Browsersync ghostMode to stop interactions being mirrored across tabs and devices
- Pull request #948: Fix Sass files being copied to public directory
The task list pattern has been updated to make incomplete tasks clearer to users. This change has also been made to the pattern in the Design System.
If you're updating from an older version, in your app/assets/sass/patterns/task-list.scss file add the line .app-task-list__tag, before .app-task-list__task-completed {:
.app-task-list__tag,
.app-task-list__task-completed {This was added in pull request #907: Update Task List template
- Pull request #884: Bump nunjucks from v3.1.3 to v3.2.1
- Pull request #885: Update various dependencies and fix linting offences
You can now use patterns like step by step navigation and task lists in the unbranded template.
You do not need to do anything if you're installing this version for the first time.
If you're upgrading from an older version, make the following changes.
- In the
app/assets/sass/unbranded.scssfile, change@import "node_modules/govuk-frontend/govuk/all";to@import "application";. - In the
app/views/layout_unbranded.htmlfile, change{% extends "govuk/template.njk" %}to{% extends "layout.html" %}.
#842: Allow Kit specific patterns to be used with the unbranded template.
- Pull request #840: Update Kit to use latest active LTS Node.js version 12.x.
- Pull request #847: Update step by step patterns to latest.
This release updates GOV.UK Prototype Kit to v3.0.0 of GOV.UK Frontend.
In v3.0.0 of GOV.UK Frontend, we’ve made some important changes to improve the accessibility of pages. This includes making sure that the styles, components and patterns in GOV.UK Frontend meet WCAG 2.1 level AA.
You must follow our guidance on updating your version of the Prototype Kit.
If you need help updating or installing the Prototype Kit, you can:
- contact the GOV.UK Design System team
- talk to a developer on your team
You must make the following changes when you migrate to this release, or your prototype may break.
- Update files in the
/appfolder - unless you updated via the command line. - Update HTML in GOV.UK Frontend components.
If you’ve created custom code or components, read the release notes for GOV.UK Frontend v3.0.0 for more changes you may need to make.
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 downloaded this version of the Prototype Kit as a zip file, you must:
- add an assets path in the Sass file
- replace old colours
- update asset paths
- update the layout file
- update the layout_unbranded file
Pull requests:
In the app/assets/sass/application.scss file, add $govuk-assets-path: '/govuk/assets/'; at the top.
In the app/assets/sass/patterns/_step-by-step-navigation.scss file, replace:
“grey-4”with"light-grey", $legacy: "grey-4"“grey-3”with"light-grey", $legacy: "grey-3"
You must make this change even if you are not using the step by step navigation pattern in your prototype.
Read our blog post about why we changed the colour palette.
In the app/assets/sass/unbranded.scss file, add govuk/ after govuk-frontend/ in the 3 @import paths. For example:
@import "node_modules/govuk-frontend/govuk/settings/colours-palette";- Go to the
app/views/layout.htmlfile. - Add
{%- set assetPath = '/govuk/assets' -%}at the top. - Replace
{% extends "template.njk" %}with{% extends "govuk/template.njk" %}. - In each import line that starts
{% from, addgovuk/components/to the start of the file path. For example:
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}- Add
{% set mainClasses = mainClasses | default("govuk-main-wrapper--auto-spacing") %}before{% if useAutoStoreData %}
In the app/views/layout_unbranded.html file:
- Add
{%- set assetPath = '/govuk/assets' -%}at the top. - Replace
{% extends "template.njk" %}with{% extends "govuk/template.njk" %}.
Pull request #769: Update to GOV.UK Frontend 3.0.0.
If you’re using HTML versions of GOV.UK Frontend components, add a govuk- prefix to data-module attribute values. For example:
<div class="govuk-accordion" data-module="govuk-accordion">
...
</div>If you’re using HTML versions of the button or details component, add:
data-module="govuk-button"to each<button>HTML tagdata-module="govuk-details"to each<details>HTML tag
Pull request #1443: Ensure GOV.UK Frontend component selectors cannot conflict when initialised.
If you're using the HTML version of the character count component, change js-character-count to govuk-js-character-count.
Pull request #1444: Renames js- css prefix to govuk-js-.
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.
If you’re using the HTML version of the tabs component, remove the govuk-tabs__tab--selected class from the first tab's link, then add the govuk-tabs__list-item--selected class to the 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 every item in your task list, removing the app-task-list__task-name class from the link and wrapping the link in a new <span class="app-task-list__task-name">.
For example:
<li class="app-task-list__item">
<span class="app-task-list__task-name">
<a href="#" aria-describedby="eligibility-completed">
Check eligibility
</a>
</span>
</li>Pull request #770: Update the task list focus state.
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
isStartButtonoption totrue - remove the
.govuk-button--startclass
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.
The <main> element in layouts now has a .govuk-main-wrapper--auto-spacing class by default.
This will add the correct amount of padding above the content, depending on whether 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 govuk-main-wrapper--auto-spacing does not work for your service, you can set the correct amount of padding by adding the .govuk-main-wrapper--l class to your page or layout by using:
{% set mainClasses = "govuk-main-wrapper--l" %}You can also turn off the .govuk-main-wrapper--auto-spacing class by using:
{% set mainClasses = "" %}If you want to continue using old colours in your prototype, you can turn on compatibility mode.
Fixes:
- #763 Fix a Sass compilation error in the unbranded stylesheet, which was introduced in 8.12.0.
Features:
- #760 Update to GOV.UK Frontend version 2.12.0 (See GOV.UK Frontend 2.12.0 release notes)
Fixes:
Features:
- #741 Update to GOV.UK Frontend version 2.11.0 (See GOV.UK Frontend 2.11.0 release notes)
Features:
- #722 Update to GOV.UK Frontend version 2.10.0 (See GOV.UK Frontend 2.10.0 release notes)
Features:
Fixes:
- #697 Only ask for usage permission if TTY. Thanks zuzak for this contribution.
- #712 Turn off npm default auditing.
Features:
- #701 Update to GOV.UK Frontend version 2.8.0 (See GOV.UK Frontend 2.8.0 release notes).
Features:
-
#613 Update to GOV.UK Frontend version 2.7.0 and adds experimental extensions feature (See GOV.UK Frontend 2.7.0 release notes). Big thanks @matcarey (https://github.com/matcarey) As this is an experimental feature it should be used at your own risk, and is likely to change. Please contact us if you're interested in trying it out.
Features:
- #680 Update to GOV.UK Frontend version 2.6.0 (See GOV.UK Frontend 2.6.0 release notes)
Features:
- #672 Replace ‘check answers’ pattern with updated code
- #671 Update to GOV.UK Frontend version 2.5.0 Allows use of new components Accordion and Summary List
Fixes:
Internal:
- #663 update Standard to 12.0.1
- #640 Replace Mocha with Jest
- #659 Upgrade kit to use Gulp 4
- #664 Remove deprecated gulp-util
New features:
Bug fixes:
New features:
New Features:
Also includes a new character-count component
Bug fixes:
New features:
Breaking changes:
New features:
- Add config to allow permanent session in cookie
- Allow nested field values in session
- Restart the app if environment variables change
- Make it more difficult to accidentally clear the session data
Bug fixes:
New Features:
- Update GOV.UK Frontend to v1.3.0
- Rename and reorganise template pages to be easier to use
- Add kit version and link to footer
Bug fixes:
- Fix loading variables from .env
- Update link from question page template to design system
- Changed block name to bodyEnd to fix scripts in unbranded template
This release adds backwards compatibility, so you can use old prototypes made in v6 of the Prototype Kit in v7.
Read the guidance on using backwards compatibility
New features:
- #568 Update GOV.UK Frontend to 1.2.0
- #563 Add Nunjucks macro example to 'passing data' guidance
- #553 Add backwards compatibility - support for prototypes made in Version 6 of the Prototype Kit
- #557 Bump outdated dependencies:
- Update standard from 10.0.2 to 11.0.1 and fix violations
- Update run-sequence from 1.2.2 to 2.2.1
- Update require-dir from 0.3.2 to 1.0.0
- Update notifications-node-client from 3.0.0 to 4.1.0
- Update marked from 0.3.6 to 0.4.0
- Update gulp-sass from 3.1.0 to 4.0.1
- Update gulp-mocha from v4.3.1 to v6.0.0
- Update gulp-clean from 0.3.2 to 0.4.0
- Update express from 4.15.2 to 4.16.3
- Update dotenv from 4.0.0 to 6.0.0
- Update cross-spawn from 5.0.0 to 6.0.5
- Update basic-auth from 1.0.3 to 2.0.0
- #557 Remove unused readdir dependency
- #557 Fix a broken link in an error message
Bug fixes:
- #566 Improve error handling
- #556 Update branching example
- #536 Import missing component macros
- #532 Update repo links from govuk_prototype_kit to govuk-prototype-kit
- #540 Fix grid css classes on check-your-answers page
- #562 Change the syntax used to specify node engine versions to fix a bug that prevented prototypes from being deployed to a CloudFoundry instance, by
Breaking changes:
You will need to:
- update
app/views/includes/scripts.htmlfile and add the following line to include the JavaScript file
<script src="/node_modules/govuk-frontend/all.js"></script>
- modify
app/assets/javascripts/application.jsfile to initialise the JavaScript
$(document).ready(function () {
window.GOVUKFrontend.initAll()
})
New features:
- #501 Add default session data
- #502 Add Cookies and Privacy policy text
- #521 Do not track users who have enabled 'DoNotTrack'
- #522 Add inline-code block styles
- #523 Track app usage
- #525 Add design system message to home page
Bug fixes:
- #530 Update elements class to frontend on examples page
- #491 Remove redundant Google Analytics
- #524 Make "Prototype Kit" casing consistent
- #527 Update docs/index page to include same information as private beta
To see the previous private beta releases see the archived private beta repository.
New features:
- #430 Recommend Atom over Sublime text
- #415 Update to govuk-elements-sass v3.1.1
- #422 fix(package): update govuk_template_jinja to version 0.22.3
- #401 Update govuk_template_jinja to 0.22.2
- #409 Update govuk_frontend_toolkit to 7.0.0
- #406 Add documentation for creating a release
- #410 Copyright should be Crown Copyright
- #407 Support deprecated check-your-answers table styles
Bug fixes:
New features:
Bug fixes:
New features:
- #386 Add GOV.UK Notify client library to kit
- #383 Add .env file to support storing private data
- #347 Add ie8 elements support
- #349 Add IE 8 bind polyfill
- #373 add page_scripts block
- #371 Update README
New features:
- #369 Add template pages for content and questions
- #340 Auto data session 4
- #367 Added config to turn off browser sync
- #368 Update Travis deployment to be consistent with other govuk frontend repos
- #361 Add an example of the task list pattern
- #364 Use GOV.UK elements v3.0.1
- #360 Bump govuk_frontend_toolkit to 5.1.1
- #352 bump gulp-sass to increase node-sass dependency
Bug fixes:
New features:
Bug fixes:
- #350 Prevent asking users to authenticate twice
- #344 Removing links to route.js / updating example in branching.html
- #343 Remove the title attribute from the cookie message
- #341 fix css sourcemaps
- #337 Add Git step to Heroku guide
- #336 Use app.locals instead of app.use
- #330 Update GOV.UK toolkit and StandardJS to latest
- #328 Update GOV.UK template to latest
- #324 Fix the example question page’s back link
Breaking changes:
Use Gulp.js rather than Grunt as a build tool. It is recommended to install Gulp globally, do so using:
npm install --global gulp-cli
All changes:
The short version:
- #311 Update govuk-elements-sass to 2.2.0
- #308 Change node version from 4 to 6
- #299 Basic sanity check test suite
- #296 Keep the latest release branch up-to-date
- Fix broken links for the documentation app
The extended version: This release includes custom radio buttons and checkbox styles from govuk-elements-sass v2.2.0. The version of Node that the prototype kit uses has been updated, we recommend using LTS (version 6 or above). Travis will now run tests against each pull request to ensure that the app runs (by checking the server and build tasks). The latest-release branch can be used to update the prototype kit. Instructions for updating your version of the prototype kit via the latest-release branch can be found here.
Breaking changes:
- #244 Migrate documentation into a separate application
All changes:
- Bump all GOV.UK assets to their latest versions
- Remove duplicate GOV.UK assets copied to the app
- #241 Warn against using the prototype kit to build production services
- #268 Automatically keep the latest release branch up to date. This can be used to update the kit
- #270 Add a new stylesheet for the unbranded layout to fix font issues
- #257 Make CSS output easier to debug (with sourcemaps)
- #237 Make links with role="button" behave like buttons
- #224 Lint the prototype kit’s codebase using Standard. This only applies to the kit’s codebase - there’s no requirement for your app to meet this
- #197 Add the ability to store user data per session
BrowserSync support, so you don't need to refresh the browser to see your changes. Nunjucks filters file has been added, so you can add your own filters to your project, check the examples page in the kit for more details.
Breaking changes:
- #188 Force SSL on production
All changes:
- #213 Remove references to "latest version" of Node
- #212 Remove the mustache version of govuk template
- #211 Remove govuk_template.html copied in build task from the repository
- #209 Use release 1.2.0 of the govuk-elements-sass package
- #208 Remove govuk elements sass from the app folder
- #207 Bump the govuk frontend toolkit to 4.12.0
- #206 Bump the govuk template to 0.17.3
- #200 Adds custom 'filters' to the nunjucks templating engine
- #194 Windows heroku login instructions
- #193 Adding browser-sync to the prototyping kit.
- #192 Security guidance
- #191 Edit sass docs for clarity
- #188 Force SSL on production
- #186 add guidance page for using verify prototype
- #181 Add link to styleguide on writing commit messages
- #180 Change smart quotes to straight quotes
- #177 Add a link to install Git
- #176 Bump govuk template to 0.17.0
- #175 Bump govuk frontend toolkit to 4.10.0
- #172 Fix closing element
- #169 Fix broken url and typo
- #166 Stop prototypes being indexed by search engines.
- #165 Redirect .html and .htm if in url path
- #164 Fix link to developer install instructions
- #162 Have kit self-identify as being the GOV.UK Prototype kit
- #161 always convert port to Number
- #160 Minor documentation update
- #159 Remove invalid ARIA role
- #156 fix port restart issue
- #155 Update the GOV.UK template and remove napa as a dependency
- #154 Use TRAVIS_BRANCH when running in travis-ci
- #152 Amend travis yml
New documentation to make it easier to install and run from scratch - tested with users and everything! The kit will now copy new files from assets to public (previously only updates to existing files were copied). It's easier to run multiple prototypes at once - the kit will automatically find a free port to run on.
- Add default cookie message (#150)
- New documentation (#145)
- Add example pages for branching (#143)
- Use grunt-sync for assets (#141)
- Fix warning for npm engine (#140)
- Add tmuxp config files to gitignore (#132)
- Improve 'port in use' errors, find a new port (#130)
This release switches templating language from Mustache to Nunjucks.
This is a breaking change.
To convert your old prototype pages for use with this version, follow this guide.
- Bump the govuk frontend toolkit to 4.6.0 (#127)
- Update govuk elements sass (#124)
- Update the prototype kit to use Nunjucks for templating (#123)
- Create config file that stores prototype configuration (#120)
- Add phase banner includes (#118)
- Use npm start as the standard way to run the app (#111)
- Add warning if folder missing or module missing (#100)
- Improve error handling around port in use, find new port (#95)
- Add body-parser for parsing POSTs (#86)
- Add question page (#72)
- Add js for toggled content (#70)
- Add Start Page (#45)
- Add Check Your Answers page (#36)
- Add confirmation page (#35)
- Upgraded to Express 4 (#32)
- Add jQuery to the kit, so it's available on all pages by default (#18)
- Add page without header and footer (#12)
Initial release of prototype kit