Post on 27-Jan-2015
description
the Why & What of
patternlab.iodave olsen, @dmolsen
pattern labcreate atomic design systems
brad frost@brad_frost
dave olsen@dmolsen
the pattern lab team:
a roadmap for our talk:
‣ rethinking the web design process- process: linear vs. collaborative- communication: clients and RWD- modular systems: systems vs. pages
‣ deep dive into pattern lab- quick tour of the front-end- installation- working with patterns- customizing data- advanced features
Our existing standards, workflows, & infrastructure
won’t hold up.
A FUTURE-FRIENDLY TRUTH
http://futurefriend.ly
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
Iterative or Spiral Process
communicate.Ultimately, process is about how designers, developers & clients
Creation is a shared activity.
- Bermon Painter
rethinking the web design process: collaborate
Kick-off Design &Develop Test Client
Review Production
rethinking how we communicate: 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 hand-offs to clients should allow them to re-mix common elements that we’ve developed to build new things.
Our deliverables should be systems, not pages.
Build, test, and review deliverables in the place where a project is going to be used.
Get to the browser.
...communicate better with one another?
...build robust systems and not pages?
...review everything in the browser?
So how do we...
introducing pattern lab
Pattern Lab is a collection of tools for creating modular
systems that involves your entire team & your client every
step of the way and lets everyone review in the browser.
what pattern lab is: your deliverables in one place
Kick-off Design &Develop Test Client
Review Production
what pattern lab is: a collection of tools
atomicspectrum
viewportre-sizer
annotationspage followpattern states
shared component library & dynamic data
MQ re-sizer
starter kit auto-reloadcode viewauto-build
style guide
working with patterns: systems, not pages
Atomic Design as the basis for Pattern Lab’s pattern types.
what pattern lab ain’t:
‣ a fancy UI framework‣ dependency heavy‣ incredibly rigid
You make Pattern Lab what you want and need it to be.
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.
installation: download from GitHub
changes to pattern lab: github.com/pattern-lab
installation: open the project
installation: generate for the first time
installation: generate for the first time
php core/builder.php -‐g
just in case you’re a fan of the command line, on linux or on windows.php core/builder.php -‐-‐help will show you all of your options.
installation: review the installation
installation: review source/the only required directories are _data/ & _patterns/. otherwise, you can change source/ as much as you want. this is what we mean about making your own Bootstrap. you can even use Bootstrap.
installation: open pattern lab’s index.htmldon’t edit public/. always make changes in source/. public/ is for your own and your client review purposes.
installation: done!
Pattern Lab doesn’t require Apache so no extra set-up. You can drop Pattern Lab into a Dropbox folder for clients.
front-end tour: follow along
demo.patternlab.io
front-end tour: default view
front-end tour: pattern list
front-end tour: resizing options
front-end tour: resizing options
front-end tour: resizing options
front-end tour: media query list
front-end tour: pattern search
front-end tour: code view
front-end tour: annotations
front-end tour: code view
working with patterns: intro
What is a pattern?
working with patterns: intro
Each pattern describes a problem that occurs over and over again in our environment, and
then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without
ever doing it the same way twice. — Christopher Alexander
working with patterns: intro
Pattern Lab provides a way to help you develop, describe, & stitch together mark-up and
style patterns.
Pattern Lab uses conventions so that the filesystem acts as
its database.
working with patterns: intro
working with patterns: organization
pattern
all file paths in this presentation are located under source/.
00-‐organisms/01-‐global/00-‐header.mustache
00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: organization
patternType
pattern
the digits are optional and are purely for ordering the navigation.
00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: organization
pattern
the digits are optional and are purely for ordering the navigation.
patternSubtype
00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: organization
pattern
the digits are optional and are purely for ordering the navigation.
pattern
_00-‐header.mustache
working with patterns: hiding patterns
the underscore hides a pattern in the navigation but the pattern is still available for inclusion in other patterns.
00-‐header@inreview.mustache
working with patterns: pattern states
anything after the “@” gets added as a class to the pattern’s navigation element. “inprogress,” “inreview,” and
“complete” propagate to downstream patterns.
working with patterns: pattern states
working with patterns: systems, not pages
Atomic Design as the basis for Pattern Lab’s pattern types.
working with patterns: systems, not pages
molecules-search
organisms-header
templates-homepage
Important: You don’t have to use the Atomic Design metaphor to use Pattern Lab. Change it to whatever you want.
working with patterns: systems, not pages
working with patterns: atoms
working with patterns: using atoms
Use atoms to help define general styles. Good first step for style tiles, mood boards, or testing style changes. They most likely won’t be used in other patterns.
working with patterns: atom example
working with patterns: atom example
<h1>Heading Level 1</h1><h2>Heading Level 2</h2><h3>Heading Level 3</h3><h4>Heading Level 4</h4><h5>Heading Level 5</h5><h6>Heading Level 6</h6>
atoms-headings:
working with patterns: molecules
working with patterns: using molecules
Use molecules as your base for common patterns that will be included further up. In general, they shouldn’t have partial dependencies. Will use variables.
working with patterns: molecule example
working with patterns: molecule example
<li class="comment-‐container"> <div class="comment-‐meta"> <img src=”{{ img.avatar }}” class=”avatar”> <h4 class="comment-‐name">
<a href="#">{{ name.first }} {{ name.last }}</a> </h4> </div> <div class="comment-‐text"> <p>{{ description }}</p> </div></li>
molecules-single-comment:
working with patterns: molecule example
<li class="comment-‐container"> <div class="comment-‐meta"> <img src=”{{ img.avatar }}” class=”avatar”> <h4 class="comment-‐name">
<a href="#">{{ name.first }} {{ name.last }}</a> </h4> </div> <div class="comment-‐text"> <p>{{ description }}</p> </div></li>
these are variables and are defined in various JSON files.
molecules-single-comment:
customizing data: JSON & mustache vars
<div> <h4>
<a href="#">{{ name.first }} {{ name.last }}</a> </h4> </div> <div class="comment-‐text"> <p>{{ description }}</p> </div>
Mustache:
JSON:{ “name”: { “first”: “Dave”, “last”: “Olsen” }, “description”: “Long text goes here.”}
customizing data: where to define it
Global data:_data/_data.js
00-‐pages/00-‐homepage.jsonPattern-specific data:
00-‐pages/00-‐homepage~emergency.jsonPseudo-pattern:
spec
ifici
ty
customizing data: system/default data
<ul> {{# listItems.four }} <li>{{ name.first }} {{ name.last }}</li> {{/ listItems.four }}</ul>
the “listItems” variable:
the “link” variable:
<a href=”{{ link.pages-‐blog }}”>
provides the real path to a pattern
provides an easy-to-use set of data to iterate over for your mock-ups. supports up to twelve iterations. randomized every time the site is generated. more info: http://bit.ly/1jojXKR
working with patterns: organisms
working with patterns: using organisms
Use organisms when you need combinations of molecules. Also good when defining patterns that may match partials in a CMS.
working with patterns: organism example
working with patterns: organism example
<section class="comments section"> <div class="comments-‐container" id="comments-‐container"> <h2 class="section-‐title">59 Comments</h2> {{> molecules-‐comment-‐form }} <ul class="comment-‐list"> {{# listItems.five }} {{> molecules-‐single-‐comment }} {{/ listItems.five }} </ul> </div> {{> molecules-‐pagination }} </section>
organisms-comment-thread:
working with patterns: organism example
<section class="comments section"> <div class="comments-‐container" id="comments-‐container"> <h2 class="section-‐title">59 Comments</h2> {{> molecules-‐comment-‐form }} <ul class="comment-‐list"> {{# listItems.five }} {{> molecules-‐single-‐comment }} {{/ listItems.five }} </ul> </div> {{> molecules-‐pagination }} </section>
these are mustache partials and are how we include one pattern within another.
organisms-comment-thread:
00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: partial syntax
if we want to include this pattern in another pattern...
default partial syntax uses only the pattern type and pattern name...{{> organisms-‐header }}
fuzzy matching of the pattern name...{{> organisms-‐head }}
{{> 00-‐organisms/01-‐global/00-‐header }}traditional mustache partial...
customizing data: pattern parameters
{{> molecule-‐alert(message: “hello”) }}
<div class=”alert”> {{ message }}</div>
<div class=”alert”> hello</div>
Mustache:
Partial:
Rendered:
pattern parameters allow for defining of variable replacement right in the partial.
customizing data: style modifiers
{{> molecule-‐alert:error }}
<div class=”alert {{ styleModifier }}”> Message</div>
<div class=”alert error”> Message</div>
Mustache:
Partial:
Rendered:
style modifiers allow for DRY patterns.
working with patterns: templates
working with patterns: using templates
Use templates to wireframe and provide a low-fidelity version of final pages. They’re all about layout. Template mark-up can and should include sections that might not show by default. After atoms, templates will be the other thing you show clients.
working with patterns: template example
working with patterns: template example
<div class="page" id="page"> {{> organisms-‐header }} <div role="main"> {{# emergency }} {{> molecules-‐alert:error }} {{/ emergency }} {{# hero }} {{> molecules-‐block-‐hero }} {{/ hero}}
<div class="g g-‐3up"> {{# touts}} <div class="gi"> {{> molecules-‐block-‐inset }} </div> {{/ touts}} </div><!-‐-‐end 3up-‐-‐>
<hr />
<div class="l-‐two-‐col"> <div class="l-‐main"> <section class="section latest-‐posts"> <h2 class="section-‐title">Latest Posts</h2> <ul class="post-‐list"> {{# latest-‐posts }} <li>{{> molecules-‐media-‐block }}</li> {{/ latest-‐posts }} </ul> <a href="#" class="text-‐btn">View more posts</a> </section> </div><!-‐-‐end .l-‐main-‐-‐>
<div class="l-‐sidebar"> {{> organisms-‐recent-‐tweets }} </div><!-‐-‐end .l-‐sidebar-‐-‐> </div><!-‐-‐end .l-‐two-‐col-‐-‐> </div><!-‐-‐End role=main-‐-‐> {{> organisms-‐footer }}</div>
templates-homepage:
working with patterns: common header & footer
/
00-‐atoms/00-‐meta/_00-‐header.mustache00-‐atoms/00-‐meta/_01-‐footer.mustache
if these patterns exist Pattern Lab automatically includes them as your header and footer.
working with patterns: template example
<div class="page" id="page"> {{> organisms-‐header }} <div role="main"> {{# emergency }} {{> molecules-‐alert:error }} {{/ emergency }} {{# hero }} {{> molecules-‐block-‐hero }} {{/ hero}} ...
these are quasi-“if statements” and allow for the inclusion of multiple layout possibilities for a template. turned on via JSON variables.
templates-homepage:
working with patterns: pages
working with patterns: using pages
Use pages to provide high-fidelity versions of a template. They should include very specific data. They’re all about showing “real” content in the wireframe.
working with patterns: page example
working with patterns: page example
{{> templates-‐homepage }}
pages should simply include/reference templates. the majority of the power of a page is in its associated JSON file and by using pseudo-patterns.
annotations: _data/annotations.js
{ "el": "header[role=banner]", "title" : "Masthead", "comment": "The main header..."}
JSON:
Front-end:
advanced tools:
‣ auto-regenerate‣ auto-reload‣ page follow‣ keyboard shortcuts‣ query string params‣QR code generator
documentation: patternlab.io/docs/
common workflow with advanced tools:
1. start watcher & auto-reload server at the same time
2. edit & save files in source/
3. watch things change in your browser
integrating with grunt:
npm install -‐-‐save-‐dev grunt-‐shell
shell: { patternlab: { command: "php core/builder.php -‐gp" }},
shell:patternlab
install grunt-shell:
add to initConfig:
add to registerTask:
pattern lab’s future:
‣KSS‣ custom starter kits‣ export/converter‣ better annotations
summing up:
‣ Our workflows are going to change.‣ Involve entire team in the process.‣ Create modular systems of mark-
up.‣ Pattern Lab can be a central tool in
helping that happen.
pattern labpatternlab.io
thanks and questions: