Support and Documentation

Filters

By default, Styleguide lists all of the available templates sorted by directory and file name; see Project structure for an example. As your Styleguide project grows, you may want to limit the display so designers can quickly focus on the templates pertinent to the theme.

Adding a UI filter

For a given theme, you can add a filtering control so designers can quickly isolate the template to view.

  1. In a text editor, open the default or theme-specific configuration file _config.json.

  2. Add a key /navigation/filters.

  3. For each filter you want to add, do the following:

    1. Add a key for the filter label.

    2. Add an array of filename patterns to include in the filter. The patterns are case sensitive and should end in .html or use a file glob. The rules for pattern matching are similar to those for glob.

The following snippet is an example of adding filters to Styleguide.

The following illustration is an example of the resulting filters.

styleguide-filter.png