Utility Typography

<p class="bold">Bold</p>
<p class="regular">Regular</p>
<p class="italic">Italic</p>
<p class="caps">Caps</p>
<p class="left-align">Left align</p>
<p class="center">Center</p>
<p class="right-align">Right align</p>
<p class="justify">Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="nowrap">No wrap</p>
<p class="underline">Underline</p>
<p class="truncate">Truncate</p>
<p class="font-familiy-inherit">Font Family Inherit</p>
<p class="font-size-inherit">Font Size Inherit</p>
<a class="text-decoration-none">Text Decoration None</a>

<ul class="list-reset">
  <li>List Reset</li>
  <li>Removes bullets</li>
  <li>Removes numbers</li>
  <li>Removes padding</li>
</ul>

<ul class="list-reset">
  <li class="inline-block mr1">Half-Smoke</li>
  <li class="inline-block mr1">Kielbasa</li>
  <li class="inline-block mr1">Bologna</li>
  <li class="inline-block mr1">Prosciutto</li>
</ul>

CSS Source

.font-family-inherit { font-family: inherit }
.font-size-inherit { font-size: inherit }
.text-decoration-none { text-decoration: none }

.bold    { font-weight: var(--bold-font-weight, bold) }
.regular { font-weight: normal }
.italic  { font-style: italic }
.caps    { text-transform: uppercase; letter-spacing: var(--caps-letter-spacing); }

.left-align   { text-align: left }
.center       { text-align: center }
.right-align  { text-align: right }
.justify      { text-align: justify }

.nowrap { white-space: nowrap }
.break-word { word-wrap: break-word }

.line-height-1 { line-height: var(--line-height-1) }
.line-height-2 { line-height: var(--line-height-2) }
.line-height-3 { line-height: var(--line-height-3) }
.line-height-4 { line-height: var(--line-height-4) }

.list-style-none { list-style: none }
.underline { text-decoration: underline }

.truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-reset {
  list-style: none;
  padding-left: 0;
}