“We have a few apps, but none of them are styled consistently.”

As a design consultant, I regularly hear complaints from clients about slight design styling issues and trying to keep patterns in sync across multiple applications. At Slalom Consulting in Dallas, we help clients solve this problem through living style guides or Pattern Libraries.

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.

Say Hello to PatternPack

PatternPack is a grunt plugin that makes it easy to

• Design & Build your interface using HTML and CSS
• Document the patterns using Markdown
• Share the versioned code to multiple applications using npm or bower

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.

If you’d rather see much of this in video form, check out Fight the Zombie Pattern Library from the Big Design Conference 2015.

Getting Started

To get going with your own pattern library, simply create a new project and install Patternpack as a dependency:

npm install patternpack --save-dev

You’ll have to set up a grunt task in your gruntfile.js, which can be configured further if needed (documentation):

module.exports = function(grunt) {
  grunt.initConfig({
    patternpack: {
      options: {
        assets: ‘./src/assets’
      },
      run: {},
      build: {},
      release: {}
    }
  });  grunt.loadNpmTasks('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:

---
title: Your Pattern's Name
---
A description for your pattern### Example
<div class=”library__example”>
 A rendered example of your pattern
</div>### Code
```html
The code snippet for the pattern
```

Once you’re ready, start up your library with

grunt patternpack:run

and connect to your server at http://localhost:8888/. You’ll notice that there isn’t much styling. This is intentional — PatternPack isn’t meant to be a Bootstrap replacement. It’s meant for you to “build your own Bootstrap.”

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:

grunt patternpack:build
grunt patternpack:release
git push origin master --follow-tags

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:

grunt patternpack:release-patch  // Bumps the patch version (i.e., 1.0.x)
grunt patternpack:release-minor  // Bumps the minor version (i.e., 1.x.0)
grunt patternpack:release-major  // Bumps the major version (i.e., x.0.0)

Now you’re ready to import your library into a project

Importing your Library

Importing your library is as easy as npm or bower install. If you publish your library as a public npm module, then just install that. If it’s private, then you can point at a Git repository.

{
  "my-pattern-library": "http://bitbucket.org/user/my-pattern-library.git#1.0.0"
}

There are several options for authenticating this, including SSH or creating a read only user whose credentials are embedded the package.json

Once imported, you can point directly to your library’s CSS in the node_modules folder:

<link href="/node_modules/patternpack-example-library/dist/pattern-library/assets/css/patterns.css">

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.

PatternPack was conceived and built by John Gully and Marcelo Somers and is licensed under an MIT license.