Upgrading UX Forms’ GOV.UK theme
Government Digital Service (GDS) are a government department who, amongst other things, maintain GOV.UK, the UK government’s websites. One of their biggest and most visible achievements is the creation of a government-wide set of standards and styles for how webpages should look. In short, if a department wants to put information online, it must do it using GDS’s style guide.
This is brilliant for users as every site benefits from the extensive user research that GDS continue to invest in their designs as well as providing a consistent and trusted user experience across all departments. It is more tricky for tool providers though as we need to provide ways for our customers to tailor their html and css appropriately. Just letting a form designer pick what colours they want, and maybe upload a logo or two, isn’t going to cut it.
Of course, nothing stays still for long — GDS continue to update and evolve their style guide and we last updated our GOV.UK theme back in June 2016. So it is high time we brought our theme up to date. This article will walk through how we did it.
What is a theme?
A theme in UX Forms is nothing more than a zip file. You deploy a zip file to UX Forms and we extract it and serve its contents online. That’s it.
And this is what our theme looked like when used by UX Forms’ Pattern Library form:
Whilst all you need to give to UX Forms is a zip file, how you create that zip file is entirely down to you.
Upgrading to the latest and greatest
We are upgrading from
3.1.2 and from
7.1.0, so we can expect a significant number of changes. There are a few moving parts to this so let’s take them in turn.
Our dependencies are declared in
package.json so it’s just a matter of changing the version numbers for
govuk_frontend_toolkit and re-running
govuk_frontend_toolkit so there’s nothing we need to change there.
Whilst GDS’s html template references enough css to make that page work, it is missing the rest of their css, e.g. form element styles. So, we also have our own
main.scss whose chief role is just to include
govuk-elements.scss, and then include a reference to that in our
It also turns out some css class names have changed, as well as their usage. We’ll get on to these next.
Changing our html
Whilst the overall layout template has changed significantly there are some other, more subtle, changes elsewhere in GDS’s elements guide. We’re not going to list them all here but it is worth highlighting some of the more interesting changes that demonstrate UX Forms’ flexibility.
Radio buttons perhaps were changed most significantly, so let’s take a look at what that meant for our theme.
What’s shown above is a comparison of our theme’s mustache template for rendering a radio group’s fieldset. The old version is on the left and the new on the right. We can see that the class name to be used when there’s a validation error has changed, but also the html inside the legend is markedly different. In fact we have an entirely new
legend property that has been added to the template and, if present, rendered with its own style.
As this template is used for both radio buttons and checkboxes, it includes another mustache template called
widget to render its members. The template used when rendering radio buttons is shown below.
This template shows perhaps an even more interesting change, in that the order of the input element and its label has been changed. Before, the radio input was rendered inside its accompanying label, and after the upgrade we separate the input-label pair and wrap them in their own div. This sort of change simply cannot be done if you don’t have complete control over the resultant html in your form.
Our upgraded theme in action
So here it is, UX Forms’ Pattern Library form running on the latest GDS styles for GOV.UK. Check it out to see the rest of our common widgets rendered using our updated theme.
As you can see, even seemingly small changes like this require absolute control over the final html that’s delivered to the browser. To support GOV.UK’s design properly we’ve had to allow all html output, everywhere, to be under your control. Not only does this mean we can fully support GOV.UK’s earlier theme and this upgrade, but we can also be confident of supporting whatever changes GDS make in the future as well as any other style by anybody else. Whether you’re Global Megacorp ‘Я’ Us needing absolute adherance to your centrally managed corporate design language, or a back bedroom startup that’s outsourced your web design, UX Forms can deliver.