Add a reference section to each page

[davestewart]

Background

Right now, a user has to look through all the examples to know what classes can be added, and the process is generally a copy/paste exercise.

Whilst this is fine to get started, it's not so great for knowing what is available.

Proposal

Add a "Reference" table at either the bottom or top of each page:

Rule	Purpose	Options
btn	Button
btn-$variant	Style	primary secondary text
btn-$size	Size	sm lg

Research

Approach:

• pick a variety of elements and review classes
• mock up examples in plain markdown

Consider:

• title
• num columns
• column groups
• config format

Implementation

Config; one of:

• manual configuration (from docs)
• programmatic (from source code)
• semi-automatic (mixture of docs and source code)

Build:

• Create a Vue component
• Define a simple config format
• Test sample configs

Apply:

• List pages here