Smarter ideas worth writing about.

Utilizing Pattern Library Benefits with a Pattern Lab Project

What is a Pattern Library?

Pattern Libraries are becoming a more and more common tool for companies. What a Pattern Library does is house all the common UI elements, or components, used on a website. This effectively creates a living, online, styleguide. Pattern Libraries, however, offer more features than a styleguide. For one, most of the different Pattern Library creation tools generally offer code samples for each pattern. Additionally, they offer some way to document on a per pattern level. With these features, we get a source of truth for your patterns. We get the exact markup structure, why and how we use it, and even the stylings attached to the pattern. Using these tools to create a Pattern Library can help speed up a team’s workflow by defining a common code standard and vocabulary allowing for a more collaborative and constructive design system. They also make testing easier and allow for faster prototyping without spending large amounts of time and money.

As we can see, these tools offer a lot of benefits to a team. By using a Pattern Library, we now have one single code base that houses both code and design guidelines. Developers can easily determine the structure and layout of patterns as well as have clear coding standards for future development. Through the documentation, designers can set specific rules such as image sizes, character counts, and font sizes. They also get the added benefit of visually seeing how the pattern will live and interact with other patterns. This provides greater consistency for the team overall. Another great benefit of a Pattern Library is pattern reusability. Since we have a collection of all UI patterns we can visually see what patterns might be able to have multiple purposes or what patterns might be combined to serve similar purposes, greatly reducing duplicate or unnecessary code. Finally, we get the added benefit of testing our patterns in multiple aspects. Patterns can be tested individually or with other patterns in many different layouts which can help with responsive testing. With the flexibility of adding patterns to pages quickly, we gain the benefit of giving clients or owners early visibility on completed or in progress pages.

While there are plenty of Pattern Library tools out there such as Fractal or Fabricator, this blog post will focus on Pattern Lab and how to get a project setup.

Why Pattern Lab?

Pattern Lab is a static site generator co-created by Brad Frost and Dave Olsen. Some great features that come with this tool are it’s built in resize bar that allows for responsive testing, documentation on a per pattern basis, JSON data that allows you to setup conditional statements as well as dynamically adding content to patterns, and it’s use of the mustache templating engine to allow for dynamic markup. Since it focuses on the Atomic Design methodology, also created by Brad Frost, it allows you to build and combine your patterns fluidly. This is one of Pattern Lab's greatest functions. By allowing patterns to build off each other, it gives your developers and designers access to a root component. They can easily see how a button will look as a single UI element or as a UI element on a full page.

Recently I was at a client whose code base was very difficult to decipher. There were duplicate stylings, patterns, code in general. Finding the correct file to work on or change was proving tedious and difficult at times. After hearing complaints from the client themselves about these issues, we discussed setting up a Pattern Lab to consolidate, standardize, and define their website.

Setting Up

To start visit patternlab.io. Here you can view the demo for Pattern Lab, the documentation, a download the version of Pattern Lab you desire. This blog post will describe the process for setting up the Node Version Gulp Edition of Pattern Lab on a Mac based off the pre-built version.

First, you need to create a directory for our Pattern Lab.

Next, you need to clone the repository from Github. To do this, make sure git commands are installed on your Mac. Then copy the git url

open your terminal window, navigate to your created directory and type git clone https://github.com/pattern-lab/edition-node-gulp


This will create the actual Pattern Lab project structure. You can then rename this directory to whatever name you wish. Once the directory has been renamed, navigate to it in your terminal. Npm needs to be installed to manage all the project dependencies. Run the command npm install inside the patternlab project folder.

Npm install will install all dependencies defined in the package.json file included in the pattern lab repository. After the install is successful, you can run the commands gulp patternlab:serve or gulp patternlab:build that will run a local server on port 3000 or build the project to the public folder respectively.

We now have Pattern Lab setup and ready to use. In a future post, we’ll look at creating a new component in Pattern Lab and how to correctly use mustache templating and JSON data layer.


Contact Cardinal to learn more about the benefits of using a Pattern Library and to schedule an on-site presentation for your organization.

Share:

About The Author

Front End UI Developer

Casey is a Front End UI Developer in Cardinal's Cincinnati office. He has worked on a wide variety of applications ranging from .NET and SharePoint to Pattern Libraries. His current focus is learning more about different Pattern Library tools and best practices.