Styleguide 0.1.0

4 - Typography

We relish at the oppertunity to work with the written word. Lovingly and carefully we have covered styles for the basics like heading, paragraphs and most text-level elements.

4.1 - Headings

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme
Ny gransking av SOS Rasisme
<h1>Ny gransking av SOS Rasisme</h1>
<h2>Ny gransking av SOS Rasisme</h2>
<h3>Ny gransking av SOS Rasisme</h3>
<h4>Ny gransking av SOS Rasisme</h4>
<h5>Ny gransking av SOS Rasisme</h5>
<h6>Ny gransking av SOS Rasisme</h6>

4.1.1 - Subheadings

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme

Ny gransking av SOS Rasisme
Ny gransking av SOS Rasisme
<h1 class="subheader">Ny gransking av SOS Rasisme</h1>
<h2 class="subheader">Ny gransking av SOS Rasisme</h2>
<h3 class="subheader">Ny gransking av SOS Rasisme</h3>
<h4 class="subheader">Ny gransking av SOS Rasisme</h4>
<h5 class="subheader">Ny gransking av SOS Rasisme</h5>
<h6 class="subheader">Ny gransking av SOS Rasisme</h6>

4.1.2 - Segmented headings

SOS Rasisme konkurs Skylder 27 mill

SOS Rasisme konkurs Skylder 27 mill

SOS Rasisme konkurs Skylder 27 mill

SOS Rasisme konkurs Skylder 27 mill

SOS Rasisme konkurs Skylder 27 mill
SOS Rasisme konkurs Skylder 27 mill
<h1>SOS Rasisme konkurs <small>Skylder 27 mill</small></h1>
<h2>SOS Rasisme konkurs <small>Skylder 27 mill</small></h2>
<h3>SOS Rasisme konkurs <small>Skylder 27 mill</small></h3>
<h4>SOS Rasisme konkurs <small>Skylder 27 mill</small></h4>
<h5>SOS Rasisme konkurs <small>Skylder 27 mill</small></h5>
<h6>SOS Rasisme konkurs <small>Skylder 27 mill</small></h6>

4.1.3 - Uppercase

SOS Rasisme konkurs

SOS Rasisme konkurs

SOS Rasisme konkurs

SOS Rasisme konkurs

SOS Rasisme konkurs
SOS Rasisme konkurs
<h1 class="uppercase">SOS Rasisme konkurs</h1>
<h2 class="uppercase">SOS Rasisme konkurs</h2>
<h3 class="uppercase">SOS Rasisme konkurs</h3>
<h4 class="uppercase">SOS Rasisme konkurs</h4>
<h5 class="uppercase">SOS Rasisme konkurs</h5>
<h6 class="uppercase">SOS Rasisme konkurs</h6>

4.3 - Paragraphs

SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra Landsrådet for norske barne- og ungdomsorganisasjoner (LNU). Dommen er anket. Rettssaken avdekket så omfattende juks at det senere ble åpnet politietterforskning mot SOS Rasisme og dens ledelse. Etterforskningen førte til razzia mot organisasjonens lokaler i Haugesund og i Oslo.

Nedover bekken ser vi flere permer i ulike farger ligge strødd. De fleste er forvrengt av vannmasser. Innholdet i de fleste permene ser ut til å være vasket vekk. Lenger nedover er det bare hvite cellulosekuler igjen av det som en gang var innholdet i disse permene.

På åstedet bar de fleste plastpermene preg av å ha vært i vannet over lang tid. De fleste inneholdt ikke lenger lesbare dokumenter, men er omgjort til forvridde plastrester. Nedover i elva ligger små og store papirbiter omgjort til celluloseklumper. Men et par av permene har fortsatt lesbare sider, hvor kun det ytterste laget av papirark er ødelagt.

<p>SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra Landsrådet for norske barne- og ungdomsorganisasjoner (LNU).  Dommen er anket. Rettssaken avdekket så omfattende juks at det senere ble åpnet politietterforskning mot SOS Rasisme og dens ledelse. Etterforskningen førte til razzia mot organisasjonens lokaler i Haugesund og i Oslo.</p>
<p>Nedover bekken ser vi flere permer i ulike farger ligge strødd. De fleste er forvrengt av vannmasser. Innholdet i de fleste permene ser ut til å være vasket vekk. Lenger nedover er det bare hvite cellulosekuler igjen av det som en gang var innholdet i disse permene. </p>
<p>På åstedet bar de fleste plastpermene preg av å ha vært i vannet over lang tid. De fleste inneholdt ikke lenger lesbare dokumenter, men er omgjort til forvridde plastrester. Nedover i elva ligger små og store papirbiter omgjort til celluloseklumper. Men et par av permene har fortsatt lesbare sider, hvor kun det ytterste laget av papirark er ødelagt.</p>

4.3.1 - Body copy

Regular paragraphs are set in the base font size, but for article body copy we have chosen to adjust the font size slightly larger for medium-up screens.

SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra Landsrådet for norske barne- og ungdomsorganisasjoner (LNU). Dommen er anket. Rettssaken avdekket så omfattende juks at det senere ble åpnet politietterforskning mot SOS Rasisme og dens ledelse. Etterforskningen førte til razzia mot organisasjonens lokaler i Haugesund og i Oslo.

Nedover bekken ser vi flere permer i ulike farger ligge strødd. De fleste er forvrengt av vannmasser. Innholdet i de fleste permene ser ut til å være vasket vekk. Lenger nedover er det bare hvite cellulosekuler igjen av det som en gang var innholdet i disse permene.

På åstedet bar de fleste plastpermene preg av å ha vært i vannet over lang tid. De fleste inneholdt ikke lenger lesbare dokumenter, men er omgjort til forvridde plastrester. Nedover i elva ligger små og store papirbiter omgjort til celluloseklumper. Men et par av permene har fortsatt lesbare sider, hvor kun det ytterste laget av papirark er ødelagt.

<div class="body-copy">
  <p>SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra Landsrådet for norske barne- og ungdomsorganisasjoner (LNU).  Dommen er anket. Rettssaken avdekket så omfattende juks at det senere ble åpnet politietterforskning mot SOS Rasisme og dens ledelse. Etterforskningen førte til razzia mot organisasjonens lokaler i Haugesund og i Oslo.</p>
  <p>Nedover bekken ser vi flere permer i ulike farger ligge strødd. De fleste er forvrengt av vannmasser. Innholdet i de fleste permene ser ut til å være vasket vekk. Lenger nedover er det bare hvite cellulosekuler igjen av det som en gang var innholdet i disse permene. </p>
  <p>På åstedet bar de fleste plastpermene preg av å ha vært i vannet over lang tid. De fleste inneholdt ikke lenger lesbare dokumenter, men er omgjort til forvridde plastrester. Nedover i elva ligger små og store papirbiter omgjort til celluloseklumper. Men et par av permene har fortsatt lesbare sider, hvor kun det ytterste laget av papirark er ødelagt.</p>
</div>

4.3.2 - Body copy

Long-read paragrapgs has default font-size for mobile, and for medium-up screens, it has a slightly increased font-size..

SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra Landsrådet for norske barne- og ungdomsorganisasjoner (LNU). Dommen er anket. Rettssaken avdekket så omfattende juks at det senere ble åpnet politietterforskning mot SOS Rasisme og dens ledelse. Etterforskningen førte til razzia mot organisasjonens lokaler i Haugesund og i Oslo.

Nedover bekken ser vi flere permer i ulike farger ligge strødd. De fleste er forvrengt av vannmasser. Innholdet i de fleste permene ser ut til å være vasket vekk. Lenger nedover er det bare hvite cellulosekuler igjen av det som en gang var innholdet i disse permene.

På åstedet bar de fleste plastpermene preg av å ha vært i vannet over lang tid. De fleste inneholdt ikke lenger lesbare dokumenter, men er omgjort til forvridde plastrester. Nedover i elva ligger små og store papirbiter omgjort til celluloseklumper. Men et par av permene har fortsatt lesbare sider, hvor kun det ytterste laget av papirark er ødelagt.

<main class="long-read">
  <p>SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra Landsrådet for norske barne- og ungdomsorganisasjoner (LNU).  Dommen er anket. Rettssaken avdekket så omfattende juks at det senere ble åpnet politietterforskning mot SOS Rasisme og dens ledelse. Etterforskningen førte til razzia mot organisasjonens lokaler i Haugesund og i Oslo.</p>
  <p>Nedover bekken ser vi flere permer i ulike farger ligge strødd. De fleste er forvrengt av vannmasser. Innholdet i de fleste permene ser ut til å være vasket vekk. Lenger nedover er det bare hvite cellulosekuler igjen av det som en gang var innholdet i disse permene. </p>
  <p>På åstedet bar de fleste plastpermene preg av å ha vært i vannet over lang tid. De fleste inneholdt ikke lenger lesbare dokumenter, men er omgjort til forvridde plastrester. Nedover i elva ligger små og store papirbiter omgjort til celluloseklumper. Men et par av permene har fortsatt lesbare sider, hvor kun det ytterste laget av papirark er ødelagt.</p>
</main>

4.4 - Links

:hover

:hover

:focus

:focus

:visited

:visited

<a href="#" class="{$modifiers}">Lorem ipsum dolor sit amet</a>

4.4.1 - External links

Experimental

Within the .body-copy there are additional styles for links. External links to other pages has a icon has a icon indicator.

<div class="body-copy">
  <a href="http://example.com">Link to external page</a>
</div>

4.4.2 - File links

Experimental

Links to files has icons indicating this.

<div class="body-copy">
  <a href="http://example.com/file.pdf">Link to document</a><br />
  <a href="http://example.com/file.zip">Link to downloadable file</a>
</div>

4.4.4 - Headline links

<h1><a href="#">Ny gransking av SOS Rasisme</a></h1>

4.5 - Lists

4.5.1 - Unordered lists

  • Dagbladet har avslørt høye medlemstall og fiktive identiteter i medlemsregisteret.
  • SOS Rasisme har investert i flere eiendommer med penger bevilget til antirasistisk arbeid.
  • SOS Rasisme kreves nå for over 17 millioner kroner totalt fra ulike støttegivere.
<ul>
  <li>Dagbladet har avslørt høye medlemstall og fiktive identiteter i medlemsregisteret.</li>
  <li>SOS Rasisme har investert i flere eiendommer med penger bevilget til antirasistisk arbeid.</li>
  <li>SOS Rasisme kreves nå for over 17 millioner kroner totalt fra ulike støttegivere.</li>
</ul>

4.5.2 - Ordered lists

  1. Dagbladet har avslørt høye medlemstall og fiktive identiteter i medlemsregisteret.
  2. SOS Rasisme har investert i flere eiendommer med penger bevilget til antirasistisk arbeid.
  3. SOS Rasisme kreves nå for over 17 millioner kroner totalt fra ulike støttegivere.
<ol>
  <li>Dagbladet har avslørt høye medlemstall og fiktive identiteter i medlemsregisteret.</li>
  <li>SOS Rasisme har investert i flere eiendommer med penger bevilget til antirasistisk arbeid.</li>
  <li>SOS Rasisme kreves nå for over 17 millioner kroner totalt fra ulike støttegivere.</li>
</ol>

4.5.3 - Definition lists

SOS Rasismes
En norsk politisk organisasjon som oppga som sitt formål som å bekjempe rasisme.
Tjen Folket
En norsk kommunistisk gruppe etablert i 1998.
Landsrådet for Norges barne- og ungdomsorganisasjoner
En paraplyorganisasjon for 97 landsomfattende barne- og ungdomsorganisasjoner i Norge.
<dl>
  <dt>SOS Rasismes</dt>
  <dd>En norsk politisk organisasjon som oppga som sitt formål som å bekjempe rasisme.</dd>
  <dt>Tjen Folket</dt>
  <dd>En norsk kommunistisk gruppe etablert i 1998.</dd>
  <dt>Landsrådet for Norges barne- og ungdomsorganisasjoner</dt>
  <dd>En paraplyorganisasjon for 97 landsomfattende barne- og ungdomsorganisasjoner i Norge. </dd>
</dl>

4.6 - Quotes

«De fleste taper alle pengene. Her er verdiene pantsatt til fordel for LNU» Bostyrer til Dagbladet
<blockquote>
  «De fleste taper alle pengene. Her er verdiene pantsatt til fordel for LNU»
  <cite>Bostyrer til Dagbladet</cite>
</blockquote>

4.7 - Inserts and delets

Lorem ipsum dolor sit amet lolz, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>Lorem ipsum dolor sit amet <del>lolz</del>, consectetur <ins>adipisicing</ins> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

4.8 - Strong and Emphasis

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>Lorem ipsum dolor <strong>sit amet</strong>, consectetur <em>adipisicing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

4.9 - Bold and italic

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p>Lorem ipsum dolor <b>sit amet</b>, consectetur <i>adipisicing</i> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

4.10 - Definition

Fordi LNU vant et søksmål og tok utleggspant i SOS Rasismes verdier for å sikre kravet, kan de de regne med å få mellom seks og sju millioner kroner.
Fordi LNU vant et søksmål og tok <dfn title="Utleggspant – panterett som blir stiftet ved beslutning av en offentlig myndighet.">utleggspant</dfn> i SOS Rasismes verdier for å sikre kravet, kan de de regne med å få mellom seks og sju millioner kroner.

4.11 - Abbrevation

SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra LNU.
SOS Rasisme er dømt for medlemsjuks i et privatsrettslig søksmål fra <abbr title="Landsrådet for norske barne- og ungdomsorganisasjoner">LNU</abbr>.

4.12 - Cite

I rapporten Trondheim kommunes tilskudd til SOS Rasisme er det krystallklare opplysninger om omfattende juks og svindel av offentlige.
I rapporten <cite>Trondheim kommunes tilskudd til SOS Rasisme</cite> er det krystallklare opplysninger om omfattende juks og svindel av offentlige.

4.13 - Caption

Fant kontanter: Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig.
<div class="caption"><strong>Fant kontanter:</strong> Politiets datarådgiver Jan Christian Stødle og politioverbetjent Ellen Rinck bærer her ut esker med ulike typer beslag fra Kjell Gunnar Larsens bolig. <span itemprop="author" class="credit">Foto: Jacques Hvistendahl / Dagbladet</span></div>

4.14 - Superscript and subscripts

Av naturlige årsaker[1] er det ikke mulig for Dagbladet[2] å få en kommentar fra Larsen. Han har tidligere avvist alle statens krav og beskyldninger om misligheter i SOS Rasisme, både i rettsapparatet og overfor Dagbladet.
Av naturlige årsaker<sup>[1]</sup> er det ikke mulig for Dagbladet<sub>[2]</sub> å få en kommentar fra Larsen. Han har tidligere avvist alle statens krav og beskyldninger om misligheter i SOS Rasisme, både i rettsapparatet og overfor Dagbladet.

4.15 - Byline

<div class="byline">
  <span class="person" itemscope itemtype="http://schema.org/Person" itemprop="author">
    <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
  </span>
  <span class="person" itemscope itemtype="http://schema.org/Person" itemprop="author">
    <a rel="author" itemprop="url name" href="#">Audun Aas</a>
  </span>
  <span class="person" itemscope itemtype="http://schema.org/Person" itemprop="author">
    <a rel="author" itemprop="url name" href="#">Guro Flåten</a>
  </span>
</div>
<div class="byline">
  <span class="person" itemscope itemtype="http://schema.org/Person" itemprop="author">
    <img src="http://placehold.it/150x150">
    <a rel="author" itemprop="url name" href="#">Tom-Marius Olsen</a>
  </span>
</div>

4.16 - Time / Published

<time class="published" itemprop="datePublished" datetime="2014-04-23" title="Publisert 23. april 2014">Publisert 23. april 2014</time>

4.16.1 - From now

Requires javascript

Make date/time relative to now. Click to toggle it's state. For full documentation see sh.libs.fromNow.

<time class="published" data-from-now itemprop="datePublished" datetime="2014-04-23T18:30:00" title="Publisert 23. april 2014">Publisert 23. april 2014</time>

4.17 - Code

new Date();
<code>new Date();</code>

4.18 - Preformatted text

.button-experimental{
  background: rgb(214, 0, 0);
}
<pre>
.button-experimental{
  background: rgb(214, 0, 0);
}
</pre>

4.18.1 - Syntax highlight

Requires javascript

Uses prettyprint

.button-experimental{
  background: rgb(214, 0, 0);
}
<pre class="prettyprint lang-css">
.button-experimental{
  background: rgb(214, 0, 0);
}
</pre>