Benjamin,

Front end developer.

Style guide contents page.

Who for?

Mainly for internal stakeholders to view but also a version was made available for external agencies to use to make sure anything they designed/developed would match HomeServe.com as close as possible. I also intended for this to be used by the Front End Development team so we can grab snippets of code and test any major CSS changes easily.

I also found that documenting a lot of the code made me strip out a lot of unnecessary modules or even code within a module, when you have to comment on the purpose or build of some HTML sometimes you realize it may not be needed at all.

Start one sooner and build as you go

Me, 2 months ago

What is it?

The style guide is living document of colors, typography, lists, tables, containers, grid systems, media that are being used across HomeServe.com, it also contains a lot of information on templates we have, modules we can use, browser and device stats and also has a help section for website accessibility.

Baseline of style guide on a mobile phone.
Baseline of style guide on a mobile phone.

Why create it?

I decided to create a style guide for HomeServe.com as a way to stop a lot of the small but not insignificant changes that sometimes creep up over months of development. Requests for the changing of an icon used on a bulleted lists as an example can be shown to business owners and shown how it will affect not just their new journey but the whole of the website. It would also become a place where people can come and see modules/components that we’ve already built and can therefore be easily used in anything new.

My main motivation for creating the style guide was to document and obtain ‘sign off’ of each element as we go, colors, typography, how lists should look, tables etc just to maintain consistency not only across the look of the website but also the code behind the scenes.

Templates on style guide.
Templates on style guide.
Likes
  • It looks amazing
  • Internally everyone loves it
  • Having a repository to check every element
  • Seeing how all the elements stack up together such as the heading styles
  • The guide can be sent to agencies to maintain the same look and feel externally
Dislikes
  • It has started to get a little on the large size so getting ‘sign off’ can be difficult at times as there is so much to look through
Lessons learnt
  • Start one sooner and build as you go. Adding already developed components to the guide months after build has shown how we’ve strayed from previous look and feel unintentionally
  • As it wont be hosted and view able to normal HomeServe users use it as an opportunity to do something a little different, a bit of fun, may be make it a playground for new ideas as well as documentation