- May 26, 2015
Working with Pattern Lab
A front-end developer's initial thoughts
- @alliwagner
- Developer
Pattern Lab as a tool is super flexible, it can be used as a simple styleguide framework or scale all the way up to a full-blown CMS, driven by dynamic content. We’re halfway through our first Pattern Lab project in which we are extending it to the latter, if you’re interested, check out Mark’s article on integrating Craft with Pattern Lab for more info on that.
I want to get into how a front-end developer might dive into Pattern Lab. First, it’s important to note that in this project, we’ve structured our client deliverables into several “batches” with the goal to eventually move away from PSDs as design deliverables. We want the client to review and provide design feedback on styled HTML instead of Photoshop documents as soon as possible. Leaning on Pattern Lab allows us get to development faster, keep the designs consistent, create a style guide, and code atomically. This is a tall order for any tool, but a goal that is totally accomplishable.
After I downloaded Pattern Lab and poked around in the code, I added our starter files which include various Node, Grunt, and Bower packages. Brad Frost, creator of Pattern Lab, recommends you remove the stylesheets and template files Pattern Lab ships with and start from scratch, which is challenging for someone entirely new to the tool. The CSS is closely tied to the markup and the folder structure/hierarchy of Atomic development so it feels strange to just remove all that thinking. But in the event you want to run your project with a different methodology from what’s baked into Pattern Lab, you’ll need to do a fair share of editing and removal. For this first project, I left the training wheels on and wrote over top of Brad’s work until I felt comfortable enough to remove the original markup entirely. I imagine out of this, we’ll have a new Pattern Lab-specific branch of our starter files that will make this process much easier in the future.
For us, because we had complete pages designed in Photoshop to work from, it was smartest for us to start building in Pattern Lab at the Template level and then extrapolate into Organisms and Molecules. For future projects, starting at the molecular level and building up will be better, but on this first “cut your teeth” project, and with the designs we had to work with, we found it better to start with the Template level in Pattern Lab, matching comps in Photoshop.
Outside of the Pattern Lab documentation and Brad’s blog posts, I haven’t seen much written on working with Pattern Lab. So definitely look for more in-depth articles here on Cognition as we continue to flesh out a process around this awesome tool. If you come across a good resource as you yourself dive in, let us know and we’ll be sure to include it here.