intro to pattern lab
TRANSCRIPT
INTRO TO PATTERN LABIthaca Web People • January 2016 • Paul Stonier
“We’re not designing pages, we’re designing systems of components.
-Stephen Hay
ATOMIC DESIGN
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
WORKING IN PATTERN LAB
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
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.
PATTERN LAB COMMANDS
Generate (Build Process): php core/builder.php -g
Watch + Livereload: php core/builder.php -r -w
MUSTACHETemplate: * {{name}} * {{age}} * {{company}} * {{{company}}}
Hash: { "name": "Chris", "company": "<b>GitHub</b>" }
Output: * Chris * * <b>GitHub</b> * <b>GitHub</b>
_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" } },
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 }}">
ADDITIONAL RESOURCES
➤ http://cognition.happycog.com/article/craft-patternlab-buzzwords
➤ http://danielmall.com/articles/content-display-patterns/