The Why and What of Pattern Lab
-
Upload
dave-olsen -
Category
Technology
-
view
117 -
download
4
description
Transcript of The Why and What of Pattern Lab
![Page 1: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/14.jpg)
introducing pattern lab
![Page 15: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/22.jpg)
installation: download from GitHub
![Page 23: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/24.jpg)
installation: open the project
![Page 25: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/27.jpg)
installation: review the installation
![Page 28: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/32.jpg)
front-end tour: default view
![Page 33: The Why and What of Pattern Lab](https://reader034.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/33.jpg)
front-end tour: pattern list
![Page 34: The Why and What of Pattern Lab](https://reader034.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/34.jpg)
front-end tour: resizing options
![Page 35: The Why and What of Pattern Lab](https://reader034.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/35.jpg)
front-end tour: resizing options
![Page 36: The Why and What of Pattern Lab](https://reader034.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/36.jpg)
front-end tour: resizing options
![Page 37: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/38.jpg)
front-end tour: pattern search
![Page 39: The Why and What of Pattern Lab](https://reader034.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/39.jpg)
front-end tour: code view
![Page 40: The Why and What of Pattern Lab](https://reader034.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/40.jpg)
front-end tour: annotations
![Page 41: The Why and What of Pattern Lab](https://reader034.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/41.jpg)
front-end tour: code view
![Page 42: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/52.jpg)
working with patterns: pattern states
![Page 53: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/56.jpg)
working with patterns: atoms
![Page 57: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/58.jpg)
working with patterns: atom example
![Page 59: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/60.jpg)
working with patterns: molecules
![Page 61: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/62.jpg)
working with patterns: molecule example
![Page 63: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/68.jpg)
working with patterns: organisms
![Page 69: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/70.jpg)
working with patterns: organism example
![Page 71: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/76.jpg)
working with patterns: templates
![Page 77: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/78.jpg)
working with patterns: template example
![Page 79: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/82.jpg)
working with patterns: pages
![Page 83: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/84.jpg)
working with patterns: page example
![Page 85: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/88.jpg)
documentation: patternlab.io/docs/
![Page 89: The Why and What of Pattern Lab](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042623/54c75a034a795972738b4569/html5/thumbnails/93.jpg)
pattern labpatternlab.io
thanks and questions: