Patternlab: Atomic Design & Living Styleguides (Refresh Hilo)

pattern lab 1

pattern labcreate atomic design systems

pattern lab

About Jason Kalawe

2

Gemini Observatory Web Architect

makeaweli @makeaweli

pattern lab 3

atomic design

atoms molecules organisms templates pages

pattern lab 4

atoms

basic design elements

pattern lab 5

molecules

groups of elements that function as a group

pattern lab 6

organismsgroups of molecules joined together to form a section of an interface

pattern lab 7

templates

organisms combined to form page-level objects

pattern lab 8

templates

focus on content structure rather than actual content

pattern lab 9

pages

specific instances of templates

0

pattern lab 11

pattern labcreate atomic design systems

pattern lab 12

pattern labcreate atomic design systems

user interface

pattern lab 13

pattern labcreate atomic design systems

create patterns

pattern lab 14

pattern labcreate atomic design systems

mustache includes

pattern lab 15

pattern labcreate atomic design systems

data

pattern lab 16

pattern labcreate atomic design systems

data iteration

pattern lab 17

pattern labcreate atomic design systems

pattern-specific data

pattern lab 18

pattern labcreate atomic design systems

pseudo patterns

pattern lab 19

resourcespatternlab.io

bradfrost.comdaisy