Design Guide

Classes

There are some core classes that defines the layout and design. They are global and not bound to any specific module.

Grid

Use our simple grid to build powerful layouts. You can test various combinations here.

<div class="row">
  <div class="col-1-2"></div>
  <div class="col-1-2"></div>
</div>

<div class="row">
  <div class="col-1-3"></div>
  <div class="col-1-3"></div>
  <div class="col-1-3"></div>
</div>

<div class="row">
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
  <div class="col-1-4"></div>
</div>

<div class="row">
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
  <div class="col-1-5"></div>
</div>

You can also have unequal columns.

<div class="row">
  <div class="col-2-3"></div>
  <div class="col-1-3"></div>
</div>

Below are some options you can add to your grid.

Typography

Listed below are all default styles for headings.

Paragraph

With an increased font-size and line-height, the paragraph style is great for readability.

<p class="paragraph"></p>

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lists

Below is the default style for unordered and ordered lists.

• List item one
• List item two
• List item three

1. List item one
2. List item two
3. List item three

You can also add class "list-inline" to make horizontal lists.

• List item one
• List item two
• List item three

Buttons

Buttons are divided into types: primary, secondary and other states such as disabled.

<a href="#" class="button button-style-primary" role="button">Primary</a>
<a href="#" class="button button-style-secondary" role="button">Secondary</a>
<a href="#" class="button button-style-disabled" role="button">Disabled</a>

• Primary
• Secondary
• Tertiary
• Disabled

To change the size, you can add class "button-size-lg" for a large button. There are four pre-defined sizes: large, default, medium and small.

• Large
• Default
• Medium
• Small

Buttons on a dark background:

Buttons inside a card layout:

Forms

Input fields are divided into types and states. Below code will create two columns with a label to the left and an input to the right.

<form class="form">

  <!-- Input -->

  <div class="form-group">
    <label for="name">Your Name:</label>
    <input id="name" type="text" name="name">
  </div>

  <!-- Select input -->

  <div class="form-group">
    <label for="country">Country:</label>
    <div class="select-wrapper">
      <select id="country" name="country">
        <option selected="" disabled="" value="">Choose country…</option>
        <option value="AT">Austria</option>
        <option value="BE">Belgium</option>
      </select>
    </div>
  </div>

  <!-- Textarea -->

  <div class="form-group">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    <span class="form-help">500 characters max.</span>
  </div>

  <!-- Switch -->

  <div class="form-group">
    <label>Switch:</label>
    <input id="s1" class="switch" type="checkbox" value="true" checked>
    <label for="s1" class="switch"></label>
  </div>

  <!-- Checkboxes -->

  <div class="form-group">
    <label>Checkboxes:</label>
    <input id="c1" type="checkbox" name="item-one" value="item-one" checked>
    <label for="c1" class="checkbox">Item one</label>
    <input id="c2" type="checkbox" name="item-two" value="item-two">
    <label for="c2" class="checkbox">Item two</label>
    <input id="c3" type="checkbox" name="item-three" value="item-three">
    <label for="c3" class="checkbox">Item three</label>
  </div>

  <!-- Radio Buttons -->

  <div class="form-group">
    <label>Radio Buttons:</label>
    <input id="r1" type="radio" name="item" value="item-one" checked>
    <label for="r1" class="radio">Item one</label>
    <input id="r2" type="radio" name="item" value="item-two">
    <label for="r2" class="radio">Item two</label>
    <input id="r3" type="radio" name="item" value="item-three">
    <label for="r3" class="radio">Item three</label>
  </div>

</form>

Alerts

Use alerts to give users quick feedback on performed tasks.

<div class="alert alert-default" role="alert">Not important, just to let you know.</div>
<div class="alert alert-negative" role="alert">Oh no! Something went wrong :(</div>
<div class="alert alert-positive" role="alert">Great! This is awesome.</div>
<div class="alert alert-warning" role="alert">Hmm.. something is not right.</div>

Tables

Built with headers and rows, a table is useful to display many items or content with measurable data.

<table>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Cards

A card is a great content container.

<div class="bg-color-white border card card-content">
  <h4>Card Title</h4>
  <p class="paragraph">Nemo enim ipsam voluptatem quia voluptas sit.</p>
</div>

Appearance

If you want to turn a module dark, add class .dark to the section.

<section class="dark"></section>