The Why and What of Pattern Lab

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


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 filesystem acts as

its database.


working with patterns: organization

pattern

all file paths in this presentation are located under source/.

00-‐organisms/01-‐global/00-‐header.mustache



patternType

pattern

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



pattern


patternSubtype



pattern


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-‐[email protected]

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


Atomic Design as the basis for Pattern Lab’s pattern types.


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


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

http://bit.ly/1jojXKR

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


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


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


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

The Why and What of Pattern Lab

Technology

intro pattern lab

pattern lab team

pattern lab aint

pattern lab doesnt

pattern list

pattern lab quick tour

frontend tour

pattern labs pattern