Consistency across GOV.UK admin tools

During transition to GOV.UK, Government Digital Service built a suite of admin tools for publishing content. Tools for creating and managing content in all its different guises. These were built quickly and in isolation, to meet transition deadlines.

Tools all used Bootstrap, which provided patterns and styles for forms, dropdowns, menus, navigation and buttons. Admin user interfaces could be built quickly. But there are many different ways to use Bootstrap. Each tool was doing the same thing, but slightly differently.

Documenting patterns

When I began working on another admin tool, transition, I created the first admin style guide, and began to document the patterns used in building the app:

Document existing transition styles, how transition uses bootstrap, where it diverges and where there are custom styles. Includes grid, body copy, visited links, buttons, pagination and breadcrumbs patterns

It didn’t recreate Bootstrap’s own reference, instead it gave rules on how to use Bootstrap. This led to consistency within the application. For example, all tables would be table table-bordered with a custom table-header class applied to the column headings.

Screenshot of example guidance in GOV.UK admin template
Guidance on using Bootstrap tables in admin tools

It also provided ways to document enhancements to Bootstrap, such as form helper classes for restricting input fields to standard widths.

Screenshot of GOV.UK admin template
Guidance on setting input widths

Sharing across tools

When I switched from the transition team to the publishing tools team, I reached for the same toolkit on different apps. Patterns created for transition that were tested and validated with user research would be useful.

I was working across:

Each application is an admin tool with its own purpose. Each looked roughly the same, each used Bootstrap, but none were sharing styles, patterns or behaviour. It wasn’t easy to add a filter to a table in both publisher and panopticon. Tables in imminence looked different to those in maslow.

All apps were built in Rails. A ruby gem would allow code to be shared across apps.

govuk_admin_template

Cue the govuk_admin_template gem. It began as a port of the patterns, styles, javascript and documentation from Transition.

The gem provides (via a Rails engine):

Each application was upgraded to Bootstrap 3 and switched to using the gem (that wasn’t always trivial).

Now they all use the same base layout, have the same Sass toolkit, follow the same Bootstrap rules and have access to the same set of features, like table filters and simple toggles.

It is now easier for all applications to look and behave consistently.