For those of you unfamiliar with pattern libraries, I’d recommend reading Paul Boag’s excellent blog post on the subject. Basically, a pattern library is a type of style guide for a software application; usually a large web project. They’re essential when you have multiple team members working on brand-sensitive material. The problem is that pattern libraries are difficult to maintain and are usually the realm of the designer. I’m a programmer… I want in!
But then I found out about ‘pattern library frameworks’; projects that make compiling and presenting your patterns ridiculously easy. The idea was compelling enough that I had to try out one of them. The main selling point of pattern libraries is that when working off just rough specs, the component designs that people implement are often similar, but not an exact match. By using an easily updatable reference resource, that can be included in the project, components can more effectively be synchronized across the distant reaches of the project.
To get a taste for what pattern library frameworks provide, I took at look at a new one called Astrum, which you can get from npm, and which allows you to get going using a gently guided CLI setup.
Really all that’s needed to get started is:
npm install -g Astrum astrum init projectfolder astrum new componentgroup/component
Then you just add your CSS file to data.json, HTML to the markup file, and description to the description markdown file. Astrum’s system is quite quick to get up and running. I tested a sample pattern, hooked up some CSS classes, and the result is this:
So basically all you need to have a pattern library up-and-running is some CSS classes and components that you can bring into the Astrum pattern project. And voila, a browsable reference ready for group reference. Instant design synchronization.
If you are more into PHP and use Composer as well, Pattern Labs may be more up your alley, although there is a node version as well. And then there are minimal setups. The Fractal pattern framework, on cursory inspection, looks to be another good choice. In fact after trying it for a few moments, I get this out of the box:
But it still takes significantly more time than Astrum to get set up. Thankfully, there’s plenty of documentation to ingest if needed. One thing to keep in mind when choosing a framework is dependencies. Whereas in Fractal, the templating is managed by Handlebars, Mustache, or Nunchucks, Astrum uses Vue.js. Not an insignificant difference, but one for which the intended users should not have to concern themselves.
In the end, the project should have a pattern library that provides a more production-ready style reference for themes and components. You might even extend the system, as the people at PerchUI have done. By inverting the usual usage pattern, you can create and manage the patterns within the pattern library and export the style and components to your external project.
If you find it hard to keep your components consistent, try one of these frameworks, and I’d highly recommend Astrum.
