Download as PDF, PPTX
Uploaded byPaul Stonier
Intro to Pattern Lab
The document introduces Pattern Lab, a design system focused on creating components rather than static pages. It outlines the file structure, essential building blocks (atoms, molecules, organisms, templates, and pages), and how to get started with Pattern Lab by downloading, building, and utilizing the system. Additional resources for learning about Pattern Lab concepts and buzzwords are also provided.
More Related Content
Intro to Pattern Lab
- 1. INTRO TO PATTERNLAB Ithaca Web People • January 2016 • Paul Stonier
- 2. “We’re not designingpages, 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.
- 5. PATTERN LAB FILESTRUCTURE 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. Downloadfrom 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" : "PatternLab", "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/