Skip to content

Latest commit

 

History

History
92 lines (59 loc) · 2.53 KB

doc_glossary.md

File metadata and controls

92 lines (59 loc) · 2.53 KB
title tags keywords last_updated summary
Glossary layout
formatting
special-layouts
definitions, glossaries, terms, style guide
August 12, 2015
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:

<dl class="dl">

<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="gratuitous">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>

Here's what that looks like:

fractious
{{site.data.glossary.fractious}}
gratuitous
{{site.data.glossary.gratuitous}}
haughty
{{site.data.glossary.haughty}}
gratuitous
{{site.data.glossary.gratuitous}}
impertinent
{{site.data.glossary.impertinent}}
intrepid
{{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
{{site.data.glossary.fractious}}
gratuitous
{{site.data.glossary.gratuitous}}
haughty
{{site.data.glossary.haughty}}
gratuitous
{{site.data.glossary.gratuitous}}
impertinent
{{site.data.glossary.impertinent}}
intrepid
{{site.data.glossary.intrepid}}

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.