Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to Pattern Lab

Getting started with the tool made for Atomic Design.
Presented at the Ithaca Web People Meetup on January 5th.

  • Be the first to comment

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/

×