Images

Inside Grid

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

Buttons

Text Buttons

Classic

tb tb info tb ok tb warn tb err tb fatal

Sizes

tb sm tb sm tb tb big tb huge tb huge

Classic

btn btn info btn ok btn warn btn err btn fatal 
<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 btn std fatal

Big

btn std btn std info btn std ok btn std warn

Huge

btn std btn std info btn std ok

Messages

Basic 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.
☒ Fatal This is done by adding fatal to the class.

Strong Alerts


Alert Message This is a normal message with msg.
☞ Alert Info This is done by adding info to the class.
☑ Alert OK This is done by adding ok to the class.
☣ Alert Warning This is done by adding warn to the class.
☒ Alert Error This is done by adding err to the class.
☒ Alert Fatal This is done by adding fatal 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 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

By default there is some space before and after any heading:

h1

h2

h3

h4

h5
h6

You can remove the space by using the class tight to the heading:

h1 tight

h2 tight

h3 tight

h4 tight

h5 tight
h6 tight

<h1>Level One Heading</h1>