Atomic Web Design and Pattern-Lab (Links I liked: Nov. 8)

Not that this is article that I came across this week, per se. But I was thinking about it all week.


I recently stumbled across this article of how to organize web design by Brad Frost called “atomic web design”, and while this is basically what we do already, thought it maybe a good way to communicate the approach to the whole group. It is a simple — but brilliant — concept.

Pattern-Lab’s “Why” section links to Dave Rupert’s Tiny Bootstraps, for Every Client article. The whole article is awesome but snipped here (bold highlights by me):

…From the exterior, it may appear to be a single page but the homepage is actually comprised of Lego®-like building blocks designed to be combined together. The look and feel of new components like form controls, navigation, and carousels are informed by the colors and type that define the brand.

Good components make code reusable. Tyson Matanich, developer at Microsoft, was the main driver and lead enforcer to ensure that all components were reusable at their core, running each component though stress test scenarios. He coached us in how their components might be reused and continually pushed us to “componetize” even further.

The highlight component, for example, can be re-purposed and “themed” in the news section using a simple CSS class. While they are different visually, they possess the same underlying code structure. All these components are then strung together to create complete page layouts.

Working on isolated components made the iteration process faster as well. Faster and more reusable means that the work our agency performed resulted greater value for their company.

I love smart people. (I wish I was one of them. Something to be inspired/ aspired to.)

I would like to create my work’s own pattern library using something like:
Pattern Lab, here is git repo. And a demo.

I am also thinking of recommending using Foundation into large scale project, which will be there for a long haul. It would be ideal if I can combine pattern lab into foundation css structure. Need to look into it.

Also, we hosted a nice HTML5 meetup this week. About HTML5’s canvas element. Links below are a lot of library mentioned in that.

I’ve been posting links that I liked at Posterous (RIP) and then my tumblr blog. Here are the week worth of links:

One Response to “Atomic Web Design and Pattern-Lab (Links I liked: Nov. 8)”

  1. Hi Daigo. Have you been able to combine pattern lab into foundation css structure yet? I’ve been testing out Pattern Lab, but want bootstrap it or combine it with foundation template framework somehow.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>