Styleguide Driven Development

Here at superhuit, we like to use the acronym SDD when we explain how we create our Front End code. The definition of this term is Styleguide Driven Development.
For each website crafted by our developers, we build and deliver a complete styleguide of the project.

A styleguide (sometimes called living styleguide) is a website including the UI’s complete Pattern Library and some guidelines on the Brand’s Identity web version.

For non-technical readers, this introduction might sound a bit tricky at first, but don’t worry I will try to explain it with simple words to you.

Imagine you ask a construction company to build your house.
First, they will discuss with you the project and define with you the basic requirements to make the design and technical decisions in order to build your dream house etc…
Then, in an ideal world, imagine that after only 3 months of work, you house is finally ready!
The company will deliver you the front door’s keys and a very useful documentation about your house including the list of all the components used to build you lovely house i.e bricks, bathtub, windows, paint…
In this documentation, you will have access to a complete explanation on how each component works from both the technical and design point of view.
Now imagine that you want to add a new room in your house. In this document, you will find the basic rules to follow in building walls (with bricks), putting a door and assembling a window all together with a list of the furnishings to be used and how to paint the new room and make it pretty and consistent with the rest of the house.

Well a styleguide is the same, but for your website.

This approach offers multiple benefits for both parties; the builders of the project, and the buyers:

An historical review

If we want to understand the concepts behind styleguides we can’t avoid talking about Atomic Design.

Atomic Design is a methodology created by Brad Frost.

Atomic Design is divided in five distinct stages working together to create interface design systems in a more deliberated and hierarchical manner. The five stages of Atomic Design are:

The web is becoming more and more a dynamic system of components (web apps, interactive websites, ...) as opposed to a set of static pages.
Atomic Design makes it easier for both Designers and Developers. Imagine creating a 3000 pages website, do you think it’s realistic to design and code the 3000 different templates? Let’s assume we reduced the 3000 pages to a set of 50 page types… Well there is still a lot to do!

Now imagine having a complete library of all the components you need on your website, all of them with colors and size variations.
Imagine if you could take each one of them and assemble the pages the way you want, together with the components you need. By doing so, you wouldn't have 3000, but infinite variations of templates for your website!

Sounds good, right?

Introducing Fractal, a useful tool.

Fractal helps you assemble, preview and document website component libraries. You can then integrate them into your websites, apps and build processes to create joined up ‘living’ projects.

Having used other tools in the past, we have been developing with Fractal for over a year , which is:

Finally, it has no restriction when it comes to Front End technologies. You can use your preferred CSS preprocessor and CSS naming methodology (i.e ours is BEM), or even a great template engine with the bests javascript libraries for the project we work on.

Improving collaboration between Designers and Developers

Working with styleguides and Atomic Design have clear and real benefits for all the people involved in a project: designers, developers, project managers and of course clients.

Designers can have a better macro and micro perspective on the whole project. They know where and how many times each component is used. They can focus on details, interactions, and easily identify UX pitfalls. Note that the Atomic Design approach works perfectly with design softwares such as Sketch.

Developers have at the same time a general overview and can focus on one specific task. Focusing on specific and detailed tasks allows you to estimate the time needed to complete them. Also using short amounts of time for each development and validation cycle encourages multiple iterations.

As the project is divided into visual elements, it is easy for project managers (/product owners) to have an accurate view of the progress and to validate each component individually.
Understanding each stage of the project is easy since the language is the same for designers, developers and project managers: visual components.

Last but not least the clients have a complete living web project that can be easily maintained and can evolve in time. No black magic in the project codebase, no more waste of time before each release: each component and feature is described and can be easily improved or fixed in case of bugs.

We use this methodology for all our web development projects, because we strongly believe that this is a WIN-WIN strategy, for us and for each person involved in the project!

Want to know more?

If you would like to read more about SDD we recommend you these articles: