the why and what of pattern lab
DESCRIPTION
Responsive design is forcing us to reevaluate our design and development practices. It's also forcing us to rethink how we communicate with our clients and what a project's deliverables might be. Pattern Lab helps bridge the gap by providing one tool that allows for the creation of modular systems as well as gives clients the tool review the work in the place it's going to be used: the browser. This talk is a deep dive into how Pattern Lab is organized and how to take advantage of it.TRANSCRIPT
![Page 1: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/1.jpg)
the Why & What of
patternlab.iodave olsen, @dmolsen
pattern labcreate atomic design systems
![Page 2: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/2.jpg)
brad frost@brad_frost
dave olsen@dmolsen
the pattern lab team:
![Page 3: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/3.jpg)
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
![Page 4: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/4.jpg)
Our existing standards, workflows, & infrastructure
won’t hold up.
A FUTURE-FRIENDLY TRUTH
http://futurefriend.ly
![Page 5: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/5.jpg)
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
![Page 6: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/6.jpg)
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
Iterative or Spiral Process
![Page 7: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/7.jpg)
communicate.Ultimately, process is about how designers, developers & clients
![Page 8: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/8.jpg)
Creation is a shared activity.
- Bermon Painter
![Page 9: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/9.jpg)
rethinking the web design process: collaborate
Kick-off Design &Develop Test Client
Review Production
![Page 10: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/10.jpg)
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
![Page 11: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/11.jpg)
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.
![Page 12: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/12.jpg)
Build, test, and review deliverables in the place where a project is going to be used.
Get to the browser.
![Page 13: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/13.jpg)
...communicate better with one another?
...build robust systems and not pages?
...review everything in the browser?
So how do we...
![Page 14: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/14.jpg)
introducing pattern lab
![Page 15: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/15.jpg)
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.
![Page 16: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/16.jpg)
what pattern lab is: your deliverables in one place
![Page 17: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/17.jpg)
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
![Page 18: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/18.jpg)
working with patterns: systems, not pages
Atomic Design as the basis for Pattern Lab’s pattern types.
![Page 19: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/19.jpg)
what pattern lab ain’t:
‣ a fancy UI framework‣ dependency heavy‣ incredibly rigid
![Page 20: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/20.jpg)
You make Pattern Lab what you want and need it to be.
![Page 21: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/21.jpg)
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.
![Page 22: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/22.jpg)
installation: download from GitHub
![Page 23: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/23.jpg)
changes to pattern lab: github.com/pattern-lab
![Page 24: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/24.jpg)
installation: open the project
![Page 25: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/25.jpg)
installation: generate for the first time
![Page 26: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/26.jpg)
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.
![Page 27: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/27.jpg)
installation: review the installation
![Page 28: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/28.jpg)
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.
![Page 29: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/29.jpg)
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.
![Page 30: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/30.jpg)
installation: done!
Pattern Lab doesn’t require Apache so no extra set-up. You can drop Pattern Lab into a Dropbox folder for clients.
![Page 31: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/31.jpg)
front-end tour: follow along
demo.patternlab.io
![Page 32: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/32.jpg)
front-end tour: default view
![Page 33: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/33.jpg)
front-end tour: pattern list
![Page 34: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/34.jpg)
front-end tour: resizing options
![Page 35: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/35.jpg)
front-end tour: resizing options
![Page 36: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/36.jpg)
front-end tour: resizing options
![Page 37: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/37.jpg)
front-end tour: media query list
![Page 38: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/38.jpg)
front-end tour: pattern search
![Page 39: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/39.jpg)
front-end tour: code view
![Page 40: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/40.jpg)
front-end tour: annotations
![Page 41: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/41.jpg)
front-end tour: code view
![Page 42: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/42.jpg)
working with patterns: intro
What is a pattern?
![Page 43: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/43.jpg)
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
![Page 44: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/44.jpg)
working with patterns: intro
Pattern Lab provides a way to help you develop, describe, & stitch together mark-up and
style patterns.
![Page 45: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/45.jpg)
Pattern Lab uses conventions so that the filesystem acts as
its database.
working with patterns: intro
![Page 46: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/46.jpg)
working with patterns: organization
pattern
all file paths in this presentation are located under source/.
00-‐organisms/01-‐global/00-‐header.mustache
![Page 47: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/47.jpg)
00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: organization
patternType
pattern
the digits are optional and are purely for ordering the navigation.
![Page 48: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/48.jpg)
00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: organization
pattern
the digits are optional and are purely for ordering the navigation.
patternSubtype
![Page 49: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/49.jpg)
00-‐organisms/01-‐global/00-‐header.mustache
working with patterns: organization
pattern
the digits are optional and are purely for ordering the navigation.
pattern
![Page 50: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/50.jpg)
_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.
![Page 51: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/51.jpg)
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.
![Page 52: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/52.jpg)
working with patterns: pattern states
![Page 53: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/53.jpg)
working with patterns: systems, not pages
Atomic Design as the basis for Pattern Lab’s pattern types.
![Page 54: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/54.jpg)
working with patterns: systems, not pages
molecules-search
organisms-header
templates-homepage
![Page 55: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/55.jpg)
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
![Page 56: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/56.jpg)
working with patterns: atoms
![Page 57: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/57.jpg)
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.
![Page 58: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/58.jpg)
working with patterns: atom example
![Page 59: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/59.jpg)
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:
![Page 60: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/60.jpg)
working with patterns: molecules
![Page 61: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/61.jpg)
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.
![Page 62: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/62.jpg)
working with patterns: molecule example
![Page 63: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/63.jpg)
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:
![Page 64: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/64.jpg)
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:
![Page 65: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/65.jpg)
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.”}
![Page 66: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/66.jpg)
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
![Page 67: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/67.jpg)
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
![Page 68: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/68.jpg)
working with patterns: organisms
![Page 69: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/69.jpg)
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.
![Page 70: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/70.jpg)
working with patterns: organism example
![Page 71: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/71.jpg)
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:
![Page 72: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/72.jpg)
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:
![Page 73: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/73.jpg)
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...
![Page 74: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/74.jpg)
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.
![Page 75: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/75.jpg)
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.
![Page 76: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/76.jpg)
working with patterns: templates
![Page 77: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/77.jpg)
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.
![Page 78: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/78.jpg)
working with patterns: template example
![Page 79: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/79.jpg)
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:
![Page 80: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/80.jpg)
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.
![Page 81: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/81.jpg)
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:
![Page 82: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/82.jpg)
working with patterns: pages
![Page 83: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/83.jpg)
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.
![Page 84: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/84.jpg)
working with patterns: page example
![Page 85: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/85.jpg)
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.
![Page 86: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/86.jpg)
annotations: _data/annotations.js
{ "el": "header[role=banner]", "title" : "Masthead", "comment": "The main header..."}
JSON:
Front-end:
![Page 87: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/87.jpg)
advanced tools:
‣ auto-regenerate‣ auto-reload‣ page follow‣ keyboard shortcuts‣ query string params‣QR code generator
![Page 88: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/88.jpg)
documentation: patternlab.io/docs/
![Page 89: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/89.jpg)
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
![Page 90: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/90.jpg)
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:
![Page 91: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/91.jpg)
pattern lab’s future:
‣KSS‣ custom starter kits‣ export/converter‣ better annotations
![Page 92: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/92.jpg)
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.
![Page 93: The Why and What of Pattern Lab](https://reader034.vdocuments.us/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/93.jpg)
pattern labpatternlab.io
thanks and questions: