Organizing the Library

NOTE: In order to edit content, Cloud users must first create a branch via the UI. For more information, see Editing + Publishing Workflow.

There are two organizational concepts in Knapsack that should be considered when defining your library structure, namely the Navigation and Pattern Page Tabs. Both are designed with flexibility in mind.

Navigation

As of October 2021, Knapsack uses a top navigation structure, with sub-sections displayed using the collapsible sub-navigation on the left side of the screen. A global navigation view is available to Editors and Admins from anywhere in the site.

Overview: October 2021 Navigation Updates

Organizing the Navigation

Pattern Pages and Pages can be organized into Groups. Groups can be nested into other groups up to a depth of 3. To reorder navigation items, simply drag and drop while logged in.

When logged in, you can add Pattern Pages, Pages and Groups from the + button at the bottom of the navigation.

Pattern Pages

A UI pattern (e.g. button, hero, tabs). This content type will create the groundwork for defining and developing a new component for your design system. Pattern pages can have one or many tabs (see below for details).

Pages

Pages are simply for writing documentation and embedding resources via content blocks. Use Pages to document your governance model, design purpose and principles, etc.

Groups

Groups are strictly used to organize content in the navigation.

Pattern Page Tabs

Pattern Pages may contain any number of either Content or Template tabs. You can even have multiple tabs of the same templating language to display different templates of the same pattern (e.g. maybe your primary and secondary buttons use separate templates but you want them grouped on the same Pattern Page).

Content Tabs

Content tabs are similar to Pages, they provide an area for documentation and embedding resource via content blocks.

Template Tabs

Template tabs are how you link a coded template to a pattern page. Template tabs provide a working stage for developing a pattern, which is also used for creating pattern examples that can be embedded in documentation or even other patterns. Template tabs also provide code snippets, some automated documentation, and any additional content blocks at the bottom.

Adding a Tab

Add a tab by clicking the “+” add button on the right side of the tabs list for any Pattern Page.

Note: Adding a Code Template must be done locally.

After you’ve added a tab you’ll see some edit controls when you hover, including the ability to rename the tab or delete it. If you click and drag the tab you can reorder it among the other tabs.