The What & Why of Pattern Lab

the What & Why of

pattern-lab.infodave olsen, @dmolsen

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

linear vs. spiral

rethinking the web design process: team process

rethinking the web design process: spiral process

Kick-off Design &Develop Test Client

Review Production

the deliverables

rethinking the web design process: for clients

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

our toolchains

rethinking the web design process: tools

rethinking the web design process: toolchains

‣CSS pre-processors‣CSS frameworks‣JavaScript frameworks‣Build tools‣Content Management Systems

lots to choose from!

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

introducing pattern lab

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.

pattern lab is: build systems, not pages

pattern lab is: build systems, not pages

molecules-search

organisms-header

templates-homepage

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

Kick-off Design &Develop Test Client

Review Production

pattern lab is: integrated into your process

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

pattern lab is: all your deliverables in one place

pattern lab screenshot: pattern example

pattern lab screenshot: annotations

pattern lab screenshot: code view

by default pattern lab isn’t...

‣ a fancy UI framework‣ dependency heavy‣ incredibly rigid

you make it what you want & need

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.

download pattern lab: github.com/pattern-lab

demo of the front-end: demo.pattern-lab.info

documentation: pattern-lab.info/docs/

brad frost@brad_frost

dave olsen@dmolsen

the pattern lab team:

nominated: thenetawards.com

pattern labpattern-lab.info

thanks and questions: