Styleguide

Styleguide short description. It's buildt with Elements, Layout  and Components

Element

Typography

Headers <h1>  to <h6>have a visual hierachy from large to small. There is also helper classes to get the style of the individual headings .h1  to .h6.

Headers is scaled down on smaller screens.

Header level 1

Header level 2

Header level 3

Header level 4

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

Paragraph

Regular paragrap elements <p>have a font size of 15px and a line height of 24px.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
  id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
  erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
  id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
  erat volutpat.</p>

Lists

Ordered and unordered list

  1. List item 1
  2. List item 2
  3. List item 3
  4. List item 4
  • List item 1
  • List item 2
  • List item 3
  • List item 4
<div class="grid-two">
  <div class="grid-item">
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ol>
  </div>
  <div class="grid-item">
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ul>
  </div>
</div>

Emphasize

Standard emphasized text <em>

This text have some emphasized words  that stands out

<p>This text have
  <em>some emphasized words &nbsp;</em>that stands out</p>

Emphasized label

Add .labelon a <em>to make it look like a label. Will need to be at the beginning of a sentence.

Newkommuneforlaget Tuner

<p>
  <em class="label">New</em>kommuneforlaget Tuner</p>

Ingress

Use .ingressto the first paragraph on a article to get larger text then regular body copy.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

<p class="ingress">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>

Blockquote

<blockquote>with a <p>inside adds quotes arround the text, and adds style that give it contrast form regular body copy.

Investigationes demonstraverunt lectores legere

<blockquote>
  <p>Investigationes demonstraverunt lectores legere</p>
</blockquote>

Buttons

Button

.btnon a anchor tag creates a button style for the link.

Other then the default .btn-green, .btn-outlineand .btn-outline-lightare available.

Primary button Green/Secondary button Outline button
Outline button light 
<a href="href" class="btn">Primary button</a>
<a href="href" class="btn-green">Green/Secondary button</a>
<a href="href" class="btn-outline">Outline button</a>
<div style="padding: 10px; margin-top: 10px" class="bg-dark">
  <a href="href" class="btn-outline-light">Outline button light</a>
</div>

Button size

Add .smallor .largetogether with button style to adjust size on the button.

.largeversion only applies on larger screens.

Larger button Smaller button 
<a href="href" class="btn large">Larger button</a>
<a href="href" class="btn small">Smaller button</a>

Button with icon

Add .arrowtogether with button style to add a icon.

Larger button 
<a href="href" class="btn arrow">Larger button</a>

Button tabs

Use .btn-tabswrapped arround a.btn-activeand a.btn-inactiveto make a tabs row with same styles as green/secondary and outline buttons.

Kommuneforlaget Middle button Kommuneforlaget 
<div class="btn-tabs">
  <a href="href" class="btn-active">Kommuneforlaget</a>
  <a href="href" class="btn-inactive">Middle button</a>
  <a href="href" class="btn-inactive">Kommuneforlaget</a>
</div>

Tables

Table

Standard table style

Header 1 Header 2 Header 3
Table content Table content Table content
Table content Table content Table content
Table content Table content Table content 
<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table content</td>
      <td>Table content</td>
      <td>Table content</td>
    </tr>
    <tr>
      <td>Table content</td>
      <td>Table content</td>
      <td>Table content</td>
    </tr>
    <tr>
      <td>Table content</td>
      <td>Table content</td>
      <td>Table content</td>
    </tr>
  </tbody>
</table>

Responsive table

To make a table responsive, wrap the table in a parent <div>with the class .table.

You will also need to add the classes .tablesawand .tablesaw-stach, plus data-tablesaw-mode="stack"attribute to the <table>element.

TableSaw is a project by Filament group

Header 1 Header 2 Header 3
Table content Table content Table content
Table content Table content Table content
Table content Table content Table content 
<div class="table">
  <table data-tablesaw-mode="stack" class="tablesaw tablesaw-stack">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Table content</td>
        <td>Table content</td>
        <td>Table content</td>
      </tr>
      <tr>
        <td>Table content</td>
        <td>Table content</td>
        <td>Table content</td>
      </tr>
      <tr>
        <td>Table content</td>
        <td>Table content</td>
        <td>Table content</td>
      </tr>
    </tbody>
  </table>
</div>

Forms

Label

Base <label>style

<label>Full name</label>

Input

Base <input>style. Input defaults to text, but there are many different options available. All should have more or less the same style as base <input type="text">.

<input type="text" />

Label and input

Combining label and input. There should be a connection between <label>and <input>using for=""on <label>and id=""on <input>.

<label for="name">Full name</label>
<input id="name" type="text" placeholder="Write your full name, eg. Jane Doe" />

Hubspot form example

Most forms and markup will be provided by hubspot. This is an example embedded from hubspot.

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    css: '',
    portalId: '209523',
    formId: '8b6494b9-073a-4963-a7ac-742361a2a7c4'
  });
</script>

Helpers

Background color

Background colors can be set on elements. Often for use on containers like .section-rowor .grid-item. Available colors are .bg-gray-dark, .bg-gray-light, .bg-blue.

When using dark backgrounds, the text color is set to white.

Dark gray background
Light gray background
Blue background
<div class="gallery-four">
  <div class="grid-item bg-gray-dark">Dark gray background</div>
  <div class="grid-item bg-gray-light">Light gray background</div>
  <div class="grid-item bg-blue">Blue background</div>
</div>

Background image

Similar to background color background images can be added to containers.

.bg-imgdo not add any image itself, but it center align and scales the image to fit it's container.

.bg-img-darkis also avialable, and will set white color text and dark background in case the image do not load.

Section title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<div style="background-image: url(../img/skyscraper-and-sky.png)" class="section-row bg-img-dark">
  <div class="container">
    <h1 class="section-title">Section title</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
      neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
      Aliquam erat volutpat.</p>
  </div>
</div>

Visuallyhidden

.visuallyhiddencan be set on any element to make it invisible, but still have it available to screen readers. Example usage is when you got a section title, but you don't want it visible.

Section title

<h1 class="visuallyhidden">Section title</h1>

Text align center

.text-align-centerwill center algin text.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<p class="text-align-center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque,
  id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
  erat volutpat.</p>

Layout

Grids

Grids are containers that other content element's can be placed inside. Grids have a fixed numbers of .grid-itemsthat it's ment to work with, and on large screens all .grid-itemsis on one row.

Two column grid

Use .grid-twoas parent element, and then .grid-itemas child elements.

<div class="grid-two sg-visualize-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Three column grid

Use .grid-threeas parent element, and then .grid-itemas child elements.

<div class="grid-three sg-visualize-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Vertical stroke, three column grid

By adding .grid-vertical-stroketo a .grid-threegrid, vertical strokes are added between the columns on large screens.

<div class="grid-three grid-vertical-stroke sg-visualize-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Four column grid

Use .grid-fouras parent element, and then .grid-itemas child elements.

<div class="grid-four sg-visualize-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Gallery is similar to grid's, but they are not limited to contain a certain ammount of .grid-items. You can add as many as you like, and they will create new rows following the same layout.

Use .gallery-threeas parent element, and then .grid-itemas child elements. Unlimited numbers of .grid-itemcan be added.

<div class="gallery-three sg-visualize-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Use .gallery-fouras parent element, and then .grid-itemas child elements. Unlimited numbers of .grid-itemcan be added.

<div class="gallery-four sg-visualize-grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Component

Container components

Containers are made to be parents of content components.

Container

.containeris a large box wrapper that on small screens have a left and right margin. On larger screens it have a max with of 1080px, and it is center aligned on the page.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
    neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
    Aliquam erat volutpat.</p>
</div>

Section row

.section-rowcan either be a class on a <section>element or a <div>. It got top and bottom padding, and makes space to the content inside it.

A .containeris often added inside it.

.section-titleis also commonly used inside, and it can be set on any header element <h1>- <h6>.

Section title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<section class="section-row">
  <div class="container">
    <h1 class="section-title">Section title</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
      neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
      Aliquam erat volutpat.</p>
  </div>
</section>

Content components

.relatedis used in the sidebar on articles. It contains a header element with the class .titleand a <a>with the classed .btn-outlineand .smallto represent a button.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

Read more

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.

Read more 
<article class="related">
  <h1 class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
    neque.</h1>
  <a href="href" class="btn-outline small">Read more</a>
</article>
<article class="related">
  <h1 class="title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
    neque.</h1>
  <a href="href" class="btn-outline small">Read more</a>
</article>

Fact

.factwrapped arround span.icon-[name]and <p><span class"number">12</span>Different nationalities</p>creates one fact element.

A fact should be placed in a small container, eg. a four column grid.

Administrereundersøkelse

Svarepå undersøkelse

Chatmed oss

<div class="section-row">
  <div class="container">
    <div class="gallery-three">
      <div class="grid-item">
        <div class="fact">
          <span class="icon-admin"></span>
          <p>
            <strong>Administrere</strong>undersøkelse</p>
        </div>
      </div>
      <div class="grid-item">
        <div class="fact">
          <span class="icon-checked"></span>
          <p>
            <strong>Svare</strong>på undersøkelse</p>
        </div>
      </div>
      <div class="grid-item">
        <div class="fact">
          <span class="icon-phone"></span>
          <p>
            <strong>Chat</strong>med oss</p>
        </div>
      </div>
    </div>
  </div>
</div>

Teaser article

a.article-teaserwrapped arround img, .title, .descincluding <p>and .btn-wrapperincluding span.btn.small.

Blue is default color, but it can optionally change to red by including .ta-redtogether with .article-teaser.

To make sure all items have equal height, .equal-heightneed to be included as parent or higher up the tree of .grid-item.

Clouds

Internet Advertising Trends You Won’t Be Disappointed

Pain may sometimes be the reason why people change.
Coast

Internet Advertising Trends

Pain may sometimes be the reason why people change.
Clouds

You Won’t Be Disappointed

Pain may sometimes be the reason why people change.
Coast

Advertising Trends You Won’t Be

Pain may sometimes be the reason why people change.

 
<div class="section-row bg-lightgray">
  <div class="gallery-four">
    <div class="grid-item">
      <a class="teaser-article">
        <img src="../img/clouds.png" alt="Clouds" />
        <h1 class="title">Internet Advertising Trends You Won’t Be Disappointed</h1>
        <div class="desc">
          <p>Pain may sometimes be the reason why people change.</p>
        </div>
      </a>
    </div>
    <div class="grid-item">
      <a class="teaser-article">
        <img src="../img/coast.png" alt="Coast" />
        <h1 class="title">Internet Advertising Trends</h1>
        <div class="desc">
          <p>Pain may sometimes be the reason why people change.</p>
        </div>
      </a>
    </div>
    <div class="grid-item">
      <a class="teaser-article">
        <img src="../img/clouds.png" alt="Clouds" />
        <h1 class="title">You Won’t Be Disappointed</h1>
        <div class="desc">
          <p>Pain may sometimes be the reason why people change.</p>
        </div>
      </a>
    </div>
    <div class="grid-item">
      <a class="teaser-article">
        <img src="../img/coast.png" alt="Coast" />
        <h1 class="title">Advertising Trends You Won’t Be</h1>
        <div class="desc">
          <p>Pain may sometimes be the reason why people change.</p>
        </div>
      </a>
    </div>
  </div>
</div>

Hero banner

.hero-banneris available for banner on top of pages. Container height can be adjusted by setting the following classes:

  • .tall
  • .short
  • .normal(default, same as ommiting the height class).

Using .no-overlayclass disables the dark overlay.

Content inside should be wrapped in a .containerand .content.

Elements used inside are h1.title, p.ingressand regular <p>.

Solutions

Lorem ipsum dolor sit amet, consectetur adipiscieng elit

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

<div style="background-image: url(../img/banner-img-sky.jpg)" class="hero-banner">
  <div class="container">
    <article class="content">
      <h1 class="title">Solutions</h1>
      <p class="ingress">Lorem ipsum dolor sit amet, consectetur adipiscieng elit</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus
        neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.
        Aliquam erat volutpat.</p>
    </article>
  </div>
</div>

Template

Global page footer style

<footer class="page-footer">
  <div class="top">
    <div class="container">
      <div class="col">
        <h1 class="title">Contact us</h1>
        <p>10-FAKTOR
          <Kommuneforlaget>AS, Haakon VIIs gt. 9, 0161 Oslo</p>
        </Kommuneforlaget>
        </p>
        <p>Tlf. 24 13 28 50</p>
        <p>E-post: bedrekommune@kommuneforlaget.no</p>
      </div>
      <div class="col">
        <h1 class="title">Column One</h1>
        <ul>
          <li>
            <a href="">Menu item One</a>
          </li>
          <li>
            <a href="">Menu item Two</a>
          </li>
          <li>
            <a href="">Menu item Three</a>
          </li>
          <li>
            <a href="">Menu item Four</a>
          </li>
        </ul>
      </div>
      <div class="col">
        <h1 class="title">Column Two</h1>
        <ul>
          <li>
            <a href="">Menu item One</a>
          </li>
          <li>
            <a href="">Menu item Two</a>
          </li>
          <li>
            <a href="">Menu item Three</a>
          </li>
          <li>
            <a href="">Menu item Four</a>
          </li>
        </ul>
      </div>
      <div class="col">
        <h1 class="title">Column Three</h1>
        <ul>
          <li>
            <a href="">Menu item One</a>
          </li>
          <li>
            <a href="">Menu item Two</a>
          </li>
          <li>
            <a href="">Menu item Three</a>
          </li>
          <li>
            <a href="">Menu item Four</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="container">
      <ul>
        <li>
          <a href="">Community</a>
        </li>
        <li>
          <a href="">Press</a>
        </li>
        <li>
          <a href="">Guidelines</a>
        </li>
        <li>
          <em>Copyright 10-Faktor</em>
        </li>
      </ul>
    </div>
  </div>
</footer>