Three weeks ago, A List Apart went open source. The markup on the website is something I feel very close to. Over the years, if I’ve been unsure of how to mark something up, I’ve often referenced the HTML on A List Apart to see how it’s been done there because I know the people who work on it really care about semantics.
Uncertain of how I could help, I suggested to the team that A List Apart have its own pattern library. Pattern libraries are something I do a lot for client projects and I thought the site could really benefit from one.
It’s a technique I first saw former Clearlefty Natalie Downe develop for client projects back in 2009, and has been used by Clearleft as a front-end deliverable since. They’ve evolved a lot over time to include things like usage notes and code snippets.
A couple of days later, with some help from Mat “Wilto” Marquis, we had a repository for the pattern library up and running complete with a live preview.
Features of A List Apart’s pattern library
All the pattern files (snippets of markup) are in their own folder, and adding one in there automatically adds it to the library. I’m using some PHP from Paul Lloyd’s Barebones, his own blend of a pattern library, to output the patterns in the right format.
By breaking the site up into patterns, it’s easier to find those bits of markup. I noticed an issue on GitHub about there being no styles for dl, dd, and dt elements, and it took a while to find an example of them being used on the site. With a pattern library, all the elements that appear on the site are in one place so you don’t have to go searching round for them.
It also makes device testing easier because everything is on one page. I made a special patchwork view specifically for this, which is the same as the regular view, but all the patterns are at full width and it excludes the code and usage examples. It’s also quick to see if CSS changes to one pattern affect other patterns.
It’s a work in progress, and the first time I’ve built one after a site has gone live. (Normally I do them during development). There aren’t many patterns there at the moment, but I’ll be adding more. I’d also like to make it a one-stop-shop for grabbing site assets like logos.
Code for America’s Pattern Library
An example of a fully-fledged pattern library is Code for America’s, which I worked on with Clearleft.
The Code for America site is huge, and maintained by many different people. They wanted a redesign of their site, but delivering mockups of template after template would only be a tip of the iceberg and not really help them in the long-term. Templates are like a snapshot in time of a site, and they often can’t take into account when content changes or entirely new sections are created.
Since the project is so out in the open and encourages collaboration from the community, the code had to be documented well too.
We wanted to create a solid foundation that they could build upon, so we built them a system so they could build their own pages, the main deliverable for this being the Pattern Portfolio.
It encouraged a much more modular approach to development, the idea being that any pattern could be used anywhere on a template. Each pattern has its own .scss file, and the file name for that and the pattern’s markup are the same.
Designs for templates were still created to demonstrate how patterns could work together. After the Code for America team said they were thinking of using Jekyll for their site, I started using it (for the first time) to help me prototype these templates. It made code collaboration really easy because there was no database or required knowledge of PHP, so it’s now being used in production.
The site’s still being put together, and you can follow its progress on Github.
More pattern libraries
Some of my favorite examples of pattern libraries in the wild include those of Mailchimp and Starbucks. They’re comprehensive and well documented, they feel like the perfect deliverable because they help maintain code and design standards. They acknowledge that websites change over time and make it easier to make those changes without breaking stuff.
If you’re inspired to learn more, I have a bookmark collection of pattern libraries, and I’ve also written a pocket guide about them. Please chime in with your own favorite pattern library examples or resources in the comments as well.
