Getting Started With Pattern Libraries

by Anna Debenham

18 Reader Comments

Back to the Post
  1. Love seeing people share more pattern libraries/living style guides they’re working on.  For anyone looking to build their own pattern library/living style guide I’d recommend checking out Style Guide Boilerplate or Pattern Lab.
    Copy & paste the code below to embed this comment.
  2. 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.
    Copy & paste the code below to embed this comment.
  3. I love pattern libraries because they make me so much faster. I created a project to bootstrap the creation of pattern libraries. Still in it’s infancy, but still worth a look:
    https://github.com/resource/fabricator
    Copy & paste the code below to embed this comment.
  4. 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.
    Copy & paste the code below to embed this comment.
  5. Great article! I’m working on a pattern library for the company I currently work for and this is going to be very useful. LOVE the Code for America pattern library.
    Copy & paste the code below to embed this comment.
  6. Great insights on pattern libraries. This is gone be very useful. Thank you Anna!
    Copy & paste the code below to embed this comment.
  7. 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?
    Copy & paste the code below to embed this comment.
  8. Pattern Libraries are a great idea. I keep adding to mine as I work on various projects. http://www.suture.net/framework/components
    Copy & paste the code below to embed this comment.
  9. 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?
    Copy & paste the code below to embed this comment.
  10. very good
    Copy & paste the code below to embed this comment.
  11. Hi Johan, the workflow varies depending on the usage. For me the boundaries are a bit blurred between Framework, Snippet Library and Documentation, because I use it on multiple sites.
    Copy & paste the code below to embed this comment.
  12. 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. Thanks for the clarification
    Copy & paste the code below to embed this comment.
  13. 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?
    Copy & paste the code below to embed this comment.
  14. I dig the idea of Pattern libraries to promote code reuse and maintenance. Thank you! I will checkout your book too.
    Copy & paste the code below to embed this comment.
  15. As always a great read form Anna :-) 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? /KR
    Copy & paste the code below to embed this comment.
  16. 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.
    Copy & paste the code below to embed this comment.
  17. 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!
    Copy & paste the code below to embed this comment.
  18. 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.
    Copy & paste the code below to embed this comment.