Content

Resources

Deep dive CSS: font metrics, line-height and vertical-align

Typography

For text to be properly aligned with the 8 point grid, text should never be outside the proper tags (i.e. as a child of body, main, article etc.)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<p class="lead"></p>
<p class="small"></p>

Headlines

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5

Headline 6

<h1>Headline 1</h1>
<h2>Headline 2</h2>
<h3>Headline 3</h3>
<h4>Headline 4</h4>
<h5>Headline 5</h5>
<h6>Headline 6</h6>

Can also be applied with the .h1 to .h6 classes

Display 1

Display 2

<h1 class="display-1">Display 1</h1>
<h2 class="display-2">Display 2</h2>

Justify

justify

Mute

Muted text

<p class="mute">Muted text</p>

unmute

Emphasize

This is emphasized.

This is <em>emphasized</em>.

Quotation marks

Bootstrap has support for <q> elements, but it only supports english quotation marks. Now one level of Norwegian quotation marks can be achieved as well by setting the lang attribute to no, nb, nn, nb-NO, or nn-NO. The lang attribute can be set on any element, but should normaly be set on the html element.

This text has Norwegian quotation marks.

<q lang="no">This text has Norwegian quotation marks.</q>

Hyphenate

This is a standard HTML entity, but still worth mentioning. Useful for hardcoded headlines.

Hiddenbreakpoint

<h1>Hidden&shy;breakpoint</h1>

Links

[TODO: Brief, but descriptive explanation here, and then link to exhaustive tests.]

Defualt styling

<a href="#">Defualt styling</a>

[Missing visuals to show that the link is external.]

External link.

External <a href="#" class="external">link</a>.

Backdrop style

<a href="#" class="backdrop">Backdrop style</a>

Doesn't look like a link, but is.

Doesn't look like a <a href="#" class="incognito">link</a>, but is.

For muted text, incognito class is applied by default.

Muted text with a link within.

<p class="mute">Muted text with a <a href="#">link</a> within.</p>

Underline styling

<a href="#" class="underline">Underline styling</a>

Muted underline styling

<p class="mute">
  <a href="#" class="underline muted">Muted underline styling</a>
</p>

Lists

Unstyled

List item 1
List item 2
- List item 2.1
- List item 2.2
List item 3

<ul class="unstyled">
  <li>List item 1</li>
  <li>List item 2
    <ul class="unstyled">
      <li>List item 2.1</li>
      <li>List item 2.2</li>
    </ul>
  </li>
  <li>List item 3</li>
</ul>

Inline

<ul class="inline">
  <li><a href="#" class="link">Link 1</a></li>
  <li><a href="#" class="link">Link 2</a></li>
  <li><a href="#" class="link">Link 3</a></li>
</ul>

Description lists

Tables

Sorting

#	Name
40	Ronald Reagan
16	Abraham Lincoln
32	Franklin D. Roosevelt
44	Barack Obama
1	George Washington
28	Woodrow Wilson
35	John F. Kennedy
26	Theodore Roosevelt

<table class="table sortable">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>40</td>
      <td>Ronald Reagan</td>
    </tr>
    <tr>
      <td>16</td>
      <td>Abraham Lincoln</td>
    </tr>
    <tr>
      <td>32</td>
      <td>Franklin D. Roosevelt</td>
    </tr>
    <tr>
      <td>44</td>
      <td>Barack Obama</td>
    </tr>
    <tr>
      <td>1</td>
      <td>George Washington</td>
    </tr>
    <tr>
      <td>28</td>
      <td>Woodrow Wilson</td>
    </tr>
    <tr>
      <td>35</td>
      <td>John F. Kennedy</td>
    </tr>
    <tr>
      <td>26</td>
      <td>Theodore Roosevelt</td>
    </tr>
  </tbody>
</table>