When code becomes a living style guide. An introduction to the ideas of atomic design, an atomic design workflow, the usage in a real live project and Pattern Lab.

1. Berit Hlubek - @berit_jensen
Working with
Atomic Design
When code becomes a living style guide

2. Photo: Andreas Thomsen, Owner: Lotta Katrina Hinz

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

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

5. Static webdesigns
Built for specific screen resolutions

8. Android screen sizes - 2013
http://opensignal.com/reports/fragmentation-2013

9. We have to re-think our
design workflow

10. „We’re not designing pages,
we’re designing systems of
components.“
— Stephen Hay, 2012

11. Atomic design
A methodology for crafting design systems
Illustrations: http://bradfrostweb.com/blog/post/atomic-web-design

12. Atoms

13. Molecules

14. Organisms

15. Templates

16. Page

17. Giving things a name
Atoms, molecules, organisms, templates, pages

18. In practice ...?

19. A perfect Atomic Design
workflow

21. Two possible ways
Photoshop or Prototyping

22. Create different components
From atoms and molecules to organisms

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

24. Keep the atomic design idea
Also for the frontend development phase

25. This one big project
And we did the same as always...

27. Design ➞ Browser
Now something had to change

29. Use atomic design
Well at least for the frontend

30. Living style guide!
How to easily achieve that?

31. Pattern Lab
Toolkit to create atomic design systems
http://patternlab.io

32. Static site generator
Stitching components together to templates/pages

33. Component Library
Your living style guide

34. Viewport Resizer

35. ... and a lot more
Have a look at: http://patternlab.io

36. Short demo
http://demo.patternlab.io

37. Back to the project workflow...

38. Extract components
Define atoms, molecules and organisms

39. From small to bigger chunks
Already had the CMS in mind

40. Mustache Templates
A simple atom with two variables
<a href="#"
class="link-all {{ more-classes }}">
{{ linktext }}
</a>

41. Mustache Templates
A simple atom with two variables
<a href="#"
class="link-all {{ more-classes }}">
{{ linktext }}
</a>

42. Mustache Templates
A molecule with a loop
<ul class="teaser-list">
! {{# teaserlist}}
! ! <li>
! ! ! <a href="#">{{ text }}</a>
! ! </li>
! {{/ teaserlist}}
</ul>

43. Mustache Templates
A molecule with a loop
<ul class="teaser-list">
! {{# teaserlist}}
! ! <li>
! ! ! <a href="#">{{ text }}</a>
! ! </li>
! {{/ teaserlist}}
</ul>

44. Mustache Templates
An organism with variables and includes
<h2>{{ teaserheader }}</h2>
{{> molecules-teaser-latest}}
{{> molecules-teaser-list}}
{{> atoms-link-all(linktext: All News)}}

45. Mustache Templates
An organism with variables and includes
<h2>{{ teaserheader }}</h2>
{{> molecules-teaser-latest}}
{{> molecules-teaser-list}}
{{> atoms-link-all(linktext: All News)}}

46. Yet another demo
Kirche Hamburg Pattern Lab System

47. Drawbacks? Any?
Sure, no solution is perfect

48. Have to get used to it
Sometimes hard to define molecules, organisms ...

49. Hard to start with atoms
Start with molecules and organisms instead

50. Double markup
Your HTML lives at multiple places

51. Discipline
Everyone has to follow the rules

52. Berit Hlubek
@berit_jensen
networkteam GmbH
berit.hlubek@networkteam.com
Photo: Daniel Lienert

53. Thanks!
Questions?

54. Links
http://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/