Anthony McLin

Atomic Design Patterns, Responsive Design, and Rapid Prototypes

Last week while doing some research I stumbled across a new project from Brad Frost, Pattern Lab. This is a quick and dirty simple framework for facilitating Atomic Design when prototyping out web designs. I was floored as this matched exactly what I was in the middle of needing. I'm currently in the middle of major redesign for an insanely huge site, and one of our deliverables is a Live Style Guide as well as copies of our responsive design prototypes. Already I was running into the challenges caused by ensuring consistent headers, page layout, and other HTML markup across multiple static HTML files being worked on simultaneously by multiple front-end developers.

Pattern Lab is a godsend in this regard. It's a very basic framework (PHP driven right now, but Brad has plans to make it platform agnostic) that lets you quickly build up pages with common sub elements with a nice 4 tier hierarchy:

Pages
Content applied to Templates.
Templates
Basic layout markup wrapping a smattering of Organisms
Examples: Blog List, Homepage, Product Detail
Organism
Fully functional content module made up of Molecules
Examples: Comments, Header, Footer
Molecule
Reusable elements made up of Atoms
Examples: Comment Reply Form, Main Nav, Utility Nav, Footer Nav, Copyright Notice, Pagination
Atom
A single basic page element
Examples: Paragraph, Link, Button, Blockquote

The structure is insanely intuitive, and the PHP framework is dirt simple, even if you've never used PHP before. And the best part? There's an autogenerated header menu that has a hierarchal set of links to every single level of the structure, and as a bonus, includes a Responsive Design preview viewer.

On top of that, the CSS structure is broken down into logical SCSS files, with a nice single master include file to reintegrate everything. There's a lot of work to be done within these to avoid some design pitfalls, or integrate better with common CSS starter kits (like Normalize.css, HTML5 BoilerPlate, or Skeleton) but it's a great starting point, and really easy to replace individual pieces that you may or may not like.

I've already had two pull requests integrated back into the main project (third time's a charm?) to improve some of the responsive design preview behaviors as well as the PHP subsystem. And I've also made substantial expansions to the design element hierarchy based on the needs of my particular project. I can't wait to see how this project progresses.

Check out Pattern Lab on GitHub.

Categories: 

Add new comment