Style guide driven development: Part 1

When the decision was made to rebuild the Crunch website two years ago, we jumped on the opportunity to radically overhaul the way we built the front end.

This wasn’t going to be “just another redesign”, nor would it simply be a short-lived uplift of spirits. This time, we were seizing the moment to change the way we worked for good.

Back then, we were designing webpages for unique purposes and single use. Consequently, our coding practice echoed this. Although each page in isolation may have been a success, a lot of time and effort was wasted repeating the basics. Arriving at conclusions took an unnecessarily long amount of time.

This symptom is not isolated to individual webpages — it’s a flaw that can be found across entire businesses and applications.

Embracing the principles of Atomic design

The solution was to work towards a more modular approach and create our own style guide, following the principles of Atomic design by Brad Frost. This involved breaking our pages down into smaller chunks, using the scientific terms atom, molecule, and organism.

We also developed a style guide — a directory of HTML components designed to be useful and reusable to a consistent specification and design. This style guide enables our developers to build applications with speed, ease, and confidence.

Essentially this was about having an effective and efficient process for creating our website and taking ownership of it.

Improving creativity

There was concern that adopting a style guide would result in a factory production line, with everything looking the same. Some feared it would hinder evolution because we wouldn’t be able to be flexible.

In truth, it proved to be the opposite. By removing so many steps in the process, we were able to clearly see the flaws in our work and where to make improvements. Evolution sped up and creativity flowed.

Our developers saved time that was otherwise spent going through the motions, allowing them to concentrate on what really made a difference.

With an array of reusable and proven elements to choose from, we were able to rapidly turn mock-ups into working prototypes. These elements met a set criteria, including successful cross-browser testing and receiving great feedback from user testing.

From idea to reality — faster

Atomic design has enabled us to get the myriad of great ideas at Crunch into users’ hands sooner.

Of course, while the theory is relatively simple, successfully carrying it out takes practice and persistence. We found it took time for everyone to begin to share the same language and change their behaviour, but the benefits were soon clear for all to see.

In part two, I look at the importance of patterns and language when producing an effective style guide.

Ben Herbert is Lead Front-End Developer at Crunch. Ben has a background in fine art and photography, before finding a new creative outlet as a front-end developer. When not developing, Ben enjoys gardening and wildlife.

Want to get involved? We’re hiring!