Images

Inside Grid

Inside a block. brutalisme
Direct in column: brutalisme
Inside a card. brutalisme

Buttons

Text Buttons

Classic

tb tb info tb ok tb warn tb err

Sizes

tb sm tb tb big tb huge

Classic

btn btn info btn ok btn warn btn err 
<a class="btn btn-b">btn-b</a>

Sizes

btn sm btn info btn big warn btn huge err 
<a class="btn sm info">btn sm info</a>

Standardized Width btn std

btn std btn std info btn std ok btn std warn btn std err

Big

btn std btn std info btn std ok btn std warn

Huge

btn std btn std info btn std ok 
<a class="btn btn-b btn-sm">btn-sm</a>
<a class="btn sm info">btn sm info</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 SoldRevenue (£)Profit (£)
15102
210204
35001000200


<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

c12
c11
c1
c10
c2
c9
c3
c8
c4
c7
c5
c6
c6
c5
c7
c4
c8
c3
c9
c2
c10
c1
c11
c12

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

Headings

h1

h2

h3

h4

h5
h6

<h1>Level One Heading</h1>