We’ve just released patterns.greenhilldigital.com – the Greenhill website’s Pattern Library.

When Oli came on board and we asked him to pick up frontend development of some fairly complex responsive components, we realised we were having to explain patterns which really should be documented. We also wanted him to have a proper, easy to access component reference rather than having to keep digging into the source HTML and CSS.

Looking back on some of the more complex components, we realised that in addition to “how to use” documentation it would also be beneficial to attach the design rationale as a reminder of why they’re built the way they are. This central reference should, of course, also reside in version control so that any changes – and the rationale behind them – can be traced historically.

We chose Fractal as our pattern library tool and it is excellent. It was definitely more feature–packed and required more initial reading than we expected, but is all the better for it. The integration of Faker API tools and the ability to create and include subcomponents in particular are fantastic.

Check out patterns.greenhilldigital.com. It’s very much a work–in–progress, but is already making our front-end collaboration better.