Images

Inside Grid

Inside a block. brutalisme

Direct in column: brutalisme

Inside a card. brutalisme

Buttons

Text Buttons

tb tb tb-a tb tb-b tb tb-c

Classic

btn-a btn-b btn-c classless

<a class="btn btn-b">btn-b</a>

Small `btn-sm`

btn-sm btn-a btn-sm btn-b btn-sm btn-c btn-sm classless

<a class="btn btn-b btn-sm">btn-sm</a>

Standardized Width `btn-std`

btn-std btn-a With a bit too much text btn-std btn-b btn-std btn-c btn-sm classless

<a class="btn btn-b btn-sm">btn-sm</a>

Messages

Normal Message This is a normal message with msg.

☞ Info This is done by adding info to the class.

☑ OK This is done by adding ok to the class.

☣ Warning This is done by adding warn to the class.

☒ Error This is done by adding err to the class.

Attention This is done by adding attention to the class.

☣ Fatal This is done by adding fatal to the class.

Black This is done by adding black to the class.

<div class="msg">
  <strong>Alert headline!</strong>
  Message text
</div>

Forms

<input type="text">
					
<textarea rows="3">
					
<span class="addon">$</span><input type="text">

Be careful with addons! If you do not want a space between the addon and the input make sure that there is no space between the </span> and <input> tags. Example:

... </span> <input ...

... </span><input ...

Navbars

<nav class="nav" tabindex="-1" onclick="this.focus()">
    <div class="container">
        <a class="pagename current" href="#">BRUT</a>
        <a href="#">One</a>
        <a href="#">Two</a> 
        <a href="#">Three</a>
    </div>
</nav>
<button class="btn-close btn btn-sm">×</button>

Tables

#	Widgets Sold	Revenue (£)	Profit (£)
1	5	10	2
2	10	20	4
3	500	1000	200

<table class="table">
					<thead>
					<tr>
					<th>#</th>
					<th>Widgets Sold</th>
					</tr>
					</thead>
					<tbody>
					<tr>
					<td>1</td>
					<td>5</td>
					</tr>
					<tr>
					<td>2</td>
					<td>10</td>
					</tr>
					<tr>
					<td>3</td>
					<td>500</td>
					</tr>
					</tbody>
					</table>

Icons

Android Safe

The "Android Safe" icons work everywhere, tested on hundreds of devices.

Total Set

✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩

Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)

<i class="ico">Copy and paste icons from above here!</i>

Grids

<div class="row">
    <div class="col c12">12</div>
</div>
					
<div class="row">
    <div class="col c4">4</div>
    <div class="col c8">8</div>
</div>

Headings

h1

h2

h3

h4

h5

h6

<h1>Level One Heading</h1>