Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
  • Soyez le premier à commenter

Intro to Pattern Lab

  1. 1. INTRO TO PATTERN LAB Ithaca Web People • January 2016 • Paul Stonier
  2. 2. “We’re not designing pages, 
 we’re designing systems of components. -Stephen Hay ATOMIC DESIGN
  3. 3. OUR BUILDING BLOCKS ➤ Atoms — Tag Elements ➤ Molecules — Pairs or Groups of Tags ➤ Organisms — Made up of Atoms/Molecules to create modules ➤ Templates — Configured set of Organisms ➤ Pages — Templates with real content
  4. 4. WORKING IN PATTERN LAB
  5. 5. PATTERN LAB FILE STRUCTURE source _data _data.json _listitems.json annotations.js _patterns 00-atoms 01-molecules 02-organisms 03-templates 04-pages css scss
  6. 6. GETTING STARTED 1. Download from http://patternlab.io/ & load into desired directory 2. First Build: Run the generate command 
 or double-click /core/scripts/generateSite.command 3. Open /public/index.html in your browser* 4. Update the Styles & Patterns *Needs to be running PHP for some features.
  7. 7. PATTERN LAB COMMANDS Generate (Build Process): php core/builder.php -g Watch + Livereload: php core/builder.php -r -w
  8. 8. MUSTACHE Template: * {{name}} * {{age}} * {{company}} * {{{company}}} Hash: { "name": "Chris", "company": "<b>GitHub</b>" } Output: * Chris * * &lt;b&gt;GitHub&lt;/b&gt; * <b>GitHub</b>
  9. 9. _DATA.JSON "title" : "Pattern Lab", "htmlClass": "pl", "bodyClass": "body", "img": { "landscape-4x3": { "src": "../../images/fpo_4x3.png", "alt": "4x3 Image" }, "landscape-16x9": { "src": "../../images/fpo_16x9.png", "alt": "16x9 Image" }, "square": { "src": "../../images/fpo_square.png", "alt": "Square Thumbnail" }, "avatar" : { "src" : "../../images/fpo_avatar.png", "alt" : "Person Name" }, "rectangle": { "src": "http://placeimg.com/400/300/tech", "alt": "Rectangle" } },
  10. 10. 00-HEAD.MUSTACHE <!DOCTYPE html> <html class="{{ htmlClass }}"> <head> <title>{{ title }}</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="../../css/style.css?{{ cacheBuster }}" media="all" /> <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) --> {% pattern-lab-head %} <!-- End Pattern Lab --> </head> <body class="{{ bodyClass }}">
  11. 11. ADDITIONAL RESOURCES ➤ http://cognition.happycog.com/article/craft-patternlab-buzzwords ➤ http://danielmall.com/articles/content-display-patterns/

×