Skip to main content

Common Patterns in Styleguides, Boilerplates and Pattern Libraries

By Tyler Sticka

Published on May 8th, 2013

Topics

It’s hard to believe it’s been almost three years since the publication of Ethan Marcotte’s seminal Responsive Web Design article on A List Apart.  The ideas and techniques described therein blew our minds while forcing us to drastically reconsider our design processes. Even today, the struggle continues to determine which design deliverables make sense in a post-PSD era.

Personally, I dig Dave Rupert’s idea of “Tiny Bootstraps, for Every Client”:

Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients’ needs. These living code samples are self-documenting style guides that extend to accommodate a client’s needs as well as the needs of the ever-evolving multi-device web.

The whole post is great, and it got me thinking… along with solid content strategy, design and engineering processes, what steps can we take to insure our “tiny bootstraps” are comprehensive enough to remain relevant and useful long after launch?

Cue Jason with a cool idea: We could document patterns in existing frameworks. A list of what’s typically included might serve as a good starting point, something to measure our client deliverables against to make sure we haven’t overlooked anything obvious.

 I combed through a (non-exhaustive) collection of suitably broad or noteworthy links from Anna Debenham‘s list of front end styleguides and pattern libraries, recording instances of observed patterns and adding new ones as necessary. I skipped over anything that seemed too idiosyncratic, and grouped elements of similar intent even if their description or implementation differed.

The results are contained in this handy Google Doc.

I found this to be a worthwhile exercise. It helped me wrap my head around the elastic scope of a “tiny bootstrap.”

I thought there’d be more overlap between frameworks than there is. I recorded over 160 distinct patterns, none of them ubiquitous. Some came pretty close, especially headings 2 through 4, typographic elements and pre-HTML5 form elements. No single framework included even half of the total recorded patterns (Bootstrap had the most).

Sometimes the most infrequent elements surprised me with how obvious they seemed in retrospect. For example, color guides and font stacks only occur in a couple of places.

The thought of maintaining the document indefinitely makes me queasy, but I’ve already started referring to it frequently. I’d love to know if anyone finds it as interesting or useful as I have.

Comments

Steven Bradley said:

I’ll echo what Brad said. This is great. I’ve been on board with the idea of something like a working style guide as deliverable for a couple of years now, but have never been sure on what specifics to include.

This is going to be a great help. Thanks.

Aki Karkkainen said:

This is insanely useful. Like so many other people, I’ve been trying to figure out what
the responsive deliverables should contain. With your list, this task suddenly becomes much
more tangible and manageable.

As a longtime fan of styleguides and modular development, I’ll be sure to incorporate your list into my Grunt-based project boilerplate & workflow setup: https://github.com/akikoo/backbone-requirejs-multipage-boilerplate.

Thanks again, much appreciated.

Brett Jankord said:

The concept of tiny bootstraps is really brilliant. I’m glad to see Style Guide Boilerplate in this list, my intention for that project is having to be a go to resource for people looking to create their own tiny bootstraps.

Seeing all this data together, I see a few things that would be good to add to the Style Guide Boilerplate and a few things I could probably remove. Thanks Tyler!

Derryl Carter said:

Super cool. Thanks for putting this together!

I think many of us have arrived at a similar, generalized understanding about this stuff. I’ve shifted toward a workflow where I build a customized, boilerplate-ish set of code as I get into any new project … but I’d never thought explicitly about a checklist of components it should/must contain.

Stephane Curzi said:

I have been thinking about pattern in design for a long time, when I first read about style tiles (http://styletil.es) it all made sense, design should not be presented as a flat PSD but instead as a group of style. Many client are not there yet but I guess it will come at some point. Right now, I’m creating a set of pattern to quickly build a prototype so your list is very welcome.

Also, thanks for including my framework BaselineCSS in your list, haven’t been updated in years but at some point I wish to revive it, I have a couple idea left for this project.

Thanks

Nir Benita said:

This is great! I recently got into oocss so I could create this very thing! Hearing it from you really tells me i’m on the right track!

I would consider version controling it instead of a Google doc

Thans again!

@janogarcia said:

Excellent resource! Thanks for sharing, Tyler!

Another great library you should definitely consider including is AUI from Atlassian:

AUI frontend library (Apache License v2.0)
https://docs.atlassian.com/aui/latest/

Design guidelines for Atlassian products (not open source)
https://developer.atlassian.com/design/

Regarding tools for creating living style guides and pattern libraries you can find an interesting collection on Linowski’s blog:

http://wireframes.linowski.ca/2012/06/living-css-style-guides-pattern-libraries/

KJ said:

This is pretty awesome.

I just stole a few of the rows and added it to my spreadsheet I’ve been using for the last few years….

The only problem is it only covers design patterns, i.e. aesthetics.

The problem with design is that its only a piece of the (more valuable) puzzle known as revenue generation.

If you’re selling inputs (you used the word “deliverables,” which I detest) the client has to look elsewhere for outputs (results). That will limit the investment they make in you, the designer. Deliverables are, after all, a commodity. Good luck talking about the value of your creative ability vs. another designer’s. It’s an intangible asset (OK you have a portfolio, great).

If you’re on a team, good for you. You probably have a marketing guy, or a sales guy, or a biz dev guy that can carry the torch. Maybe you even have a front end developer, engineer, content guy and SEO.

If you’re a solo designer you’re system / checklist should include a proportionate amount of technical, SEO, and marketing items….What I’m trying to say is…

Does anyone have a Mother-Of-All Project Checklist that they care to share? One that encompasses a broad spectrum of best practices, incorporating everything from server configuration to launch strategy?

Thanks for the design tips. Saved me a lot of time.