Cloud Four Blog

Technical notes, War stories and anecdotes

Common Patterns in Styleguides, Boilerplates and Pattern Libraries

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.

In which I willingly make a spreadsheet

 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.

Lessons learned

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.

27 Comments on “Common Patterns in Styleguides, Boilerplates and Pattern Libraries”

  1. Brad Frost says:

    THIS IS FUCKING AWESOME. Thank you so much for this, you have no idea how much this is going to help me.

  2. 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.

  3. I have to agree with Brad & Steven, this is an amazing job! Thanks Tyler

  4. 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.

  5. Jiri Mocicka says:

    Mate, you are legend!
    That’s awesome shortcuts especially for people who prototype.

    J+

  6. 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!

  7. 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.

  8. Oriol.tf says:

    I’ve seen in the spreadsheet that Zurb Foundation has been marked without icons. Nevertheless it has actually icon fonts: http://zurb.com/playground/foundation-icons

  9. Adam says:

    Amazing, thank you for this.

  10. Jake says:

    Awesome! Would love to see Inuit added to this list.

  11. Wow, that’s an extensive list. That will come in handy in future projects. I personally like https://github.com/csswizardry/inuit.css

    It is a Sass based, Object Oriented framework that is full of objects and abstractions. inuit.css provides little-to-no design which means no undoing things, no deleting CSS and no adhering to other peoples’ design decisions.”

    which is really easy to extend.

  12. That’s crazy good! Thank you so much for sharing this. REALLY THANK YOU!

  13. Tyler Sticka says:

    inuit.css has been added to the doc. Thanks for the suggestions!

  14. Thank you so much for the fantastic research, Tyler. It’s great to have a comprehensive list of components that would go into a style guide or a pattern library. Good stuff.

  15. 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

  16. This is the coolest thing ever. This will be my starting place for all projects. Thanks!!

  17. Nir Benita says:

    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!

    • Tyler Sticka says:

      Thanks, Nir! I considered throwing this onto GitHub instead of in a Google Doc, but couldn’t find a format that balanced presentation, ease-of-maintainability, etc. quite as well. But I’m certainly open to suggestions if you (or anyone else) has any.

  18. Larry Botha says:

    Wow, this is an excellent resource!

    Never really thought to look for other people’s styleguides… have just been building my own!

    http://larrybotha.github.io/styleguide/

  19. @janogarcia says:

    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/

  20. Vinay Raghu says:

    Thanks for the amazing effort put into this!

    “Insanely useful” as mentioned in one of the above comments. Going to come in very handy to a lot of people.

  21. KJ says:

    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.