All postsEXPLORE TOPIC

#design systems

Front End Style Guides by Anna Debenham

I'm still pretty into design systems and style-guide driven design, and I'm encouraged that the faddish nature of the conversation around these methods is passing into general wisdom and best practice. But there's still a lot of knowledge that has yet to be put "out there."

Brad Frost and Anna Debenham, who co-hosted a podcast together last year, are two of the biggest public proponents to recently release books on the subject. Whereas Frost's focuses more on the "why" and the philosophy of style-guide-driven design, Debenham's is very much a "how" book.

She first goes through some of the methodologies and techniques that help break designers of the nasty habit of designing by pages: style tiles, element collages, and component libraries. Then she covers the advantages of style guides.

From there, it's all practical. She focuses most of the book on the step by step process of implementing your first style-guide-driven redesign or creation of a component library. Throughout, she answers questions that real people doing real things with real style guides are going to ask: how rigid should I be, what tools should I use, what about maintenance once it's built... etc.

Overall, it's a short read but dense with useful, practical information from that rare breed — a developer who can write and explain concisely and clearly. If you've gotten on board the philosophical train of style guides but aren't sure where to start, it's a good buy at $8. Get it here.

Discuss

Smashing runs down Style Guide tools

UPDATE It's amazing, looking back 9 years at what was available then. We moved from Stocco to Storybook shortly after and that's become a standard since. But in the meantime there are so many more tools, and Figma's Dev Mode just came out of beta a couple days ago.

Pretty good overview here.

At D&B we started with the PHP-based Style Guide Boilerplate tool but ended up maintaining the most low-impact (but highly manual) system possible. It was a single web page. Comments in the HTML told developers where to grab pieces of markup. Not high-tech, and it required a lot of manual maintenance. But it was easy to keep it looking just like the PSD version.

At PAS I implemented StyleDocco using Grunt-StyleDocco. Display leaves a lot to be desired so I ended up diving into the source to modify it. I can now change the template (which is a simple Jade file) and style if necessary.

Why StyleDocco? Short answer: it shows the CSS code. This was important to our developers. StyleDocco creates a new page for every Less file, splits it up by the <h1> elements in the comments, and shows those pieces alongside the HTML and samples.

Discuss