Maker Series Recap: Brad Frost on Working with Atomic Design

Odds are, you’ve heard of Brad Frost. As one of the most prolific writers, speakers, and designers in our industry, it’s almost impossible not to encounter his work. Whether in the form of speaking, blogging, podcasting, or tweeting, his words have helped shape a lot of what we now accept as the gospel of frontend web development. And his work has come to influence much of what we now do in our day-to-day jobs.

Like most of us, Brad recognizes it’s no longer good enough to build and deploy a website, only to leave it until the inevitable massive rebuild one or two years later. That doesn’t work for clients, it doesn’t work for users, and it doesn’t work for us. Today, we build design systems meant to stand the test of time that can grow as a site does, or, as Dave Rupert put it, “tiny bootstraps for every client.”

While Brad didn’t create the notion of a pattern library or a design system, his writing and speaking on Atomic Design, along with his combined effort with Dave Olsen to produce Pattern Lab, have made pattern libraries much more enjoyable and common to create. So, it goes without saying that we at Sparkbox, along with the 50-or-so attendees at this past week’s Maker Series, were pretty excited to sit down for a day-long chat on the ins and outs of this powerful methodology and useful tool. And because this is Maker Series, and not some stuffy conference, the day exceeded our expectations. Not only did we learn all about Atomic Design and Pattern Lab, but we got to know Brad on a more personal level, whether that meant looking at pictures of his bulldog, Ziggy, or finding out about the worst job he ever had.

Atomic Design

For Brad, it all started with his high school chemistry teacher—a Wilford Brimley lookalike who taught him about the basic building-blocks of matter: atoms. After obsessing over the idea of the things that make up a site’s design, the connection between atoms and the elements of a page became clear. He started to think of the HTML elements—labels, inputs, buttons—as well as fonts, colors, and animations—as atoms. You combine atoms to make molecules: search forms, navigation. From there, atoms and molecules come together to create organisms: headers, footers, lists of tweets. It was this metaphor that allowed him to start thinking about websites in a more modular way.

The template level is where organisms start to come together into a thing that resembles a real web page, albeit without real content. This is where layout comes into play, and you start to see all the elements in their natural environment. Take it one step further, with the introduction of real content, and you get a page—the final piece to the Atomic Design puzzle. This is the point where you can start to review work with the client, circle back with your team, and generally make sure everything works as a system.

Pattern Lab

But Atomic Design is just a philosophy—a way of thinking that guides us through our process. In order to really make it useful, you need a tool that helps build these systems. Enter Pattern Lab. At its core, Pattern Lab is just a tool for stitching together the parts of your design system (it uses PHP to compile your various HTML partials, and pulls in content formatted in JSON).

It doesn’t care how you write your styles (whether you precompile with SASS, LESS, or Stylus, or just write plain CSS), it doesn’t care about your markup, it’s not a CMS, and it’s certainly not Twitter Bootstrap. It’s a living, breathing deliverable that evolves along with the project. It’s a “water cooler” that designers, developers, content creators, and clients can gather around and work together on. And—depending on the scope of a project—it’s the thing that you hand off once the project is complete.

Pattern Lab also comes loaded with some useful bells and whistles—features that make it even more powerful than your run-of-the-mill design system. A browser resizing simulator lets you check out your design at a range of sizes, so you know where your design breaks down. Code previews let you take a look at your markup at a glance, while annotation functionality lets you easily communicate your intent to anyone looking. And navigation lets you break it down by atoms, molecules, organisms, templates, and pages.

Wrapping Up

After spending the day filling our brains, we closed with a great session of questions and answers from the audience. Each person in attendance got a chance to ask Brad a question, ranging in topic from performance, to how Pattern Lab changes process, to his recommendations on the picture element versus srcset. After that, we retired upstairs to Sparkbox HQ to enjoy some delicious drinks made by our favorite bartender, Evan. After some mingling, we introduced Brad to Ping Volley Ball Pong—our own variation of doubles ping pong with volleyball rules—and found out that sometimes beginner’s luck (and a wicked left-handed serve) is all you need to win.

Want to find out more?

Just because you missed Brad’s talk, doesn’t mean you can’t start using Atomic Design and Pattern Lab today. You can check out Brad’s blog post on Atomic Design for an in-depth exploration into this methodology, and you can take a look at a preview of the book he’s writing on the topic. Once you have your head wrapped around Atomic Design, head on over to the Pattern Lab site to get started creating your own design system. And, don’t forget to be on the lookout for Pattern Lab Two, a more modular iteration of these tools that will decouple the various parts, allowing you to pick and choose what language you use to compile partials, and more. And if you still want to find out more, give the collaborative notes from his talk a read—they’re full of links to useful resources about Pattern Lab, Atomic Design, and everything you could ever want to know about design systems. And finally, don’t forget to check out the lineup of future Maker Series events—you’re not going to want to miss out twice.

Collaborative Notes from the Maker Series