Your glossary page can take advantage of definitions stored in a data file. This gives you the ability to reuse the same definition in multiple places. Additionally, you can use Bootstrap classes to arrange your definition list horizontally.
You can create a glossary for your content. First create your glossary items in a data file such as glossary.yml.
Then create a page and use definition list formatting, like this:
- fractious
- Like a little mischevious child, full of annoying and constant trouble.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- haughty
- Proud and flaunting it. Holding your head high up like a snooty, too-good-for-everything rich person.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- impertinent
- Brave and courageous especially in a difficult, dangerous situation.
Here’s the code:
fractious
: {{site.data.glossary.fractious}}
gratuitous
: {{site.data.glossary.gratuitous}}
haughty
: {{site.data.glossary.haughty}}
gratuitous
: {{site.data.glossary.gratuitous}}
impertinent
: {{site.data.glossary.intrepid}}
The glossary works well as a link in the top navigation bar.
Horizontally styled definiton lists
You can also change the definition list (dl
) class to dl-horizontal
. This is a Bootstrap specific class. If you do, the styling looks like this:
- fractious
- Like a little mischevious child, full of annoying and constant trouble.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- haughty
- Proud and flaunting it. Holding your head high up like a snooty, too-good-for-everything rich person.
- gratuitous
- Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.
- impertinent
- Someone acting rude and insensitive to others.
- intrepid
- Brave and courageous especially in a difficult, dangerous situation.
For this type of list, you must use HTML. The list would then look like this:
<dl class="dl-horizontal">
<dt id="fractious">fractious</dt>
<dd>{{site.data.glossary.fractious}}</dd>
<dt id="gratuitous">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="haughty">haughty</dt>
<dd>{{site.data.glossary.haughty}}</dd>
<dt id="benchmark_id">gratuitous</dt>
<dd>{{site.data.glossary.gratuitous}}</dd>
<dt id="impertinent">impertinent</dt>
<dd>{{site.data.glossary.impertinent}}</dd>
<dt id="intrepid">intrepid</dt>
<dd>{{site.data.glossary.intrepid}}</dd>
</dl>
If you squish your screen small enough, at a certain breakpoint this style reverts to the regular dl
class.
Although I like the side-by-side view for shorter definitions, I found it problematic with longer definitions.