Quick Start

Initialize a New Project

This process will install the bootstrap example as a starting point for your design system.

No need to create a new directory. In your terminal, run the following command:

npm create knapsack@next

The process will take a moments to complete. When it's finished you'll be prompted with...

Next steps:
  cd knapsack-example-
  npm install
  npm start

Folder Structure

In the root of the project you'll have some base configuration files.

The /assets folder will house most of your design system assets. To start with you'll see...

  • /assets/design-tokens/: Here you'll find design tokens defined in a style dictionary format, controlled by ~/style-dictionary.config.js.
  • /assets/pages/: Just a starter folder with some page templates.
  • /assets/patterns/: Just a starter folder with some components.

The /public/ folder is an area where static assets can be stored, like images, compiled css files, etc.

The /data/ folder is what Knapsack generates as you use the UI to create content pages, pattern pages and manage other settings. Take a look at some and get an idea for the data structure.