Living style guides are to front-end what well thought APIs are to backend. Essentials.

They are designed to aid in building well-organized documentation of front-end codebases. They details all the various elements and coded modules of a site or application.

Dassault Systemes needed to unify its UI/UX patterns and consolidate its front-end code. Furthermore they needed to document the visual language, such as header styles and color palettes, used to create their applications. It was a one-stop place for the entire team from product owners and producers to designers and developers to reference when discussing site changes and iterations.

Iterations

The term “living” means its an ever-going process.

In the course of 3+ years I iterated over a style guide and delivered not less then three versions.

Version 1.0 (2014)

The copycat intro.

The Ext JS approach to components.

Version 2.0 (2015)

Rethinking the hierarchy and usage.

Buttons need buttons.

Version 3.0 (2016)

The new home for version 3.

Better colors and documentation.

A more bootstrapy way to approach components.

Final thoughts

This work helped me grasp some of the issues inherent to style guides:

  • releasing to early
  • not involving all parties
  • handling breaking changes

Some of them are described in this Smashing article.