Knowledge

We help make your business a success

Tech Blog: Style guide driven development (part one)

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.


Want to get involved? We’re hiring!


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, he still enjoys visiting art galleries and shooting landscapes.

Invoice templates

Our invoice templates are professional and sharp. Use them to directly invoice your clients and get paid fast.

Business guides

From understanding expenses to starting a limited company, our downloadable business guides can help you.

Late payment reminder letters

If a client hasn't paid an invoice, download our late payment reminder templates and get that invoice paid fast.

Major policy proposals for government to consider across a broad range of areas, including National Insurance, Business Rates, Universal Credit, and more.

At Crunch, we're creating a computing platform for our services. Find out how we're using AWS Auto Scaling groups to ensure they’re always available.

Having a common language the whole team uses is essential. SGDD makes it easy to explain the way we work to each other & those outside of Crunch.

The best accounting advice

Our accredited team are on hand to help you choose the best package

We understand that it can be difficult deciding whether or not to switch accountants, but at Crunch we’ll offer you fair, unbiased advice on what’s best for you.