Automating Style-Guide-Driven Development

Varya Stepanova, SC5 Online

Automating Style-Guide-Driven Development

Brought to you by Varya Stepanova and generated by Jekyller

Varya Stepanova

Frontend developer at SC5, Helsinki

Long-running projects, UI libraries,
style-guide-driven development

Cleaning up the process

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

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

Anna Debenham

Modular CSS architecture

  • OOCSS
  • SMACSS
  • BEM
  • Atomic design

or any other modular solution

Modular CSS process

Getting out of your comfort zone

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.

The tool we missed

http://styleguide.sc5.io

Easy to start

  • npm install sc5-styleguide
  • CSS / SCSS / SASS / LESS
  • Documentation in code, KSS-compatible
  • Gulp- / Grunt- integrated

Easy to keep up to date

  • Living style guide
  • Documentation in code
  • Supports Angular directives

Use as development playground

  • Watching and auto-refreshing
  • Related variables and styles
  • Variable-component mapping
  • Live editing

Cross-company style guide process 25% faster to develop something

25% faster to develop something

Style Guide Generator by SC5

  • Living overview of UI
  • Quick manual testing
  • Quick built-out of new pages
  • Unit tests for UI
  • Cross-company design consistency
  • Cross-team communication
  • Communication for remote teams
  • Bridges the gap
  • “Style-guide-driven” mindset

Developers’ 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.

Thank you!

Varya Stepanova, SC5 Online

varya.me/empirejs-2015