Organizing the Library

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

Left Nav

The Left Nav is a searchable list of top level topics. Pattern Pages and Pages can be organized into Groups. Groups can be nested into other groups up to a depth of 3. To reorder nav items, simply drag and drop while logged in.

Left Nav Reordering

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

Adding left nav items

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

Pattern Page Tabs

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.

Template Tab

Learn more about connecting coded templates to a Pattern Page.

Adding a Tab

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

Add Tab Popover

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.

Edit and Sort Tabs