Fighting Design Bloat with Pattern Libraries
Pattern libraries exploded into popularity over the past couple years as a rebellion against confusing, mismatched designs & websites that become increasingly complex and difficult to maintain with age. Two years ago, we found ourselves facing that situation at DoSomething.org. When performing an audit of our existing stylesheets, we found repetition all over the place. It was hard to know where a particular rule would apply, and the only reliable solution was either duplicating code using new selectors, or applying skyrocketing specificity (hello,
Things had grown bulky, and it was time to slim down. So we declared bankruptcy and began to rebuild our styles with a focus on maintainability. We rebuilt our site chrome in a fresh stylesheet, which we used when we redesigned our homepage in 2013. Over the course of a year, we built new products exclusively using this new foundation.
Of course, most websites are never “finished”. We knew it would only be a matter of time until our lean new stylesheets once again grew bulky & slow, unless we addressed the problems that led us there the first time around. This meant changing how we wrote our styles. Instead of styling each of these new products as individual pieces, we split our designs into “components” that could be shared throughout the site. That way, each page only required a tiny bit of “glue” to position or tweak them as necesssary & the majority of the codebase could be reused.
We built Forge, our pattern library, as a weapon against cruft. It’s a living design tool that’s continued to grow and been refined over the past two years. By building & cataloguing our reuseable components, we’ve been able to keep our stylesheets to a reasonable size even as our site continues to grow.
Your Own Pattern Library
Think of building a pattern library as building “your own personal Bootstrap”. Instead of a toolset for building any sort of website, you’re building a very specialized toolset for building your website. So while Bootstrap includes grids, form styles, and some common elements like breadcrumbs, your own pattern library will include things that are much more specific.
When building a pattern library for yourself, you’re zeroing in on patterns in your own designs. What makes your website special? What unique challenges has your team had to solve? The easiest way to start building a pattern library is to look for things that you repeat in your designs.
Fonts, Colors, & Measurements
Start with fonts, colors, and text sizes. Brand colors & typographic styles are used everywhere in almost any type of project, and are easy to standardize and reference as variables using a preprocessor like Sass.
Also consider defining a scale of standard measurements to use for spacing throughout your site. We settled on
48px for our site. This helps keep spacing consistent between different pages and components, and helps us avoid wasting time measuring pixel dimesions on mocks.
Are there certain types of “components” you use throughout your site? Think about small things like buttons or text inputs, but also think about larger elements like an author biography or navigation menu. When you find something you’ve used more than once, consider adding it to your pattern library.
It’s helpful to think about the structure of the patterns you’re finding, in addition to their visual appearance. Let’s drill down into some components we found on DoSomething.org as an example.
We found configurations of the same three elements on almost every page of our site - an image, a title, and a text block. It turned out that we one style of these “gallery items” for displaying campaigns (a specific type of content on our site). We formalized this into a Campaign Tile component.
The others were all variations of Nicole Sullivan’s media pattern, with the addition of an “unstyled” media block, where the image sits on top of the content. Because it made more sense to our team, we called this component a Figure.
Zooming out, we found we used groups of these items displayed in a grid on a ton of pages on our site. Even though the content inside these galleries differed, the structure – spacing between items & number of items per row followed a pattern. We’ve standardized this into a Gallery component that we use to structure any sort of “collections” on our site.
Boostrap and other general-purpose frameworks ship with grid systems out of the box, which can be used with classes like
.col-xs-4. These systems force layout information into your markup. We decided to use a semantic grid framework for Forge, which defines grids as part of your pattern classes using preprocessor mixins.
We use Susy to fit components to our grid. The advantage over simpler systems? Your markup won’t need any changes if you decide to tweak a component’s measurements in the future.
Just like with galleries, we found patterns in how we laid out content on pages. Regardless of the contents of the page, we almost always included a two-column gutter on either side. When using paragraph text, we almost always used a “three-quarters” layout which added a further 3 column gutter on the right. And we often used “half” width containers that split content into two columns. We formalized this as a Container component that we use on every page of our site.
The combination of a grid system and standard layout components allow us to maintain consistency throughout our site, easily scaffold new pages, & significantly cut down the page weight of our layout styles.
Even though we’ve spent the whole blog post talking about it, the pattern library isn’t your finished product. That’s still your website. The pattern library lets you move faster as you build your own design language, and keeps your website’s design cohesive even as it grows and changes.
It doesn’t stop there, though. Building a pattern library has revolutionized our design and development practices at DoSomething.org. I’ll be covering our experiences in my talk “Taking Your Pattern Library to the Next Level” at Future of Web Design NYC! Hope to see you there!