Tags: library

108

sparkline

Infusion: An Inclusive Documentation Builder

Two of my favourite things together at last: pattern libraries and service workers. Infusion is a tool for generating pattern libraries that also work offline.

Thinking about it, it makes total sense that a pattern library should be a progressive web app.

Integrating Animation into a Design System · An A List Apart Article

Alla looks at ways of documenting animations into a pattern library. I tell ya, her book is going to be unmissable!

I made a style guide for my personal web site and you should too.—zachleat.com

Here’s Zach’s style guide. But the real reason I’m linking to this is his lovely description of having a personal website that grows over time:

As my own little corner of the web unceremoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful.

Shoelace.css: a back to the basics CSS starter kit

A starter kit of CSS that gives you some basic styles that you can tweak with custom properties.

For when you don’t need the whole boot.

Also:

Shoelace doesn’t ship with a grid system because you don’t need one. You should use the CSS Grid Layout instead.

I approve this message!

Testing the accessibility of pattern libraries

Riffing on Rachel’s talk at Patterns Day:

At the Patterns Day conference last month, Rachel Andrew mentioned something interesting about patterns. She said that working with reusable interface components, where each one has its own page, made her realise that those work quite well as isolated test cases. I feel this also goes for some accessibility tests: there is a number of criteria where isolation aids testing.

Hidde specifically singles out these patterns:

  • Collapsible (“Show/hide”)
  • Form field
  • Video player

(Now More Than Ever) You Might Not Need jQuery | CSS-Tricks

Thanks to jQuery, you probably don’t need jQuery. Just look at all these methods that started life in jQuery, that are now part of the standardised DOM API:

  • remove()
  • prepend()
  • before()
  • replaceWith()
  • closest()

What’s the difference between style guides, pattern libraries, and design systems? – Joseph Fitzsimmons

Ah, the age-old question!

The Venn diagram here pretty much maps to how I think about these different terms, and how they relate to one another.

Perch UI Pattern Library | Perch UI Pattern Library

A nice little pattern library from Rachel and Drew for the Perch admin interface. Within folders, they’re using Brad’s atomic design nomenclature, and the whole thing is managed with Fractal.

Design systems - Alla Kholmatova

Here’s the website for Alla’s forthcoming book. You can sign up to a low-volume mailing list to get notified of updates.

Lost My Name Design System

The really nicely documented design system for Lost My Name.

They’ve also written up the process of creating the design system which includes a refreshingly honest account of missteps made along the way—very valuable!

Style Guide Guide | Style Guide Guide

If you want to understand the thinking behind this style guide guide, be sure to read Brad’s style guide guide guide.

Creating a pattern library in Sketch, Roobottom.com

A smart approach to creating patterns as symbols in Sketch. Sounds like diligence and vigilance is required to make it work, but then, that’s true of any pattern library.

Introducing Fractal and Federalist | U.S. Web Design Standards

Another instance of Fractal in the wild, this time for the Federalist design system.

Why Fractal?

  • It’s open source.
  • It’s easy to use.
  • It generates standalone HTML previews of each component.
  • It uses or supports many of the technologies we use already.
  • Fractal offers a customizable theme engine.

The Most Exciting Design Systems Are Boring | Big Medium

Design-system builders should resist the lure of the new. Don’t confuse design-system work with a rebrand or a tech-stack overhaul. The system’s design patterns should be familiar, even boring.

The job is not to invent, but to curate.

Interesting thoughts from Josh on large-scale design systems and how they should prioritise the mundane but oft-used patterns.

When the design system is boring, it frees designers and developers to do the new stuff, to solve new problems. The design system carries the burden of the boring, so that designers and developers don’t have to.

Patterns Beyond Context · Matthias Ott – User Experience Designer

If we describe patterns also in terms of content, context, and contrast, we are able to define more precisely what a specific pattern is all about, what its role within a design system is, and how it is defined and shaped by its environment.

“What have they done to my library?” - Caitlin Moran

That library was a Pandorica of fabulous, interwoven randomness, as rich as plum cake. Push a seed of curiosity in between any two books and it would grow, overnight, into a rainforest hot with monkeys and jaguars and blowpipes and clouds. The room was full, and my head was full. What a magical system to place around a penniless girl.

Inclusive Components

A great new site from Heydon:

A blog trying to be a pattern library. Each post explores the design of a robust, accessible interface component.

The first component is a deep dive into toggle buttons.

Fractal Iterations | Clearleft

Danielle and Mark have been working flat out on Fractal. Here’s the roadmap they’re working to.

The Secret History of Hypertext - The Atlantic

The latest excellent missive from The History Of The Web—A Brief History of Hypertext—leads back to this great article by Alex Wright on Paul Otlet’s Mundaneum.

Evaluating Tools For Building a Component Library | Chromatic

A comparison of a few different tools for generating pattern libraries.

Spoiler…

In this particular case, Fractal comes out on top:

It has the features we need, and I’m happier than I should be with how simple the directory and file structure is. The documentation has also been super helpful thus far. We’ve customized it with our client’s branding and are ready to roll.