Base

Global styles, such as typography, colors, grid, etc.

Colors

Brandaris uses Typesettings for modular scale, vertical rhythm, and responsive ratio based headlines. By default it has a 6px baseline. Furthermore, the following utilities can be used to add additional styles to texts.

Background

Spice it up: add some color!


Primary background


Secondary background


Tertiary background



Quaternary background


Gray-light background


Gray background



Gray-dark background


White background


Black background


<div class="row">
  <div class="col-xs">
    <div class="bg-primary">...</div>
  </div>
  <div class="col-xs">
    <div class="bg-secondary">...</div>
  </div>
  <div class="col-xs">
    <div class="bg-tertiary">...</div>
  </div>
</div>

<div class="row">
  <div class="col-xs">
    <div class="bg-gray-light">...</div>
  </div>
  <div class="col-xs">
    <div class="bg-gray">...</div>
  </div>
  <div class="col-xs">
    <div class="bg-gray-dark">...</div>
  </div>
</div>

<div class="row">
  <div class="col-xs">
    <div class="bg-white">...</div>
  </div>
  <div class="col-xs">
    <div class="bg-black">...</div>
  </div>
</div>

Text colors

Change the text color.

You can easily change the text color.

You can easily change the text color.

You can easily change the text color.

You can easily change the text color.

You can easily change the text color.

You can easily change the text color.

You can easily change the text color.

You can easily change the text color.

You can easily change the text color.

<p class="clr-primary">You can easily change the text color.</p>
<p class="clr-secondary">You can easily change the text color.</p>
<p class="clr-tertiary">You can easily change the text color.</p>
<p class="clr-primary">You can easily change the <a href="#" class="clr-white">text</a> color.</p>
<p class="clr-tertiary">You can easily change the <span class="clr-black">text</span> color.</p>
<p class="clr-quaternary">You can easily change the <span class="clr-black">text</span> color.</p>
<p class="clr-gray-light">You can easily change the text color.</p>
<p class="clr-gray">You can easily change the text color.</p>
<p class="clr-gray-dark">You can easily change the text color.</p>
On this page