Glossary

Here's a list of terms used in Knapsack and what they're in reference to.

Content Block

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.

Group

A Group is an organizational element in the Left Nav (similar to a "folder") used to group a set of pages or patterns.

Left Nav

The main navigation on the left side of the UI, where your design system pages and patterns are listed.

Page

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.

Pattern

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.

Pattern Example(s)

Examples of patterns generated using either the Schema Editor and Pattern preview or by connecting to a coded Template Example.

Pattern Preview

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.

Pattern Page

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.

Propose Change

A method of submitting content for review that contains edits generated via the Knapsack UI.

Props

Properties that can be used to pass in data or otherwise manipulate the display and functionality of a pattern.

Renderer

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.

Schema

Json file that holds the shape of data to be supplied to an element, component, or layout.

Schema Editor

The form on the Template Stage used to modify Props and Slots for a pattern and saved to create Pattern Examples.

Slots

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.

Status

Flexible key value pairs used to communicate the current state of a pattern (e.g. React: "Needs Development", or "Ready To Use").

Status Set

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).

Template

A coded file used to render a pattern (e.g.  button.tsx for a React button).

Template Language

A code language that renders templates into a UI (e.g. React, Vue, Angular, Web Components, Twig).

Template Stage

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.

Template Tab

On a Pattern Page, a Template Tab is associated with a template file for displaying a coded pattern.

Workspace

A designated space for users to collaborate around a system. Knapsack users can be invited to multiple workspaces using the same login credentials. 

Design Token

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).


< Previous: Main Concepts                 Next: Organizing the Library >