#pattern library

Recently, Adobe launched their Spectrum design system complete with an open-source implementation, Spectrum CSS. In addition to an extremely polished and well thought-out presentation, Spectrum’s focus on accessible CSS practices and quality markup is a breath of fresh air. Its use is likely to facilitate more accessible websites and applications, which is fantastic.

Spectrum the design system includes principles, pattern guidelines, content recommendations, tools and resources, and more; not dissimilar from Google’s Material Design. The Spectrum CSS project, in contrast to its design system, is a working collection of component styles that you can download from npm or explore on GitHub and apply to your own project. It’s an incredible resource to have available, particularly with its rigorous testing and attention paid to accessibility.

One outstanding question I do have is about the textarea component, which doesn’t illustrate usage with a label element and could lead developers to omit a critical piece of accessibility information. But that’s more of an issue with docs/education than a shortcoming of the library, itself. Many of the patterns I reviewed included SVG and ARIA best practices, a welcome contribution in a world of DIV soup component libraries.

In the web industry it’s common to see pattern libraries circulated as they do a good job of promoting design thinking in reusable code patterns. Less common, however, is to find a pattern library where accessibility is the primary objective. On the product team at Deque Systems, also known as Deque Labs (where I work, so full disclosure), accessibility is our top priority. We created the accessible Cauldron pattern library specifically for our products and open sourced it, making the patterns available to the public!

In addition to style basics like typography and colors, the library includes components like custom form controls, a select menu, badges, toasts, and more. There are also composite components like modals, navigation and alerts. It's important to mention that the design and interactions presented are intended to show how Deque wanted to solve these problems, and how we approach them in our products.

The Complete Pattern Library

Keith Hagan, Ian Hemlin

A&C Black Visual Arts, London 2005, 112 pages, 15x22,3cm, ISBN 978-07-136-725

euro 22,00

email if you want to buy [email protected]

This is a book plus CD package, containing 100 patterns (copyright-free) for use by all craftspeople. The patterns are divided into various geometric, small-scale repeats, florals etc. and each comes with a note of its origins and three colourways, resulting in an invaluable resource for everything from textiles to stencilling, stained glass and websites. The CD is suitable for both CDs and Macs and a wide variety of software packages.

Simplicity 9448 Collars: