An introduction into Atomic Design, a super-clean way to style web applications

A super-interesting talk of Brad Frost at beyond tellerrand 2013, explaining the basics of Atomic Design:

What is Atomic Design ?

Summarized, it’s super-simple: Brad Frost and Dave olsen, the guys behind the according site patternlab.io, call it “Build systems, not pages.” – Don’t design and develop (from a frontend perspective) full pages, instead design and develop small elements. Really small elements, indeed the smallest elements possible, like a button. And then combine these elements to larger units, like a input box, that consists of a label, a text field and a button. And then combine these units of elements to even larger units, like a full form. And so on … You get the idea. Like LEGO.

You don’t design every page.
You design and develop all used elements and element-combinations!

The final full pages are then just a combination of these units.

A little disclaimer:
Don’t be irritated by the very weird (german) first minutes of the clip, this is obviously a very nerdy joke.

Also check out patternlab.io, a wonderful set of components for starting with Atomic Design.

Side-note: Beyond Tellerrand 2014, a mostly english-speaking frontend conference in Germany, is already sold out. The speakers list is awesome, as usual: Chris Coyier, Ethan Marcotte, Erik Spiekermann, Jonathan Snook. You should know these names by the way :)