In this second instalment of articles about PatternLab, I am going to cover some basics around installation and configuration that can hopefully clear out some confusion that some people have expressed to me recently.

I do consider PatternLab a mature tool, but its complexity might be overwhelming to many, both developers and designers, and if you have not investigated the topic of pattern libraries enough, it can cause more problems than those it solves.

This article is going to be the first of a series on PatternLab [PL], starting from the very basics and digging into much more detailed aspects of it.

In my previous article, “CSS architectures for UI developers” I've tried to express how complicated is the situation surrounding the ideation, creation, and management of design systems for the web.

I worked with Atomic Design and the PatternLab tool on at least 3 major projects, most notably during my period at Sainsbury’s in introducing and creating from scratch the style guide for the now defunct Sainsbury’s Entertainment on Demand, helped the Groceries Online team in getting their own style guide sorted, and supervised as a technical advisor the initial creation of the global Sainsbury’s style guide, project Luna.

In this article, I’d like to highlight some of the problems we solved in using a pattern library, and more importantly, some of the problems I’ve encountered in the first of these projects, by creating a pattern library for a legacy project.

Writing good CSS (or whichever sub-flavour) requires a good level of experience. In this moment of time, we are still trying to figure out the best way to scale CSS allowing maintainability and readability without sacrificing performance and ease of use. Some good practices first, then methodologies and systems have been created. Learning, if not mastering them will allow you to approach any CSS framework or library, being it legacy or open source and create new ones with - still relative, ease.