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.
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.
It also provided ways to document enhancements to Bootstrap, such as form helper classes for restricting input fields to standard widths.
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.
The gem provides (via a Rails engine):
- jQuery and Bootstrap 3 with HTML5 and respond.js shims needed for IE8 and below
- An admin layout with header and footer
- Admin design patterns available from
- CSS helpers and Sass variables for the admin theme
- GOV.UK user friendly date formats
- Google Analytics tracking
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.