This is a draft cheat sheet. It is a work in progress and is not finished yet.
Basics
Atoms |
Basic Building Blocks, Most simple Components |
Headings, Links, Colors, Buttons |
Molecules |
Combination of Atoms |
Breadcrumb Navigation, Form Unit (e.g. Label + Textfield + Button) |
Organisms |
Combination of different Molecules and/or Atoms |
Header, Footer, Full Form |
Templates |
Raw Page: Full Layout, No Styling, "Lorem ipsum" Content |
Raw Product Overview Page |
Pages |
Full Page: Full Layout, Full Styling, Realistic Content |
Product Overview Page with Realistic Content |
Global Files
_data.json |
Global Data Provider |
_listItems.json |
Like Global Data Provider, but for List of Items (up to 12 Items) |
annotations.json |
Documentation / Notes / Specification |
Data Provider
Global |
_data.json |
Overridable |
Embeddable |
Style Modifier |
{{> atoms-button:primary }} |
? |
? |
Inline Parameter |
{{> atoms-button("label": "Click Me!") |
Not Overridable |
? |
Pattern Specific |
button.json |
? |
? |
Pseudo Pattern |
button~primary.json |
? |
Not Embeddable |
Global List Items |
_listitems.json |
Overridable |
? |
List Items |
button.listitems.json |
? |
? |
Template Syntax*
{{ label }} |
Outputs value from data provider |
{{{ label }}} |
Outputs HTML value from data provider |
{{ img.square.url }} |
Outputs nested value from data provider |
{{> atoms-button }} |
Includes given pattern |
{{# showButtons }} {{> atoms-button }} {{/ showButtons }} |
Includes given pattern when condition is met |
{{# listItem.five }} {{> atoms-button }} {{/ listItems.five }} |
Includes given pattern five times, always with different data |
*Pattern Lab uses Mustache syntax for it's templates.
States
Undefined |
buttons.mustache |
no dot |
In Progress |
buttons@inprogress.mustache |
red dot |
In Review |
buttons@inreview.mustache |
yellow dot |
Complete |
buttons@complete.mustache |
green dot |
|
