Buttons
Text Buttons
Classic
tb
tb info
tb ok
tb warn
tb err
tb fatal
Sizes
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
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>
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 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="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>