Style Guide Driven Development

Kiril Abaškin

Style Guide
Driven Development or

Lego for Designers
& Developers

Kiril Abaškin

@kiril_lab

Old school way

mockup

markup

product

Dash process

In your dreams

mockup
markup
integration

Old school way

  • Inconsistent visual system
  • Inconsistent code (duplicate, unreasoned)
  • Version confusion
  • Time-consuming
  • Unmaintainable

Websites are systems rather than pages and as soon as we stop perceiving them as that, the better.

Anna Debenham

Living Style Guides

A living style guide represents UI components of your website with exactly the same styles that you use across the project.

Style-Guide-Driven Development

Style-Guide can must be an integral part of your development workflow.

Style-Guide-Driven Development is the practice of using the style guide as the focal point for all front-end UI development tasks.

TL;DR

Folow one simple rule

If it is not in Styleguides - it is doesn't exist.

SGDD Flow

SGDD Planning

SGDD Implement and Document

SGDD Plug & Play Component

SGDD The Communication Benefit

Atomic Design

By Brad Frost

a·tom·ic
/ə’tämik/
of or forming a single irreducible unit or component in a larger system.

Modular CSS

or any other modular solution

Developer's mindset

Before

What markup, CSS and JS I need?

After

What modules is this page made of? Do I need to create new modules?
Future modules and pages start in style guide.

Tools

SourceJS

Install and use
  • git clone https://github.com/sourcejs/init.git -b npm my-sourcejs && cd my-sourcejs
  • npm install sourcejs --save
  • npm start
  • SASS/LESS/PostCSS
  • MarkDown, HAML, HTML

It is show time !

Capabilities are awesome

  • UI Testing

Credits