Category: style guides

The Options for Programmatically Documenting CSS

I strongly believe that the documentation should be kept as close to the code as possible. Based on my experience, that’s the only option that works well in the long term. External documents, notes, and wikis all eventually get outdated, forgotten, and lost. Documentation is a topic that always bugs me. Working o...

Taking Pattern Libraries To The Next Level

    No thorough conversation about the front end today can end without mention of pattern libraries. Sometimes a pattern library appears in the form of a living style guide, or as a design system, or as the outcome of an atomic desig...

Pixel-Perfect Specifications Without The Headaches

    Designers, developers and managers often work with compressed timeframes and multiple projects simultaneously. A team must be able to respond quickly to feedback on their product from clients, project managers and developers. Eac...

Making And Maintaining Atomic Design Systems With Pattern Lab 2

   The benefits of UI design systems are now well known. They lead to more cohesive, consistent user experiences. They speed up your team’s workflow, allowing you to launch more stuff while saving huge amounts of time and money in the process. They establish a common vocabulary between disciplines, re...

Designing Modular UI Systems Via Style Guide-Driven Development

   Using a style guide to drive development is a practice that is gaining a lot of traction in front-end development — and for good reason. Developers will start in the style guide by adding new code or updating existing code, thereby contributing to a modular UI system that is later integrated in...

Creating A Living Style Guide: A Case Study

   Living style guides are an important tool for web development today, especially in large, complex web applications. They help document styles and patterns, keep designers and developers in sync, and greatly help to organize and distill complex interfaces. Indeed, living style guides remain one of the...

Introducing iframify

Hugo Giraudel writes up why he created iframify, a script which grabs a DOM node and wraps it in an <iframe>. It’s a nifty tool for displaying components in a style guide at a certain width and effectively faking element queries. An iframe being an inner document, media queries fire based on the width of the if...

Clarity 2016 Wrapup

My writeup of Clarity conference (the recent conference about style guides). Not comprehensive notes, just the things that resonated with me. Direct Link to Article — Permalink Clarity 2016 Wrapup is a post from CSS-Tricks ...