skip to main content

UIKit style guide

UIKit style guide

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.

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.

Two column website showing the overview section
The copycat intro

Components usage was similar to ExtJs library with a Class based approach.

Two column website showing the inputs section
The Ext JS approach to components

Version 2.0 (2015)

With version 2.0 we split the library into Javascript and CSS components to make navigation easier.

Full screen website with sidebar showing colors section
Splitting the library between css and javascript

Additionally, every components would have it’s own documentation page for easier referencing.

Full screen website with sidebar showing buttons section
A single unified page per component

Version 3.0 (2016)

The focus here was on clarity and quality. New documentations guides and examples were added.

Full screen website with sidebar showing home section
The redesigned homepage for version 3

Design tokens and utilities classes were a nice way to speed up development.

Full screen website with sidebar showing colors section
Improved design tokens documentation
Full screen website with sidebar showing loaders section
A more bootstrapy approach to components

Final thoughts

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