Creating Documentation

To get started, you'll need to create a branch via the UI if you're a Cloud user, but for more information on that, refer to the Editing + Publishing Workflow section of our existing documentation.

Once you've created your branch, you can start adding blocks to your pages and pattern pages. Knapsack provides a range of content blocks, but we're particularly excited about our newest addition: the Rich Text Editor Block!

Using Content Blocks in Your Documentation

A block is a chunk of content that you can add to your documentation pages or pattern pages. It's basically a way to add different kinds of content to your documentation site, such as text and media, markdown-formatted text, galleries, and more.

Knapsack offers a range of content blocks to choose from, including System Blocks for embedding design system assets into your documentation and Embed Blocks for including third-party assets and resources.

Blocks give you a lot of flexibility and control over your documentation content, enabling you to add different types of content and organize your pages to meet your needs.

Adding a content block

First things first: when you're viewing a page in Knapsack, you should see a select menu that allows you to choose a content block to add. From there, you can choose from a variety of available blocks, such as Text & Media, Markdown, Gallery, Design Tokens, and more.

Once you've selected a block, you can add it to your page or pattern page on the content tab or at the bottom of the template tab. Each block allows you to add a different form of content, so you have plenty of options to choose from.

To edit or reorder your content blocks, just hover over the block you'd like to adjust. You'll then see a series of controls associated with it, enabling you to perform various actions on the block. You can edit the block settings, move the block up or down, or drag and drop it to rearrange the order of your blocks. You can even duplicate or delete the block if necessary.

Available Content Blocks

Knapsack provides a range of content blocks that can be used for embedding content and third-party resources directly within your system documentation:

• Text & Media:

  • Text - Markdown text editor with simple WYSIWYG controls. To learn more about it and its features, you can check out our detailed documentation page.

    

  • Divider - create visual separation with a divider
  • Gallery - upload images to display as a gallery
  • Attachments
    • pdf
    • eps
    • mp4
    • mov
    • json
    • xd
    • txt
    • fonts (ttf, otf, woff, woff2)
    • Microsoft Office extensions
    • Design programs
      • sketch
      • xd
      • fig
• System:
  • Design Tokens - document design tokens visually or as a simple list, all with click-to-copy functionality
  • System Overview - a grid view of all available patterns
  • Status Table - all pattern statuses in table format
  • Component Embed - a specific configuration of a pattern (created in the Pattern Playground)
  • Component Demo - an array of all variations of a specific pattern by a specific property (e.g., size, outline, etc.)
• Embed:
  • Abstract
  • Adobe XD
  • Airtable
  • Framer
  • Lucidchart
  • YouTube
  • Whimsical
  • iFrame
• Other
  • Markdown - Markdown text editor with simple WYSIWYG controls

Each block allows you to add a different form of content and uses slightly different interactions or controls. For example, click into the Text block to begin typing markdown text (markdown allows you to write text and add formatting with special syntax, see this cheat sheet to get started).

Looking for a content block that we don't have? Contact us at help@knapsack.cloud

Editing & Reordering Content Blocks

When hovering over a block, you’ll see a series of controls associated with it.

The controls in the editing interface enable you to perform various actions on a content block. You can edit the block settings, copy a link to the block, move the block up or down, or drag and drop it to rearrange the order of blocks. You can also move the block to a different page, or duplicate or delete the block altogether. Additionally, you can use the plus button to add a new content block directly below the block you're currently hovering over.

To reorder multiple blocks on a page, you can use the drag handle, which allows you to drag and drop the blocks to your desired positions.