Download - The What & Why of Pattern Lab
![Page 1: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/1.jpg)
the What & Why of
pattern-lab.infodave olsen, @dmolsen
![Page 2: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/2.jpg)
a roadmap for the short talk
‣ rethinking the web design process- linear vs. spiral- client deliverables- our toolchains‣ learning where pattern lab fits- atomic design- tiny bootstraps- an integrated workflow‣where to find more info
![Page 3: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/3.jpg)
linear vs. spiral
rethinking the web design process: team process
![Page 4: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/4.jpg)
rethinking the web design process: spiral process
Kick-off Design &Develop Test Client
Review Production
![Page 5: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/5.jpg)
the deliverables
rethinking the web design process: for clients
![Page 6: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/6.jpg)
rethinking the web design process: deliverables
‣mood boards‣style tiles‣wireframes‣ low-fidelity HTML mock-ups‣high-fidelity HTML mock-ups‣ “cut up” mark-up, CSS, & JS‣pattern libraries & style guides
![Page 7: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/7.jpg)
our toolchains
rethinking the web design process: tools
![Page 8: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/8.jpg)
rethinking the web design process: toolchains
‣CSS pre-processors‣CSS frameworks‣JavaScript frameworks‣Build tools‣Content Management Systems
lots to choose from!
![Page 9: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/9.jpg)
wouldn’t it be cool if a tool...
‣Covered the entire dev lifecycle‣Made it easy for clients to review work‣Allowed for granular deliverables‣Let you use the tools you wanted‣Was fast to get up & running
![Page 10: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/10.jpg)
introducing pattern lab
![Page 11: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/11.jpg)
pattern lab is...
Pattern Lab is a collection of tools for creating modular
systems, your very own tiny bootstraps and involve your
entire team & the client every step of the way.
![Page 12: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/12.jpg)
pattern lab is: build systems, not pages
![Page 13: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/13.jpg)
pattern lab is: build systems, not pages
molecules-search
organisms-header
templates-homepage
![Page 14: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/14.jpg)
pattern lab is: tiny bootstraps of HTML, CSS, & JS
http://daverupert.com/2013/04/responsive-deliverables/
‣tiny bootstrap as a project starter kit
‣building clients their own tiny bootstraps
‣re-using your tiny bootstraps
![Page 15: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/15.jpg)
Kick-off Design &Develop Test Client
Review Production
pattern lab is: integrated into your process
![Page 16: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/16.jpg)
Kick-off Design &Develop Test Client
Review Production
pattern lab is: integrated into your process
atomicspectrum
viewportre-sizer
annotationspage followpattern states
shared component library & dynamic data
MQ re-sizer
starter kit auto-reloadcode viewauto-build
style guide
![Page 17: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/17.jpg)
pattern lab is: all your deliverables in one place
![Page 18: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/18.jpg)
pattern lab screenshot: pattern example
![Page 19: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/19.jpg)
pattern lab screenshot: annotations
![Page 20: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/20.jpg)
pattern lab screenshot: code view
![Page 21: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/21.jpg)
by default pattern lab isn’t...
‣ a fancy UI framework‣ dependency heavy‣ incredibly rigid
you make it what you want & need
![Page 22: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/22.jpg)
the requirements:
PHP 5.3+no web server required*
* - only required for page follow
Mustache is used for patterns. JSON is used for dynamic data storage.
![Page 23: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/23.jpg)
download pattern lab: github.com/pattern-lab
![Page 24: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/24.jpg)
demo of the front-end: demo.pattern-lab.info
![Page 25: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/25.jpg)
documentation: pattern-lab.info/docs/
![Page 26: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/26.jpg)
brad frost@brad_frost
dave olsen@dmolsen
the pattern lab team:
![Page 27: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/27.jpg)
nominated: thenetawards.com
![Page 28: The What & Why of Pattern Lab](https://reader034.vdocuments.net/reader034/viewer/2022051815/540dea418d7f72767e8b4bbf/html5/thumbnails/28.jpg)
pattern labpattern-lab.info
thanks and questions: