The built-in helper classes are great. Alignment, labels, highlights and more. Just add the class and away you go.

Default

Pink

Green

Blue

Red

Magenta

Orange

Yellow

// example usage <span class="label">Default</span> <span class="label pink">Pink</span> <span class="label green">Green</span> <span class="label blue">Blue</span> <span class="label red">Red</span> <span class="label magenta">Magenta</span> <span class="label orange">Orange</span> <span class="label yellow">Yellow</span>

1

2

3

4

5

6

7

8

// example usage <span class="notification">1</span> <span class="notification pink">2</span> <span class="notification green">3</span> <span class="notification blue">4</span> <span class="notification red">5</span> <span class="notification magenta">6</span> <span class="notification orange">7</span> <span class="notification yellow">8</span>

Hello, welcome, isn't this nice?

This is just a nice little message for your visitors.

You did it, awesome, nice work.

This is a friendly warning, don't do that again.

Ohh, you did it again, you broke the internet!

// example usage <div class="alert">Hello, welcome, isnt this nice?</div> <div class="alert alert-info">This is just a nice little message for your visitors.</div> <div class="alert alert-success">You did it, awesome, nice work.</div> <div class="alert alert-warning">This is a friendly warning, dont do that again.</div> <div class="alert alert-error">Ohh, you did it again, you broke the internet!</div>