• Like
  • Save
The Why and What of Pattern Lab
Upcoming SlideShare
Loading in...5
×
 

The Why and What of Pattern Lab

on

  • 2,930 views

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

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.

Statistics

Views

Total Views
2,930
Views on SlideShare
2,907
Embed Views
23

Actions

Likes
8
Downloads
22
Comments
0

3 Embeds 23

https://twitter.com 18
http://librosweb.es 3
https://www.linkedin.com 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Why and What of Pattern Lab The Why and What of Pattern Lab Presentation Transcript

    • 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, workflows, & 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” 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 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 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.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: 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 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 the digits are optional and are purely for ordering the navigation.
    • 00-­‐organisms/01-­‐global/00-­‐header.mustache working with patterns: organization the digits are optional and are purely for ordering the navigation. patternSubtype
    • 00-­‐organisms/01-­‐global/00-­‐header.mustache working with patterns: organization 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.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 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-­‐-­‐> 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.
    • 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 lab patternlab.io thanks and questions: