loading...

Style Guide Driven Development

aziziyazit profile image Azizi Yazit ・4 min read

"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 documenting a typography, colors/palettes, fonts and many more. They also contains 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 reflect the latest version of the implemented design and include demos showing interaction and behaviour. Example of the LSG is the super-famous Bootstrap

All the components placed in the left panel and the right panel contains 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-cyles with SGDD, lets discuss about 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. Defining Application Features

This is when designer gathered all the requirements and creating 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. Splitting into components

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. Implementation and documentation

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. End of results, the LSG becomes both a framework and a playground.

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

4. Assembling the application

Application developer (library implementor) uses the the atoms and molecules components by referring 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", "doubleclick" 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

Create a story for a component

Storybook is all about writing stories. A story usually contains a single state of one component, almost like a visual test case.

Your life story is a gift, and it should be treated as such
~ Emily V. Gordon

  • import Storybook-related
import { action } from "@storybook/addon-actions";
import { storiesOf, moduleMetadata } from "@storybook/angular";
import { boolean, select, withKnobs } from "@storybook/addon-knobs";
  • import Angular modules
import { CommonModule } from "@angular/common";
import { AtomicComponentModule } from "projects/atomic-component/src/public-api";
  • write story
storiesOf("Components|Atoms/Button", module)
  .addDecorator(withKnobs)
  .addDecorator(
    moduleMetadata({
      imports: [CommonModule, AtomicComponentModule],
      schemas: [],
      declarations: [],
      entryComponents: []
    })
  )
  .add("w3school", () => {
    return {
      template: {% raw %}`
        <ThemeProvider>
          <Button
            [variant]="variant"
            [small]="small"
            [disable]="disable"
            (click)="handleClick($event, {data: 1})"
          >
            Button
          </Button>
        </ThemeProvider>
      `{% endraw %},
      props: {
        variant: select("variant", ["green", "red"], "green"),
        small: boolean("small", true),
        disable: boolean("disable", false),
        handleClick: action("clicked")
      }
    };
  });
Item Description
storiesOf use storiesOf to create our story module
addDecorator usually third-party plugins like knobs come as decorator e.g. withKnobs
moduleMetadata required for Angular as every component need to be wrapped inside module
Button Angular component
props interface between user and our component

Lets recap

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

Posted on by:

aziziyazit profile

Azizi Yazit

@aziziyazit

Component library developer (angular and react)

Discussion

markdown guide