The Why and What of Pattern Lab

the Why & What of
patternlab.io
dave 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,
workﬂows, & infrastructure
won’t hold up.
A FUTURE-FRIENDLY TRUTH
http://futurefriend.ly

courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUT
USERS
THROW IN
SOME CONTENT
LAUNCH!
Linear Workflow

CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workﬂow
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-ﬁdelity HTML mock-ups
‣ high-ﬁdelity 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...

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
atomic
spectrum
viewport
re-sizer
annotationspage follow
pattern states
shared component library & dynamic data
MQ re-sizer
starter kit auto-reload
code view
auto-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 ﬁrst time

installation: generate for the ﬁrst 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.html
don’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: resizing options

front-end tour: media query list

front-end tour: pattern search

working with patterns: intro
What is a pattern?

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

Pattern Lab provides a way to
help you develop, describe, &
stitch together mark-up and
style patterns.

Pattern Lab uses conventions
so that the ﬁlesystem acts as
its database.

working with patterns: organization
all ﬁle paths in this presentation are located under source/.
00-‐organisms/01-‐global/00-‐header.mustache

patternType
the digits are optional and are purely for ordering the navigation.

patternSubtype

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

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: using atoms
Use atoms to help deﬁne
general styles. Good ﬁrst 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

<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:

<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

<p>{{
description
}}</p>

</div>
</li>
these are variables and are deﬁned in various JSON ﬁles.
molecules-single-comment:

customizing data: JSON & mustache vars

<div>

<h4>
<a
href="#">{{
name.first
}}
{{
name.last
}}</a>

</h4>

</div>

<div

<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.json
Pattern-specific data:
00-‐pages/00-‐homepage~emergency.json
Pseudo-pattern:
specificity

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
deﬁning patterns that may
match partials in a CMS.

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:

<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:

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 deﬁning of variable replacement right in the partial.

customizing data: style modiﬁers
{{>
molecule-‐alert:error
}}
<div
class=”alert
{{
styleModifier
}}”>

Message
</div>
<div
class=”alert
error”>

Message
</div>
Mustache:
Partial:
Rendered:
style modiﬁers allow for DRY patterns.

working with patterns: templates

working with patterns: using templates
Use templates to wireframe
and provide a low-ﬁdelity
version of ﬁnal 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

<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-‐-‐>
templates-homepage:

working with patterns: common header & footer
00-‐atoms/00-‐meta/_00-‐header.mustache
00-‐atoms/00-‐meta/_01-‐footer.mustache
if these patterns exist Pattern Lab automatically includes them as
your header and footer.

<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: using pages
Use pages to provide high-
ﬁdelity versions of a template.
They should include very
speciﬁc 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 ﬁle 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 workﬂow with advanced tools:
1. start watcher & auto-reload server at
the same time
2. edit & save ﬁles 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 initConﬁg:
add to registerTask:

pattern lab’s future:
‣ KSS
‣ custom starter kits
‣ export/converter
‣ better annotations

summing up:
‣ Our workﬂows 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 lab
patternlab.io
thanks and questions:

The Why and What of Pattern Lab

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to The Why and What of Pattern Lab (20)

More from Dave Olsen (20)

Recently uploaded (20)

The Why and What of Pattern Lab