Organizing the Library
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.
The navigation on the left 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 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.
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 are simply for writing documentation and embedding resources via content blocks. Use Pages to document your governance model, design purpose and principles, etc.
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 are similar to Pages, they provide an area for documentation and embedding resource via content blocks.
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.