Pattern Annotations

Fepper uses Front Matter (YAML + Markdown) for pattern annotations:

---
el: #title
state: inprogress
title: Title in YAML
---
This is a *Markdown* description of my pattern.

el must be a CSS selector identifying the element to annotate. When the Annotations Viewer is opened, a tooltip will appear above the element, and the annotation's title and description will be rendered in the viewer. The state will be rendered as a colored dot denoting the pattern's progress in the UI menu and elsewhere.

An annotation file normally has a .md file extension, although this can be configured in patternlab-config.json under frontMatterExtension. A pattern-specific annotation filename must match the name of the pattern being annotated. For example, to annotate the following pattern:

00-elements/images/landscape-16x9.mustache

Name your annotation file:

00-elements/images/landscape-16x9.md

Annotating Pseudo-Patterns

To annotate pseudo-patterns, replace the tilde sign (~) with a hyphen (-) when naming your annotation file.

For example, to annotate the following pseudo-pattern:

00-elements/button/button~red.json

Name your annotatation file:

00-elements/button/button-red.md

Global Annotation File

Example:

---
el: .hamburger
title: Hamburger
---
Ich bin ein Hamburger.
~*~
---
el: .hero
title: Hero
---
Up front, on top, centered.
~*~
---
el: .sub
title: Sub
---
Below hero.
~*~
---
el: .dagwood
title: Dagwood
---
Sandwich of sandwiches.

Located at source/_annotations, the global annotation file(s) must be named with the .md extenstion, or whatever is configured as the frontMatterExtension. Annotation files (global and pattern-specific) can consist of any number of annotations, each separated by ~*~.