Pattern Library Software

Question

I've been looking at a recent A List Apart article on creating pattern libraries. They point to a few example pattern libraries:

• A List Apart
• Code for America
• MailChimp

Now working in a UX Team that services a global product family, this seems something we should be investing our time in.

The above article also refers to an open-source repository to help you build up your own pattern library. This is fantastic, but being greedy I want more! :)

The answer to the following question may well be 'get some development time and roll your own', but is there a repository/product out there which will help me build our own pattern library as well as do the following:

• Allow us to tag patterns so we can see them in different contexts? i.e. patterns used in a particular product, patterns used on small screens, form patterns, etc. This will allow us to build up a powerful IA for the library
• Allow us to be technology agnostic - as a UX Team we don't want to dictate to the developers which technology they should use (whether that is server or client side). This may limit us in what we can add to the library, but we want to start with just showing examples based on semantic and accessible markup.
• Allow us to overlay different stylesheets. We work with many clients who want there own brand and the ability for stylesheet switching would be great as well as a powerful sales tool.

I'm sure I could think of other items to add to this list, but I've only just started thinking about this :)

Thanks in advance

Answer 1

Here is a really great article by one of the best in the web, Brad Frost: http://bradfrostweb.com/blog/post/atomic-web-design/

It is about something he calls "Atomic Web Design", in which a site is broken down into small components that can be used to build a variety of things while keeping a consistent cannon! Kind of like good directions for your CSS, it seems like common sense, but in reality, it is hard to execute and establish a robust set of blocks that will work in all of your layouts(especially when their are sooo many things!). To help with this process, him and Dave Olson built a tool that helps you write these pattern libraries. What pals!

And here is the great tool he made, called pattern lab: http://demo.patternlab.io/?p=all

More info about patternlab here: http://patternlab.io/

Another tool I like is: http://bjankord.github.io/Style-Guide-Boilerplate/ which is a little more technical but very powerful!

Cheers!

Answer 2

you can already do what you want with the ala lib, but if you want more libs to choose from, here's some:
topcoat
http://topcoat.io/topcoat/
bootstrap
http://getbootstrap.com/
oocss
http://oocss.org/
smacss
http://smacss.com/

Answer 3

Brad Frost's Atomic demo is my favorite example simply because it takes cues from nature, although their demo is a hypothetical example and only practical examples really resonate for me. Same applies for the USPTO pattern library.

All the examples mentioned above are nice, though I do think they read mostly as snippet libraries. I realize most companies don't even have that much, but the problem is that while you can lead a horse to water you can't make them drink. It's not enough to just provide a list of all the design widgets with lorem ipsum and hope no one wanders off the script.

Disciplined reuse of patterns demands understanding of the generic problems a pattern is meant to solve, and at what level of abstraction. On both the supply and demand sides. Those writing the pattern library need to provide the rationale and teach, and those using the patterns need to search design problems not solutions.

Google's material design starts to scratch that "teach a man to fish" itch (sorry about the clumsy mixed metaphor.)

I guess as with everything it has more to do with the carpenter than the tool.