The What & Why of Pattern Lab
- 1. the What & Why of
pattern-lab.info
dave olsen, @dmolsen
- 2. 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
- 4. rethinking the web design process: spiral process
Kick-off
Design &
Develop
Test
Client
Review
Production
- 6. 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
- 8. rethinking the web design process: toolchains
‣ CSS pre-processors
‣ CSS frameworks
‣ JavaScript frameworks
‣ Build tools
‣ Content Management Systems
lots to choose from!
- 9. 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
- 11. 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.
- 13. pattern lab is: build systems, not pages
molecules-search
organisms-header
templates-homepage
- 14. pattern lab is: tiny bootstraps of HTML, CSS, & JS
‣ tiny bootstrap as a project starter kit
‣ building clients their own tiny
bootstraps
‣ re-using your tiny bootstraps
http://daverupert.com/2013/04/responsive-deliverables/
- 15. pattern lab is: integrated into your process
Kick-off
Design &
Develop
Test
Client
Review
Production
- 16. pattern lab is: integrated into your process
Kick-off
Design &
Develop
starter kit
auto-build
auto-reload
atomic
spectrum
Test
page follow
viewport
re-sizer
Client
Review
annotations
pattern states
MQ re-sizer
shared component library & dynamic data
Production
code view
style guide
- 21. by default pattern lab isn’t...
‣ a fancy UI framework
‣ dependency heavy
‣ incredibly rigid
you make it what you want & need
- 22. the requirements:
PHP 5.3+
no web server required*
Mustache is used for patterns.
JSON is used for dynamic data storage.
* - only required for page follow