Here's a list of terms used in Knapsack and what they're in reference to.
A Content Block (called a "Slice" in the data folder) is a chunk of user generated content on a page. A slice can be text (markdown) or an embed of many types.
A Group is an organizational element in the Left Nav (similar to a "folder") used to group a set of pages or patterns.
The main navigation on the left side of the UI, where your design system pages and patterns are listed.
A new blank page where text content and documentation slices can be combined to document anything (e.g. “Getting Started”). They are distinct from Pattern Pages in that they do not contain tabs or pattern specific settings and have no relationship to statuses.
A pattern is a generic term for what some refer to as a "component". Where a component represents a reusable UI element, the term pattern can also encompass layouts, pages, etc.
Examples of patterns generated via the Template Stage using either the Schema Editor or by connecting to a coded Template Example.
A new UI pattern page (e.g. button, hero, tabs). This content type will create the groundwork for defining and developing a new pattern for your design system. They may have multiple tabs and include Status assignments.
A method of submitting content for review that contains edits generated via the Knapsack UI.
Properties that can be used to pass in data or otherwise manipulate the display and functionality of a pattern.
A template language specific plugin that has a
.render() function that takes in the patternId, templateId, and demoId and returns HTML. Examples: twig, react, web-components, and html.
Json file that holds the shape of data to be supplied to an element, component, or layout.
The form on the Template Stage used to modify Props and Slots for a pattern and saved to create Pattern Examples.
A term derived from the Web Components spec. Slots are used to pass patterns into other patterns (e.g. a button inside a card), both in production code and via the Schema Editor.
Flexible key value pairs used to communicate the current state of a pattern (e.g. React: "Needs Development", or "Ready To Use").
A key and series of values for a single Status (e.g. "Design" may be the key, and it can be set to any one of the values defined).
A coded file used to render a pattern (e.g.
button.tsx for a React button).
A code language that renders templates into a UI (e.g. React, Vue, Angular, Web Components, Twig).
The area on a Pattern Page, specifically on a Template Tab that contains a list of Pattern Examples, an area to preview an example and a Schema Editor for manipulating or generating examples.
On a Pattern Page, a Template Tab is associated with a template file for displaying a coded pattern.
The smallest, most portable unit of design. A token is a key value pair that's used to style patterns (e.g. a color, spacing value, border radius, etc). There are lots of online articles discussing design tokens and strategies for using them (like this one from css-tricks).