Pattern Library Frameworks: Astrum, Fractal, and Pattern Labs

Aug 30, 2016

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:

Astrum Pattern Lib

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:

Fractal Pattern Lib

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.


Meet Sourcetoad, a 2023 Best Places to Work honoree

Meet Sourcetoad, a 2023 Best Places to Work honoree

Tampa Bay Business Journal — April 26, 2023 Sourcetoad has been selected as a 2023 Best Places to Work! We are thrilled to be among Tampa's top workplaces for the fourth year in a row, and we are grateful to each of our Toads for making Sourcetoad such a fantastic...

This Year in FinTech: Trends to Watch in 2023

This Year in FinTech: Trends to Watch in 2023

The financial services industry experienced rapid digitization throughout the COVID-19 pandemic, and growth of the financial technology market is expected to continue in 2023. The global fintech market grew to $158.9 billion in 2022, and projections estimate it will...

2023 Top HealthTech Trends

2023 Top HealthTech Trends

Technological innovation has played a vital role in the transformation and growth of the healthcare industry. Not only is the medical space an early adopter of emerging technologies, HealthTech is currently one of the fastest-growing industries worldwide. The global...