A flexible and customizable unit of content, which can be added on any page, used to document and demonstrate information related to the customers design system. Content Block options include a large variety of out of the box embeds to cover the most common use cases a design system must support.
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 using either the Schema Editor and Pattern preview or by connecting to a coded Template Example.
The area on a Template Tab that shows a preview of a new or existing pattern variation. The pattern preview displays a pattern variation, edits made in the schema editor, as well as results of resizing or interacting directly with the pattern.
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.
A designated space for users to collaborate around a system. Knapsack users can be invited to multiple workspaces using the same login credentials.
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).