Upgrading UX Forms’ GOV.UK theme

GOV.UK homepage

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.

Abridged contents of UX Forms’ GOV.UK theme
UX Forms’ Pattern Library form using our old GOV.UK theme

Theme building

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 govuk-elements-sass version 1.2.1 to 3.1.2 and from govuk_frontend_toolkit version 4.12.0 to 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.

Bumping versions

Our dependencies are declared in package.json so it’s just a matter of changing the version numbers for govuk-elements-sass and govuk_frontend_toolkit and re-running npm install.

Using styles

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 layout.mustache.

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.

diff of our theme’s mustache template that renders a radio group’s fields (old on the left, new on the right)
diff of our theme’s mustache template that renders each input in a radio group (old on the left, new on the right)

Our upgraded theme in action

UX Forms’ Pattern Library form using our upgraded GOV.UK theme

Want to know more?

Come have a look around https://uxforms.com, follow UX Forms on twitter, or email us at hello@uxforms.com and see how we can make your forms better, together.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
UX Forms

UX Forms

An enterprise-ready cloud platform for webform development. See our website for more: https://uxforms.com