We are believers in the modular design process, but when it came time to try and do this for dozens of clients each year, we surveyed the landscape and simply couldn’t find a tool that met our needs. So we took a step back and laid out our ideal process.

PatternPack is officially a 1.0 release. At Slalom, we have used the tool to power client websites for some time. Clients, designers, and developers alike love it because of the ease with which you can update and maintain the library.

We have a basic example library available on GitHub if you want to check out how it works. This project is already configured for use and is a great place to get started with PatternPack.

Adding a Pattern

By default, PatternPack follows a simplified Atomic Design structure (atoms/molecules/pages), which is customizable. To add your first pattern, create a src/atoms directory. You’ll have to add two files for each pattern:

A Markdown file (.md)

A Sass or LESS file (.scss or .less)

The Markdown can contain anything, but we recommend starting with this pattern:

The site is built for ease of development and includes livereload and auto-compilation of all your assets. Simply update your markdown and CSS files and automatically see your changes reflected in the browser.

Releasing Your Code

Without a doubt, the most powerful feature of PatternPack is it’s ability to share UI code and keep your pattern library in sync with one or more applications. PatternPack outputs an npm or bower module that you can add to any project as easily as Bootstrap or jQuery.

To release your code to an application, commit all your changes and run a few commands:

This will compile your documentation site and create a release commit that’s tagged with your version number. PatternPack supports Semantic Versioning of your library out of the box through the following commands:

PatternPack and the Evolving Design Process

Our design and development teams are now leaving our clients with a maintainable design system that sets them up for success even after we’re gone. As a project matures and the design system becomes more robust, we’re able to go straight from whiteboard sketch to coded prototype because it’s easy as stacking lego bricks to test out a concept.

We hope that you’ll find PatternPack just as useful in your product development process. Check out the official website and GitHub page for more resources. You can also follow @patternpack on Twitter.