Skip to main content

Pattern Lab and Atomic Design

Author by Carl Schweitzer

This week on the MS Dev Show, we talk to Brian Muenzenmeyer, author of the Node port of Pattern Lab. Pattern Lab is a really cool open source project that provides a new way of thinking about designing and architecting websites, with a set of tools to make this a much easier and nicer team approach.

At the heart of Pattern Lab is Atomic Design. It makes you think about composing small components individually and stitching them into larger and larger componenets. This happens to a point in other design patterns that we use in software, but is really emphasized here. If we consiously design each atomic piece, and how it fits into the bigger picture, we can also plan for change in the future. I love the following image, it really visualizes the concept well.



During the show, we talked about "operationalizing your style-guide." I really think that this is important, because we can codify the style guide for a brand itself. When it changes, the effects can flow throughout our software naturally with little human effort and interaction. This also turns the creation of our software into a cross-functional team approach. Designers, Managers, and other non-technical roles get a larger direct say into the end-result of software.

That's where the tooling of pattern-lab itself comes in, to solve these problems. There are tools to keep your code in sync with open browsers, in real-time. Pattern Lab also contains tooling to keep multiple browsers on the same page of your site as you navigate from page to page, to make testing easier. It does all of this and more without getting in the way of your current tooling. You can still use your favorite programming tools or languages with these libraries.