The use of pattern libraries (or style guides) is becoming more and more popular these days (if you’ve never heard of a pattern library before, I have some great articles about them listed at the bottom of this post). The idea has intrigued me for awhile, but because I work on mostly smaller sites and mostly as a one-person team, I didn’t see the benefit (or at least enough benefit to make the effort worthwhile). Although it’s true that many of the advantages that come with using a pattern library don’t exist for many of my projects, I finally decided it had enough benefits to integrate into my workflow.
I knew that to make a pattern library worthwhile for my workflow, it not only needed to help keep my code clean and concise & my designs consistent, it needed to improve (and speed up) my workflow. I used the A Pattern Apart & BareBones to create the framework of the pattern library and then added my own design and code snippets to create the various patterns. The result: a boilerplate pattern library that I can use as a starting point for each of my projects. I put together common elements that I use in almost every site in the pattern library (buttons, headings, navigation, etc.). This way when a new project begins I can change colors, typography and a few basic styles and within a few minutes have a pretty solid starting place for a style guide for the site. I have a few default patterns in the library, but usually customize, add, and remove sections based on the site I am working on.
Below I break down into a bit more detail the organization and setup of the pattern library. I have loaded the pattern library (with a few modifications described below) to GitHub, so feel free to dig in and explore. Keep in mind this is still very much a work-in-progress and I am by no means a front-end guru, so if you have any thoughts, suggestions or corrections, I would love to hear them.
One of the biggest benefits of a pattern library in my mind is organization. The importance of organization becomes magnified as you work in larger teams, but it is still important on one-man projects. Keeping your code organized, well-documented and easy to read allows future developers that may touch the code to get up-to-speed as quickly as possible (whether they are on your internal or the client’s team).
- File Structure: I have all css, js, fonts, images and other media in a subfolder called ‘library’ (each in their own subfolder). I do this in all my sites. This helps keep all of those items organized in a single subfolder and easy to find. All of the pattern elements are located in the ‘pattern’ folder as individual HTML files. These files are automatically pulled into the main pattern library page using some PHP code.
- CSS: I use LESS as the pre-processor when writing CSS. I have the CSS divided into 8-10 .less files that get merged into a single .css file when compiled (using CodeKit, which is amazing!). The key here, as Susan Robertson so wisely wrote in her article Creating Style Guides, is to use the same CSS from the live site within your pattern library. This means as you update CSS for the site you can a) make sure the changes are consistent with the rest of the site easily and b) make the change once. As Susan wrote, ‘If you have to do extra work to update your style guide when making changes to your look and feel, the likelihood of it staying up to date is pretty slim.’
- JS: All JS is compiled and compressed into a single production.js file via either CodeKit or Grunt before being used in the site. Before the code is compiled, I have my JS divided into a plugins.js file with all external, plugin code and a main.js file with all hand-written, project-specific JS.
Colors & Typography
The colors and typography aren’t necessarily patterns, but help define the overall site’s brand. I wanted to have them at the top of the page to quickly give some reference to the palette and type used throughout the rest of the patterns. These colors also align with the color variables I use when writing LESS to make sure all of the colors used throughout the site stay consistent.
The core of the page consists of various patterns. From buttons to navigation to form elements, the various patterns represent pieces of a site that go into making the larger whole. A few quick notes about some of the various patterns/sections found throughout the library:
- Global: I include the footer, head and header elements of the site here. These are great starting points when beginning a new site.
- Headings: Recently I have begun use ‘-alt’ to create secondary header styles for a site. It opens up a lot of potential. One area I am having difficulties determining the correct route to go is using the semantic heading style vs. the one that is sized correctly. For example, setting all h2’s to be 2.25em makes the code really concise and easy to follow, but it encourages you to use a h2 tag for a heading where you otherwise would use an h3 or h4 because the h2 is the appropriate size.
- Icons: For almost every site I include a set of 40-50 icons from the free Font Awesome set. These are more generic icons that can be used for social links, navigation drop-downs, etc. They are fairly generic so they work stylistically with most sites and are fairly lightweight. I then include a secondary set of icons that are more specific to the site. I don’t include a secondary set in GitHub because most of the sets are ones I have purchased that require a license. On the example site I include the entire set of Streamline (an awesome—and huge—icon set). I would never include all of these icons in the final project, but this acts as a reference to quickly find the icon and the CSS class value. I use Fontastic to create versions of the set with only the icons I need.
- Patterns: This section is always growing. I create elements that I reuse in many sites and then pick and choose based on the site. Any site specific elements usually go in this section as well.
As I mentioned above, I am still at the infancy of using the pattern library and determining how it best fits into my workflow. At this point I have been mostly using it as a guide for myself and not sharing it with the client until the end of the project. I could easily see it becoming a great tool to use with clients early on (before even beginning initial designs) to give them options for color, type, etc. before even having to open Photoshop (kind of a different approach on Samantha Warren’s Style Tiles concept). I would love to hear what you think of the pattern library, any suggestions you have or ways that it could be improved. If you are just getting started with pattern libraries and would like to see some great examples, check out these:
If you would like to learn more about style guides and pattern libraries, here are some of my favorite articles:
- Getting Started with Pattern Libraries
- Creating Style Guides
- Front-end Style Guides
- Atomic Web Design