If you’ve been making websites for a while, you remember the time when everything was fixed widths, sidebars, a content area, header and footer. It was a simpler time that required far less ambiguous structure and methods.

Since then, websites have evolved considerably and are everchanging. With every transition come new methods, and design patterns are becoming the norm for a lot of organizations. A List Apart has a design pattern library, as well as MailChimp; both of which are extensive and serve as a solid example. If you’re new to front end design patterns, UI-Patterns is a website that is entirely devoted to compiling pattern examples for reference.

What is a design pattern? Paul Boag has a blog post that goes into detail and explains it well. In the article, Paul quotes UI-Patterns’ summary of what design patterns are:

Design patterns are recurring solutions that solve common design problems.

We’ve been creating pattern libraries for big projects at Big Sea for awhile now too, but the work of maintaining the library sometimes loses steam as we push through finishing actual sites for launch. The patterns grow outdated as we tweak minor styles or QA on the live site, or we stop adding smaller patterns in the interest of time.

We always regret not maintaining the libraries when we have to create new pages or content, so I decided to build a tool that makes maintaining the libraries a little easier.

Automated Pattern Libraries

A word before you dive in: this tool is still pretty new and I’m sure it will evolve, but feel free to submit pull requests or clone it and make it your own. Hooray open source!

This tool that allows you to collect your design patterns and display them on a single page for client and team reference. As a prerequisite, there are some tools I’m going to go out on a limb and assume you have some sort of grasp of or familiarity with. If not, I recommend checking them out first:

The goal of this project was to simplify the pattern library workflow so that we can focus on our actual project’s design and less on displaying the bits and pieces that all come together in the end.

Getting started

Clone the repo

First off, you’ll want to clone the repo from Github into your folder of choice. Since the project uses PHP, you’ll need to be running MAMP (Mac), WAMP (PC) something similar if you want to work with it locally. If you want to tailor the library to your project, open the project.json file and edit the parameters in there accordingly. You can also leave them blank if you’re not concerned with such features.

Grab the gems

In order to do this, you’ll need to have Bundler installed if you don’t already. Once you’ve installed Bundler, navigate to your new repo’s directory via command line and run bundle install. This will install the required gems that are outlined in the Gemfile.

Plugging in your patterns

You’ll notice that there is a directory named “patterns” — this is where your design patterns will be collected. So begin building your patterns as HTML files and place them here. I recommend giving them clear, concise names and trying to keep things ambiguous as to not lock yourself into something too specific to your project. The more modular your patterns are, the more reusable they’ll be. I’ve included some sample patterns for reference and to provide a better idea of how the end result will appear

Grab the Node modules

When you’re ready to start building your pattern styles, navigate to your project’s folder via command line and type npm install to install all of the required Node modules. The package.json file determines what needs to be installed in order for you to get started writing your Sass.

Now onto Grunt and Sass

In the /assets/ directory, you’ll notice that there is a /scss/ directory. All of your pattern styles can go here in .scss file format (you can always change this to .sass in the Gruntfile if you’re more comfortable with that, but here at Big Sea, we’re all partial to Scss because brackets). This is where sass-globbing comes into play. Instead of writing all of your patterns’ styles in one single Sass file, you can organize them into a hierarchy like so and the sass-globbing module will automatically bundle them together:

- /assets/
-- /scss/styles.scss
-- /scss/_alerts.scss
-- /scss/_lists.scss
-- /scss/_wells.scss
--- /scss/forms/_buttons.scss
--- /scss/forms/_fields.scss

Bells & Whistles

I’ve thrown in some small items to make the tool a little more useful. If for some reason you have no use for viewing the raw HTML boxes that appear to the right of their associated patterns, you can toggle them via the “Toggle Raw” button in the top right. Want to link directly to a pattern instead of having your client or user scroll to it manually? Click the blue anchor link in the gray title bar above each pattern that is preceded with a hash symbol.


Wrapping up

Once you’ve got the workflow down, you can continue to add as many patterns as you need and go from there. In addition to a directory for your SCSS, there are ones for Coffeescript and Javascript as well in case your project requires scripts. Just be sure to edit the pattern library’s index.php to include these in the <head>.

Like this tool?  Have any suggestions for improvements?  Need help?  Feel free to email me and let me know!