How a living style guide came to be
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 Systèmes 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.
The term “living” means its an ever-going process.
In the course of 3+ years I iterated over this style guide and delivered not less then three versions.
Version 1.0 (2014)
The first iteration was heavily inspired by Bootstrap since it was the only style guide out there at the time.
Components usage was similar to ExtJs library with a
Class based approach.
Version 2.0 (2015)
Additionally, every components would have it’s own documentation page for easier referencing.
Version 3.0 (2016)
The focus here was on clarity and quality. New documentations guides and examples were added.
Design tokens and utilities classes were a nice way to speed up development.
This work helped me grasp some of the issues inherent to style guides:
- Releasing to early
- Not involving all parties
- Maintaining a growing user base
- Handling breaking changes