title | tags | category | eleventyNavigation | |||||||
---|---|---|---|---|---|---|---|---|---|---|
Documenting Patterns |
|
patterns |
|
Pattern documentation gives developers and designers the ability to provide context for their patterns. The documentation file consists of Markdown with YAML front matter. It should follow this format:
---
title: Title for my pattern
---
This is a *Markdown* description of my pattern.
Attributes overview:
- The
title
attribute is used in Pattern Lab's navigation as well as in the styleguide views. Format:string
- Pattern
tags
has to be an array, liketags: [new, relaunch, dev]
- Pattern
states
are defined likestate: incomplete
and provide a simple visual indication
Both tags
and states
could be used for not including patterns in a UIKit specific build.
The description
is used in the styleguide views.
Pattern documentation needs to have a .md
file extension and match the name of the pattern it's documenting. For example, to document the following pattern:
00-atoms/images/landscape-16x9.mustache
We'd name our documentation file:
00-atoms/images/landscape-16x9.md
To add documentation to pseudo-patterns, replace the tilde sign (~
) with a dash (-
) when naming your documentation file.
For example, to document the following pseudo-pattern:
00-atoms/button/button~red.mustache
We'd name our documentation file:
00-atoms/button/button-red.md
A future update of Pattern Lab will support more front matter attributes including: excludeFromStyleguide, order and links. It will also support adding custom attributes that could be utilized by plugins. For example, GitHub issues related to patterns.