On Pattern Lab - Node

Dave Rupert sparked a conversation today about Patternlab after some initial usage, which elicited a nice round of feedback from others.

Brad Frost summed it up nicely:

It’s been a process to make Pattern Lab simultaneously flexible and robust

I want to put some thoughts to paper about how this process has played out for me.

Patternlab-PHP was rather feature-rich when I started. I likely missed the conversations Brad and Dave had about what PL should and shouldn’t be. It was simultaneously an amazing living reference, but also a skyscraper to understand, deconstruct and finally rebuild with different materials. Dave Olsen helped immensely in those first steps.

I can feel the desire to turn PL into more than it already is, to turn it into a platform through which an entire project can grow, mature, and finally be deployed. I have also experienced first-hand the complexity that can creep into the solution when attempting to support so many features.

To me, Pattern Lab is:

  • A tool to build reusable, scalable markup and css snippets. As Brad intended, you can decouple atomic design principles altogether if you so choose, but it’s also…

  • A tool to glue components together in an iterative, incremental fashion.

  • One of many ways a web project could be built, but not the only way. A multi-tool, but not the best for every job.

  • An alternative to photoshop comps and high-fidelity mockups as an acceptable design deliverable

So, as I reread this, and wonder at which features to implement next against the living spec that is the PHP version, I question what feels missing to me. (Also excited at the prospect of Dave and Brad writing a spec!)

What pain points have I experienced?

  • Initial project setup is cumbersome. Hopefully some npm, grunt, dependency maturity in the near-term will help. As others have stated, attempting to obfuscate patternlab internals should be a goal. Addy Osmani suggested a pure node implementation which would be most agnostic. To me, grunt feels more consumable than pure node. I need to look into Assemble.

  • The iframe-viewer still gets me sometimes. Living in this responsive age, I naturally try to resize my window instead of using the controls. I’v felt at times that the ish controls are not perfect, but haven’t been able to determine if it’s my problem or something in the implementation yet. I wonder if this can be configurable.

  • The port is inelegant and immature. I brute-forced the processing of templates, instead of globbing as the PHP version did initially. While I think this is straight-forward and decently documented, it is not DRY or unit-testable. A refactor would do some good.

As a peripheral member of the community, it’s exciting to see other’s interested in the same problems that drew me to Patternlab too. I’m also excited to see what ground we can make on PL-PHP :)

Type Exploration #6

Type Exploration on CodePen

Just a small visual for this week. Work is set with Passion One, and Life is set as Mr Bedfort, from Adobe Edge Web Fonts. Small embellishment on hover.

I plan to add to this pen over time as my attitudes toward a work/life balance evolve.

Friday Type Exploration #5

Type Exploration #5 on Codepen

This time, a simple blockquote with embellishment, set in Economica. A little harder to read at smaller sizes. Tired pattern, or trusty standby?

Friday Type Exploration #4

Type Exploration on codepen

Ubuntu headings, body set with Titillium Web. It feels very clean and readable.

Friday Type Exploration #3

Type Exploration on codepen

Source Sans Pro. I spent a lot of time working with the contrast. Any ideas to make the grey and yellow color palette work better?

Friday Type Exploration #2

Type Exploration on codepen

PT Sans with embellishment.

Friday Type Exploration #1

Type Exploration on codepen

First installment, a simple one. Open Sans Condensed, no frills, high contrast.

The Device Test Imperative

When creating the masthead for this site, I was quick to ensure support in Chrome, Firefox, and IE 10-8. It was easy, I suggest too easy, to test the fluid layout and media queries by resizing the window, or using a tool like this one to gut-check various viewports.

None of this, however, could satisfy the necessity of testing on a real mobile phone. Here’s what I saw on mobile Safari on my iPad and iPhone:

The site on an iPhone, for some reason not adhering to the same viewport as desktop browsers.

Frustrating! What could have caused this? I kicked into Firefox’s 3D mode, confirming the masthead’s 200% width trick was extending the page width, but my current overflow: hidden declarations were not being honored.

Some digging revealed that mobile Safari overflow rendering rules are different, and that I should try the following CSS.

    overflow-x: hidden;

Sure enough, fixed for all tested version of Safari. Need to test Android and other devices, sure, but this was another small reminder to get into a browser - especially mobile browsers, as soon as possible.

Design Is Parenting

When my son was born, I was obsessed with the temperature of his bath water. What if it was too hot? Too cold? Which was worse? We bought this plastic bathtub that had a built-in color-changing thermometer. We were given a color-changing rubber ducky at the shower. The baby books said between this degree and that degree, Celsius or Fahrenheit. No shortage of advice existed on the web.

Practice grew me adept at drawing X amount of hot water and Y amount of cold, and how to cancel mistakes or maintain temperature by adding Z amount of warm. And always, if in doubt, I had my arsenal of thermometers. It took me months to gradually realize that if it was comfortable for me, it was comfortable for baby. There is no formula. Find comfortable. Trust.

At An Event Apart - Seattle, there was a lot of discussion as to what design is, and what role we all play as designers. Some definitions included:

Design is the rendering of intent.

Design is moving things around until they look right.

Design is a job

I think all of these are correct, however, I’d like to add my own:

Design Is Parenting

In both design and parenting, there is an implicit desire to create, to shape, to guide and eventually let go. I am not implying that my son is my client, by no means do I consider it that sort of relationship! But really, you can distill a lot of interactions down to whether or not you give a damn to see how it turns out. What matters most? To me, parenting is caring enough not to give up on tough problems, constantly course-correcting. It’s about trusting your gut, not what others say (though advice and basics never hurt). You must tailor your approach to each changing day.

And when you see the product of all your hard work first take steps, or fall and get back up, you breathe a sigh of relief that everything might be okay. No one was born a good parent, or a good designer. No such definitive guide could ever describe the perfect process, the playbook of teachable moments, or the motivation to continue on day after day, never really being done.


We try to set a good example. When we are gone, we hope the world will be a better place for our efforts.


I’ve taken down Browser? I Barely Know Her! citing recent events and a clearer conscience. I’ve felt this way for a while - that the pun was not worth perpetuating a stance that I do not believe in. The last straw came when I received some open and honest feedback that the novelty URL was perhaps excluding individuals from the very conversations I was trying to foster with the larger web worker community.

I’ll be migrating most of the posts here, including Stephan Hay’s responsive web design workflow review series. Progress through that has slowed, in part due to my discovery of patternlab.

Expect re-releases of old posts and explorations of RWD and atomic design in the near future.