Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
INTRO TO PATTERN LAB
Ithaca 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 ...
WORKING IN PATTERN LAB
PATTERN LAB FILE STRUCTURE
source
_data
_data.json
_listitems.json
annotations.js
_patterns
00-atoms
01-molecules
02-organ...
GETTING STARTED
1. Download from http://patternlab.io/ & load into desired directory
2. First Build: Run the generate comm...
PATTERN LAB COMMANDS
Generate (Build Process): php core/builder.php -g
Watch + Livereload: php core/builder.php -r -w
MUSTACHE
Template:
* {{name}}
* {{age}}
* {{company}}
* {{{company}}}
Hash:
{
"name": "Chris",
"company": "<b>GitHub</b>"
...
_DATA.JSON
"title" : "Pattern Lab",
"htmlClass": "pl",
"bodyClass": "body",
"img": {
"landscape-4x3": {
"src": "../../imag...
00-HEAD.MUSTACHE
<!DOCTYPE html>
<html class="{{ htmlClass }}">
<head>
<title>{{ title }}</title>
<meta charset="UTF-8">
<...
ADDITIONAL RESOURCES
➤ http://cognition.happycog.com/article/craft-patternlab-buzzwords
➤ http://danielmall.com/articles/c...
Próxima SlideShare
Cargando en…5
×

Intro to Pattern Lab

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

  • Sé el primero en comentar

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/

×