Slides for my talk at CSS Summit 2016 about the approach of atomic design in creating componentized, reusable design systems for sites and apps.

2. ABOUT ME
Web developer since 1997
Senior frontend developer at MoZeus
Illustrator, cartoonist, writer, daddy
2
I’m AtlantaJones everywhere:
andrew@atlantajones.com

3. “WEBSITES”
3

4. “WEBSITES”
4

5. WHAT ARE PAGES EVEN?
5
photo: Jeremy Keith (bit.ly/adtalk-devices)

6. WHAT ARE PAGES EVEN?
6
!= “Pages”

7. WHAT ARE PAGES EVEN?
“We’re a startup looking to launch a
5-page website this October…”
“How long will it take just to build
the home page?”
“How are we ever going to redesign this
university website that contains over
30,000 pages?!”
7

8. –Stephen Hay
“WE’RE NOT DESIGNING
PAGES. WE’RE DESIGNING
SYSTEMS OF COMPONENTS.”
8

9. GOING MODULAR
9

10. GOING MODULAR
Backends don’t always generate fully-baked
“pages”
Their API’s are consumed by components on
multiple platforms
Web apps are already using modular
components for architecture
Why not our designs and UI?
10

11. EARLY ISSUES
Organization like SMACSS only
got us so far
Not accessible for designers
No references for existing
components
Too easy to reinvent wheels
Style bloat ensues
11
smacss.com

12. EARLY ISSUES
Inconsistent designs
Leads to many minor variations
Lots of CSS specificity
12

13. EARLY ISSUES
Modules not truly modular
Break when moved around
Class names lose meaning
13

14. EARLY ISSUES
“Living” style guides?
Not very flexible
Provides no context
Easily outdated or abandoned
14

16. WHAT IS ATOMIC DESIGN?
Dreamed up by Brad Frost in 2013
Based on a chemistry-inspired metaphor
Five phases:
16

17. ATOMS
The basic building block
of all matter
Can’t be broken down
further without losing
function or meaning
Mostly limited to HTML
tags
Also more abstract
elements like color
palettes, font stacks or
animations17

18. ATOMS: EXAMPLE
18
SEARCH THE SITE
SEARCH
LABEL
INPUTENTER KEYWORD
BUTTON

19. MOLECULES
Groups of two or more
atoms
Form simple,
functional components
Groups of UI elements
functioning together
as a unit
19

20. MOLECULES: EXAMPLE
20
SEARCH THE SITE
SEARCHENTER KEYWORD

21. ORGANISMS
Groups of molecules
and atoms
Can also contain
smaller organisms
Form distinct sections
of an interface
21

22. ORGANISMS: EXAMPLE
22
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT

23. ORGANISMS: EXAMPLE
23
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT
Atom: logo Molecule: Nav Molecule: Search
Organism: Global Header

24. TEMPLATES
Like low-fidelity
wireframes
Provide context for
molecules and
organisms
Contain only
placeholder text and
images
24

25. TEMPLATES: EXAMPLE
25
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT

26. PAGES
Most concrete stage in
Atomic Design
Specific “instances” of
templates
Real representative
content
Multiple pages from
single templates
26

27. TEMPLATES: EXAMPLE
27
SEARCH THE SITE
SEARCHENTER KEYWORDHOME ABOUT BLOG CONTACT

28. PAGES: EXAMPLE
28

30. PATTERN LIBRARIES
Promote consistency
Allow faster, more collaborative workflow
Establish a shared vocabulary
Make testing easier
Make estimating easier
Serve as documentation
30

31. Style Tiles Element Collages
PATTERN LIBRARIES
31

32. Mail chimp Big Nerd Ranch
PATTERN LIBRARIES
32

34. PATTERN LAB
Web app that compiles code patterns into a
functional front-end UI
Allows for separation between structure and
content
Serves as a blueprint for backend developers
Allows non-developers to contribute to the
living, breathing design system
34

35. PATTERN LAB
Both PHP and Node-based versions
Static site generator
Multiple “editions” support both Mustache and
Twig templates
Also a Drupal-friendly version
35

37. 37
http://demo.patternlab.io/

38. 38
http://demo.patternlab.io/
atomic design phases

39. 39
pixel sizing
breakpoint
sizing
surprise me
code,
search, etc

40. 40

41. 41

42. 42

43. 43

44. 44

45. 45

46. 46

47. 47

48. 48

49. 49

50. 50

51. 51

52. 52

53. 53

54. 54

55. 55

56. 56

57. 57

58. 58

59. 59

60. 60

61. 61

62. 62

63. 63

65. UNDER THE HOOD
65
misc config files
Pattern Lab “engine”
static file output
working files & templates
php Composer dependencies

66. UNDER THE HOOD
66
annotation data
global data
global template includes
five phases of
Atomic Design

67. UNDER THE HOOD
67

68. UNDER THE HOOD
68

69. MUSTACHE VS. TWIG?
Both very capable choices
Mustache:
“logic-less”
No “ifs”, “elses” or “for loops”
Twig:
Offers more features and flexibility
More PHP project friendly
69

70. MUSTACHE VS. TWIG?
70
mustache
twig

71. MUSTACHE VS. TWIG?
71

73. THE PROBLEM
Patterns need to be consumed by backend
Crap.
Patterns should serve as the blueprint
Patterns easily detached from the library
PHP-based projects may have an easier
transition
73

74. THE HOLY GRAIL
Two-way synchronization between the library
and backend
Gem libraries?
Composer packages??
Node modules???
74

75. THE HOLY GRAIL
75

77. CAUTIONS & CAVEATS
Everyone has to be on board
Make/test components within library first
Roll in “hot fix” changes ASAP
Avoid “Bootstrap-itis”
Naming things is super hard
Avoid names based on appearance or location
77

78. NOTES ON ATOMIC DESIGN
It’s not restricted to any certain technology
Can be applied to all UI, not just web
Helps when designing web and mobile
UI’s simultaneously
78

79. “AFTER WE DELIVER THIS SITE,
WE WON’T BE INVOLVED
ANYMORE.
IS IT STILL WORTH BUILDING A
WHOLE PATTERN LIBRARY?”
79

80. “DON’T FORGET, ONE OF THE
DELIVERABLES IS A STYLE GUIDE.”
80
the client:
“THIS IS IT.
YOU’VE BEEN LOOKING AT
IT THIS WHOLE TIME.”
me:

81. 81

82. GO FORTH
“Pages” giving way to modular systems
Teams need something more
Atomic Designs == better communication
Better, more consistent, reusable components
Better, faster response from clients
A ready-made instruction manual
82

83. RESOURCES
http://bradfrost.com/blog/post/atomic-web-design
http://atomicdesign.bradfrost.com
http://patternlab.io
http://mustache.github.io
http://twig.sensiolabs.org
Smashing Magazine Pattern Lab 2 Article
83

84. I’m AtlantaJones everywhere:
andrew@atlantajones.com
Awesome!
Go be