https://designnotes.blog.gov.uk/2015/09/08/how-to-use-our-design-patterns-even-if-your-service-isnt-part-of-gov-uk/

How to use our design patterns – even if your service isn’t part of GOV.UK

GOV.UK frontend styles include loads of small, elegant details that make them worth including in your service – even if it looks nothing like GOV.UK. I even use them in my personal website.

petition.parliament.uk uses GOV.UK code and design patterns – even though it's not part of GOV.UK
petition.parliament.uk uses GOV.UK code and design patterns – even though it's not part of GOV.UK

Details like:

  • Choose one font size and we automatically choose alternate sizes for other devices – for example, 24px font on desktop, 18px on mobile and 16px in print
  • Grid layouts are really easy to make – and expand to full width automatically on mobile
  • Checkboxes come with large hit areas – easier to use
  • The styles work in older browsers without any extra effort

Of course, none of these details are hard to create, but re-creating all of them would take a fair while.

We recently launched petition.parliament.uk. Even though this service isn’t part of GOV.UK, we decided to use a lot of the frontend code and design patterns from GOV.UK. Here’s how we did it.

Grab the code

There are 3 code repos involved in rendering pages on GOV.UK:

To start, we grabbed the html from govuk_template and the scss includes from govuk_frontend_toolkit, govuk_template and govuk_elements.

We used the html to make our main application template, and imported all the scss includes into our main scss file. Then we commented out everything except the stuff from govuk_frontend_toolkit (scss comments don’t compile into the final css file).

govuk_template and govuk_frontend_toolkit are both available in a bunch of packages – for rails, node, liquid, mustache, all kinds of things. You don’t want any of these packages – just copy across the scss files directly. We need the freedom to make changes.

At this point, our main scss file looked like this:

Petitions main scss after we added GOV.UK code repos
Petitions main scss after we added GOV.UK code repos

View site.scss history on Github

At this point, site.scss should compile to a totally blank css file. govuk_frontend_toolkit is only scss – you have to call those mixins to use them.

Change the font stack

If your service isn’t part of GOV.UK, you’ll need to change the font stack.

To change the font stack, edit _font_stack.scss.

Here’s what we ended up with:

Petitions _font_stack.scss
Petitions _font_stack.scss

View font_stack.scss history on Github

Look through each include one-by-one

Start with govuk_template, then move on to govuk_elements. The styles in govuk_elements build on the styles in govuk_template.

For each include, you have a three options:

  • Use the styles as they are – to do this, simply un-comment the @import. We chose to import the includes for forms, lists and tables straight from govuk_elements.
  • Pick and choose what to use – make a new include for your project. Then copy and paste the bits you need across. This is what we did most of the time.
  • Leave it out – either delete it entirely or just leave it commented out – scss comments aren’t compiled into the final css.

Here’s what we ended up with:

Petitions main scss at launch
Petitions main scss at launch

View site.scss history on Github

Leave a comment

We only ask for your email address so we know you're a real person