The third day of any Event Apart is a full-day workshop on one topic. This year in Chicago, we were privileged to get Brad Frost’s first full workshop on pattern libraries (a.k.a. “style guides,” but I prefer pattern libraries because I am partial to Brad’s product Pattern Lab). He covered everything from selling pattern libraries back at work; to kicking off a project; to making sure everyone is reading from the same script; to common patterns; and, of course deployment. Needless to say, it was a lot to learn after two days of heavy learning.
Brad did and incredible job of making this mountain of information digestible. In all honesty though, it’s only after hearing him talk about this numerous times that it is finally making complete sense. The core arguments for pattern libraries always made sense to me. I understood the business case, and why it was important to make them. Where I was having trouble was figuring out the final step of moving my code from Pattern Lab into a production environment and then keeping everything in sync. This workshop finally cleared that up.
For those wondering, business case for pattern libraries is simple; they save your client money and keep their brand consistent. The money savings comes from the fact that after the pattern library is built, production of new pages is simply a matter of grabbing the needed code and plugging it in. They do an incredibly effective job of maintaining the client’s brand by establishing the visual language of the site, and giving clear direction on how new elements should look. It’s exactly what we’ve been doing in print for decades, we just called it the Brand Guide.
Of course, pattern libraries also help build leaner more robust websites and help us as developers rapidly iterate and design in the browser more efficiently. Knowing all of this I have been dying to start working with Pattern Lab. The big disconnect I had though was how I moved all my code from Pattern Lab into the CMS. Furthermore, once it was there, would I be able to keep it in sync with the pattern library?
On one site I just copy and pasted everything, but that was cumbersome and required a lot of mental effort to make sure closing elements were included and the DOM was preserved. As it turns, out the magic bullet I was looking for, the thing Brad had been hinting around at for the past three years, was a simple Grunt task that automatically parses and packages your patterns into production ready code. When Brad finally popped up his slide showing this I almost jumped out of my seat. Especially since he was running long, and could have just skipped over it.
Brad also gave out a lot of valuable tips on making a pattern library more user friendly, and ensuring it is used and maintained. This was all icing on the cake for me, but it was good to learn these finishing touches. As I said earlier, he communicated all of this quite clearly and pushed on through a nasty cold. When I saw he was doing the workshop on Day 3, I could not have been more excited. For me, it was one of those days where I felt my knowledge based jumped forward substantially I had a tone of new things I could work into my development process right away without having to suffer through a lot of trial and error.
On a final note, something I appreciated hearing from Brad Frost and several of the other speakers was that despite their glittering client list… clients are still clients. When you are stuck down in the trenches, slugging it out with clients who regularly rake you over the coals, you start to think that working for Time, or Vox, or Filament Group, or for yourself is where its at; nope. We are all in the trenches together.
All right, that’s it for me until next year! Thanks for reading. Thank you to Zeldman, Meyer, and all the speakers. You guys (and girls) are the best!