Introduction to using Patternlab to create user interfaces with atomic design.

1. pattern lab 1
pattern labcreate atomic design systems

2. pattern lab
AboutJason Kalawe
2
Gemini Observatory Web Architect
makeaweli @makeaweli

3. pattern lab 3
atomic design
atoms molecules organisms templates pages

4. pattern lab 4
atoms
basic design elements

5. pattern lab 5
molecules
groups of elements that
function as a group

6. pattern lab 6
organisms
groups of molecules
joined together to form a
section of an interface

7. pattern lab 7
templates
organisms combined to
form page-level objects

8. pattern lab 8
templates
focus on content structure
rather than actual content

9. pattern lab 9
pages
specific instances of
templates

10. 0

11. pattern lab 11
pattern labcreate atomic design systems

12. pattern lab 12
pattern labcreate atomic design systems
user interface

13. pattern lab 13
pattern labcreate atomic design systems
create patterns

14. pattern lab 14
pattern labcreate atomic design systems
mustache includes

15. pattern lab 15
pattern labcreate atomic design systems
data

16. pattern lab 16
pattern labcreate atomic design systems
data iteration

17. pattern lab 17
pattern labcreate atomic design systems
pattern-specific data

18. pattern lab 18
pattern labcreate atomic design systems
pseudo patterns

19. pattern lab 19
resources
patternlab.io
bradfrost.com
daisy