Style Guide Driven Development

"We are not designing pages, we are designing systems of components."
~ Stephen Hay

Style Guide Driven Development (SGDD)

SGDD is about converting static style guide into dynamic style guide from the earliest stages of User Interface (UI) development. The dynamic style guide also known as Living Style Guide.

Static Style Guide (SSG)

The static style guide is a file that documents typography, colors/palettes, fonts and many more. They also contain details like spacing info (margin and padding). Nowadays designer prefer to use more sketch-friendly tool like Zeplin.

Living Style Guide (LSG)

Living Style Guide reflects the latest version of the implemented design and includes demos showing interaction and behaviour. Example of the LSG is the extremely popular Bootstrap

All the components placed in the left panel and the right panel contain the view of the component and below it is the code to be used by Developers.

A design system isn't just a library of assets with some documentation, it's how you collaborate and communicate between teams and disciplines.
~ Nataly Athree at "cssday"

Before we go to Development life-cycles with SGDD, let's discuss methodology being used in component development. There is plenty of them and my personal choice is Atomic Design.

Atomic design is a mental model that allows you to concurrently create both the parts and the whole of a UI design system
~ Brad Frost

This methodology analyzes the relationships between the different parts of the system and how they interrelate, using chemistry as an analogy.
~ Adriana De La Cuadra (Bitovi)

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound.

Organisms

Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Templates

Templates consist mostly of groups of organisms stitched together to form pages.

Pages

Pages are specific instances of templates.

SGDD with Atomic Design

1. Design Audit

This is when the designer gathered all the requirements and created SSG.
At this stage the LSG serves as a reference when creating designs. Designer would refer to LSG and considering to reusing or extending the atoms components or create the new atom component.

2. Component Abstractions

Once the designs are ready to be implemented, designers and developers can use the style guide to discuss how the new features should be broken down into separate components. These is where activity like recomposing the molecules and introducing new component variants happened.

3. Publish into Living Style-Guide

This is the process where the component development started. With SGDD in mind the development is all about creating the component and documenting it in LSG. In the end, the LSG becomes both a framework and a playground.

• It's a framework because it provides the rules that define how elements should look and behave.
• It's a playground as implementer or application developers can interact and straight away see how the component behaves.

4. Integration

Application developer (library implementor) uses the atoms and molecules components by referring to the LSG for code sample and implementation guide to come up with templates and pages. Its "plug and play" game.

You've heard of plug-and-play. This is plug, unplug and play. It's so simple to use, it's unbelievable. ~ Steve Jobs

LSG with Storybook

Storybook is the most popular UI component development tool for Angular, React and Vue. It helps you develop and design UI components outside your app in an isolated environment.
This article uses Angular as development tool for UI component.

Basic features of Storybook is Action, Story and Knobs

Action

Track any interaction to the component like "click", "mouseover", "double-click" and many more.

Story

Implementation code that can be copied by developer.

Knobs

Knobs allow us to edit the component inputs dynamically.

Storybook is a powerful frontend workshop environment tool that allows teams to design, build, and organize UI components (and even full screens!) without getting tripped up over business logic and plumbing ~ Brad Frost

Storybook has made developing components more streamlined by allowing us to easily include technical documentation within our design system! ~ Taurie Davis

Setting up the Storybook

Its recommended to use the official guide. If everything going smoothly, the command for creating angular-storybook is just one line command:

npx -p @storybook/cli sb init --type angular

Summary

One way to bridge the gap between developers and designers is to bring the SGDD into our workflow. Combining SGDD with Atomic Design helps to accelerate the process of creating modular designs. Having Living Style Guide as single truth documentation boosts development time and team communication.