Berit Hlubek - @berit_jensen

Working withAtomic Design

When code becomes a living style guide

Photo: Andreas Thomsen, Owner: Lotta Katrina Hinz

http://www.telegraph.co.uk/technology/internet/10663451/The-early-days-of-25-websites.html

http://web.archive.org/web/20010609090954/http://www.apple.com

Static webdesignsBuilt for specific screen resolutions

Android screen sizes - 2013

http://opensignal.com/reports/fragmentation-2013

We have to re-think our design workflow

„We’re not designing pages, we’re designing systems of

components.“

— Stephen Hay, 2012

Atomic designA methodology for crafting design systems

Illustrations: http://bradfrostweb.com/blog/post/atomic-web-design

Atoms

Molecules

Organisms

Templates

Page

Giving things a nameAtoms, molecules, organisms, templates, pages

In practice ...?

A perfect Atomic Design workflow

Two possible waysPhotoshop or Prototyping

Create different componentsFrom atoms and molecules to organisms

What‘s next?Depends! Templates & Pages or Development

Keep the atomic design ideaAlso for the frontend development phase

This one big projectAnd we did the same as always...

Design ➞ BrowserNow something had to change

Use atomic designWell at least for the frontend

Living style guide!How to easily achieve that?

Pattern LabToolkit to create atomic design systems

http://patternlab.io

Static site generatorStitching components together to templates/pages

Component LibraryYour living style guide

Viewport Resizer

... and a lot moreHave a look at: http://patternlab.io

Short demohttp://demo.patternlab.io

Back to the project workflow...

Extract componentsDefine atoms, molecules and organisms

From small to bigger chunksAlready had the CMS in mind

Mustache TemplatesA simple atom with two variables

<a href="#" class="link-all {{ more-classes }}"> {{ linktext }}</a>

Mustache Templates

A simple atom with two variables

<a href="#" class="link-all {{ more-classes }}"> {{ linktext }}</a>

Mustache Templates

A molecule with a loop

<ul class="teaser-list">! {{# teaserlist}}! ! <li>! ! ! <a href="#">{{ text }}</a>! ! </li>! {{/ teaserlist}}</ul>

Mustache Templates

A molecule with a loop

<ul class="teaser-list">! {{# teaserlist}}! ! <li>! ! ! <a href="#">{{ text }}</a>! ! </li>! {{/ teaserlist}}</ul>

Mustache TemplatesAn organism with variables and includes

<h2>{{ teaserheader }}</h2>{{> molecules-teaser-latest}}{{> molecules-teaser-list}}{{> atoms-link-all(linktext: All News)}}

Mustache TemplatesAn organism with variables and includes

<h2>{{ teaserheader }}</h2>{{> molecules-teaser-latest}}{{> molecules-teaser-list}}{{> atoms-link-all(linktext: All News)}}

Yet another demoKirche Hamburg Pattern Lab System

Drawbacks? Any?Sure, no solution is perfect

Have to get used to itSometimes hard to define molecules, organisms ...

Hard to start with atomsStart with molecules and organisms instead

Double markupYour HTML lives at multiple places

DisciplineEveryone has to follow the rules

Berit Hlubek@berit_jensen

networkteam GmbHberit.hlubek@networkteam.com

Phot

o: D

anie

l Lie

nert

Thanks!Questions?

Linkshttp://bradfrostweb.com/blog/post/atomic-web-design/

http://www.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/

http://patternlab.io

https://github.com/adactio/Pattern-Primer

http://livingstyleguide.org/

http://barebones.paulrobertlloyd.com/