In the past few weeks I have been focused on Living StyleGuides (LSG) both in client work as well as in the Design Systems Accelerator. So this week I have a collection of articles on how to get started.
I am an advocate of using ZURB Panini (and also bootstrapping ZURB Foundation as a framework) as a first point of entry for a new design system. It is my tool of choice in delivering my own front-end code and living styleguides as well as bootstrapping the process for existing projects. It hits all the right points about being easy to use with out being obtuse, obfuscated, or buried in code. Three things that can often kill a project.
If you are interested in my process using ZURB Panini be sure to check out my products at the end.
–James Stone, Design Systems Engineer
Featured Articles
Creating A Living Style Guide
An extensive case-study style article on Smashing Magazine about how FamilySearch developed their Living Styleguide for their organization. Again, don’t try to model this piece-for-piece but it might get you thinking about the right things to include for your organization. Your goal should be to start smaller than the final result of this case study then iterate.
Part 1: Planning Your Living Style Guide
Great overview about how to start planning your LSG. Focuses on DocumentCSS but the same ideas can be extrapolated to other systems.
How To Create a Living Style Guide
Another developer centric approach using a SSG (Static Site Generator) called DocumentSSG to create a living styleguide or SSG for short. The beginning of this article contains a great overview to get you thinking about the “moving parts” of a living styleguide and is a good resource to think about how to get started.
Living Style Guide Tools In-depth Overview
Focuses more on developer-centric design systems, creating your systems out of annotate code for example. Just because it is developer centric doesn’t mean it is developer friendly or can be used across teams. That requires planning, communication and more emphasis on the documentation (rather than the architecture of such.
BOOK: Front-end Style Guides
Designers and developers have taken different approaches to putting together their own web-based style guides. This book highlights the various techniques and the projects that have used them. It’s packed with practical tips, whether you’re starting from scratch or assembling one for an existing site. NOTE: I have read this myself and it is quite good.
My Products with a LSG Focus
Living (Coded) Styleguide in 60-minutes
Do you want to create a Living (Coded) Styleguide for your organization or web project but don’t know where to start?
Design Systems Engineering Vol 1
Learn how systems are changing the face of Web Design. Chapters 1 + 2 of this short ebook give a detailed explanation with coded examples of a design system created for Marcus Handa.