key-value punctuation

You've probably been wondering how to semantically mark-up your lists of keys and values — your labelled bits of information. You've probably been gnawing your fingernails to nubs, panicked with uncertainty. Well wait 'till you hear this: The answer seems to be description (or association) lists — the <dl>, <dt>, and <dd> elements. (See the References listed below.)

WhatWG says "The dl element represents an association list consisting of zero or more name-value groups (a description list)." There you have it. What you've been looking for.

One traditional manner of styling such associative lists is with colon-separated name-value pairs, the first line flush left and following lines indented (the fabled "hanging indent"). This mixin should help make that dream a reality. And it also enables many other common key-value formats, a couple of which are shown in the examples below.

Apply the mixin to your <dl> element.

A note about spacing: There are several spacing variables — so this might clear things up:

• On the first line, you have: [term][$pad-left][$divider][$pad][description]
• On following lines the description is indented with $indent (see Example 1). (You will also notice the effects of $indent on the first line if it is wider than your term — as in Examples 2 and 3.)
• Vertical spacing between term-description groups is controlled with $spacing (see Example 2).

example

HTML

<div class="eg-key-val-c">  <dl class="eg-key-val-1">
    <dt>Name</dt>
    <dd>Lorem Ipsum</dd>
    <dt>Occupation</dt>
    <dd>Placeholder</dd>
    <dt>Children</dt>
    <dd>None</dd>
    <dt>Excuses</dt>
    <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </dd>
  </dl>
  <dl class="eg-key-val-2">
    <dt>Consolation</dt>
    <dd>Alleviation of misery or distress of mind</dd>
    <dt>Depression</dt>
    <dd>A sinking of the spirits</dd>
    <dt>Equanimity</dt>
    <dd>A state of resistance to elation, depression, anger, etc.</dd>
  </dl>
  <dl class="eg-key-val-3">
    <dt>Doom</dt>
    <dd>Fate decreed or determined; fixed fortune; irrevocable destiny.</dd>
    <dt>Waggle</dt>
    <dd>To cause to wag frequently and with short motions; move first one way and then the other.</dd>
    <dt>Pantaloon</dt>
    <dd>In early Italian comedy, a character usually represented as a lean and foolish old man (properly a Venetian), wearing spectacles and slippers.</dd>
  </dl>
</div>

.eg-key-val-1 {
  @include scut-key-val;
  // or @extend %scut-key-val;
}
.eg-key-val-2 {
  @include scut-key-val("\2014", 0.5em, 8em, 1em, 0.5em);
  & > dt {
    font-weight: bold;
  }
}
.eg-key-val-3 {
  $dt-width: 6em;
  @include scut-key-val("", 0, $dt-width + 1em);
  & > dt {
    width: $dt-width;
    text-align: right;
    text-transform: uppercase;
  }
}

.eg-key-val-1 > dt {
  clear: both;
  float: left;
}
.eg-key-val-1 > dt:after {
  content: ":";
  margin-right: 0.25em;
}
.eg-key-val-1 > dd {
  margin-left: 1em;
}

.eg-key-val-2 > dt {
  clear: both;
  float: left;
}
.eg-key-val-2 > dt:after {
  content: "—";
  margin-right: 0.5em;
  margin-left: 0.5em;
}
.eg-key-val-2 > dd {
  margin-left: 8em;
  margin-bottom: 1em;
}
.eg-key-val-2 > dt {
  font-weight: bold;
}

.eg-key-val-3 > dt {
  clear: both;
  float: left;
}
.eg-key-val-3 > dt:after {
  content: "";
  margin-right: 0;
}
.eg-key-val-3 > dd {
  margin-left: 7em;
}
.eg-key-val-3 > dt {
  width: 6em;
  text-align: right;
  text-transform: uppercase;
}

Result