I love the concept of pattern libraries (and the use of Pattern Lab specifically, as Brett mentioned).

I’m wondering, though, if anyone has a good workflow for iterations and updates to your styles over time. Do you apply the changes to the pattern library first to test compatibility before shipping it to production, or vice versa? It seems like twice the work – though the work pays off in having that extra resource.

I love this, Anna! I’m working on my personal blog right now and keep getting bogged down by how something should be marked up. I know at a certain point it becomes more of a personal preference, but this helps so much.

A much more professional approach than my personal attempts to a similar system over the years. I’m curious about the maintenance as Josh Larson mentioned above. Sass files can be dynamically read from the actual work files, but what about markup?

So while I understand the rationale behind pattern libraries in terms of being able to speed up development by reusing common elements etc. I would really like to understand how to integrate it into my workflow.

I see that a lot of people have a page with all their patterns and I wonder how they work with that in real life. Is pattern library just another word for a collection of snippets?

For instance Rick Cox, how do you apply your framework into daily work?

Ahh I see Ricky Cox, that answer actually helped a lot. You see I also have my snippets, I use them freely in my IDE. But they are all saved in a ‘framework’ css file which i include in all my projects and then build/style on top. Hence I could have myself a pattern library in a matter of minutes. For instance if had to engage other team members or for use as documentation.

Is the intention that the pattern library would refer to the same stylesheets that the production site uses? I didn’t see anything that deals with having to overwrite styles that are specific to the library but not the site itself. I’m curious about the strategy in finding a way to illustrate patterns for a site built with modules whose styles that are different depending on what part of the template that module lives in. Does the entire template then need to be illustrated within the pattern library?

I’ve always found Pattern Libraries very, very interesting but I never quite gotten around to making one from scratch. I always tend to either tweak someone elses or skipping them entirely (the latter I’m sorry to say being most used solution).

Any “Pattern Libraries for Dummies”-tips for guys like me, who really want to start from scratch?

If you are using Sass and Grunt then I would definitely recommend taking a look at Sassdown. It automatically generates a styleguide (similar to Paul Lloyd’s Barebones) from Markdown comments in the Sass partials. It takes all the effort out of creating a styleguide with the added benefit of well commented code.

Thank you for a nice read and for sharing your experiences, Anna. I feel like lots of designers/developers will integrate some sort of pattern library into their workflow. Did you create the pattern library for Code for America in parallel to the development process or was it sort of a subsequent documentation after the design and development work was (mostly) done?
All the best!

I was wondering, is there a tool for creating atomic design patterns which has the relationship “Used in” and “composed by”? So if I need to update an atom, the change is reflected on the molecules and higher levels immediately. I thing that is missing from the Patterns lab tool.

Hi!
This is awesome. I’m looking for a way to include css and javascript behaviors along with the physical presentation; what would you suggest? This would be to allow (soon to be) hires to reuse the code on new versions of a site (we do approximately 10 rebuilds/versions of a site per year).

I’m in the process of building a pattern lib for my company and am running into the same issue. I can put it all in a wiki allowing me to cross reference, but that doesn’t allow me to have inline examples, which I see as important.