Anatomy of a Pattern
Knapsack will start tracking and documenting your patterns by simply adding the following files to pattern-specific (e.g.
/button) directory in your Patterns directory.
knapsack.pattern.js- defines a unique ID for the given pattern, as well as an array of templates that create the pattern and their associated schema files.
knapsack.pattern-meta.json- defines meta data about the pattern including its human friendly name, type, and description.
your-pattern.schema.js- A json schema for the pattern.
- Template file(s). e.g.
- Optional & Encouraged
README.md- Optional documentation for the pattern.
Add a New Pattern
Make the files listed above. You can find examples of the file contents in the following examples for a Button and a Card. You can also look in the
/examples directory of the Knapsack repository, where you'll find various design system we've built to illustrate ways Knapsack can function. Start by looking in
/examples/simple/assets/patterns — you'll find a few simple patterns with the correct contents to get you started.