Glossary layout

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:

<dl class="dl">

<dt id="fractious">fractious</dt>
<dd>Like a little mischevious child, full of annoying and constant trouble.</dd>

<dt id="gratuitous">gratuitous</dt>
<dd>Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.</dd>

<dt id="haughty">haughty</dt>
<dd>Proud and flaunting it. Holding your head high up like a snooty, too-good-for-everything rich person.</dd>

<dt id="gratuitous">gratuitous</dt>
<dd>Something that is unwarranted and uncouth, like the social equivalent of a flagrant foul.</dd>

<dt id="impertinent">impertinent</dt>
<dd>Someone acting rude and insensitive to others.</dd>

<dt id="intrepid">intrepid</dt>
<dd>Brave and courageous especially in a difficult, dangerous situation.</dd>

</dl>

Here’s what that looks like:

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.

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.

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.