Intro to Pattern Lab
•
1 gefällt mir•570 views
Getting started with the tool made for Atomic Design. Presented at the Ithaca Web People Meetup on January 5th.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Intro to Pattern Lab
Ähnlich wie Intro to Pattern Lab (20)
Mehr von Paul Stonier
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Intro to Pattern Lab
- 1. INTRO TO PATTERN LAB Ithaca Web People • January 2016 • Paul Stonier
- 2. “We’re not designing pages, we’re designing systems of components. -Stephen Hay ATOMIC DESIGN
- 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. WORKING IN PATTERN LAB
- 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. 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. PATTERN LAB COMMANDS Generate (Build Process): php core/builder.php -g Watch + Livereload: php core/builder.php -r -w
- 8. MUSTACHE Template: * {{name}} * {{age}} * {{company}} * {{{company}}} Hash: { "name": "Chris", "company": "<b>GitHub</b>" } Output: * Chris * * <b>GitHub</b> * <b>GitHub</b>
- 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. 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. ADDITIONAL RESOURCES ➤ http://cognition.happycog.com/article/craft-patternlab-buzzwords ➤ http://danielmall.com/articles/content-display-patterns/