Support and Documentation

Filters

By default, Styleguide lists all of the available templates sorted by directory and file name; see Directory structure for theming tutorial project 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.

{
  "navigation": { 
    "filters": { 1 
      "Articles": [ 2 3
        "/*Article*.html" 4
      ],
      "URLs": [ 5 6
        "twitter/*Url*.html", 7
        "instagram/*Url*.html",
        "facebook/*Url*.html"
      ],
      "Pages": [ 8 9
        "/styleguide/core/page/*" 10
      ]
    }
  }
}

1

Declares filters for Styleguide.

2

Defines a filter for articles.

3

Declares the filter's label.

4

Lists the file pattern included in the filter—any template that includes Article in the file name.

5

Defines a filter for URLs.

6

Declares the filter's label.

7

Lists the file patterns included in the filter—files in three different directories with Url included in the filename.

8

Defines a filter for a directory of templates.

9

Declares the filter's label.

10

File glob for filtering all of the templates in the directory /styleguide/core/page/.

The following illustration is an example of the resulting filters.

styleguide-filter.png