Basic

<div class="-row"><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div></div><div class="-row"><div class="-col2">2</div><div class="-col4">4</div><div class="-col3">3</div><div class="-col3">3</div></div><div class="-row"><div class="-col4">4</div><div class="-col5">5</div><div class="-col3">3</div></div><div class="-row"><div class="-col12">12</div></div>

<div class="-row"><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div></div><div class="-row"><div class="-col4">4</div><div class="-col3 -col-offset2">3 offset 2</div><div class="-col3">3</div></div><div class="-row"><div class="-col3 -col-offset1">3 offset 1</div><div class="-col3 -col-offset2">3 offset 2</div><div class="-col1">1</div><div class="-col2">2</div></div><div class="-row"><div class="-col6 -col-offset3">6 offset 3</div><div class="-col2">2</div><div class="-col1">1</div></div>

<div class="-row"><div class="-col12">12<div class="-row-fluid"><div class="-col5">5</div><div class="-col4">4</div><div class="-col3">3</div></div></div></div>

Responsive grid

Fluid grid

<div class="-row-fluid"><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div><div class="-col1">1</div></div><div class="-row-fluid"><div class="-col4">4</div><div class="-col4">4</div><div class="-col4">4</div></div><div class="-row-fluid"><div class="-col4">4</div><div class="-col8">8</div></div><div class="-row-fluid"><div class="-col6">6</div><div class="-col6">6</div></div><div class="-row-fluid"><div class="-col12">12</div></div>

<div class="-row-fluid"><div class="-col12">12<div class="-row-fluid"><div class="-col6">6<div class="-row-fluid"><div class="-col6">6</div><div class="-col6">6</div></div></div><div class="-col6">6</div></div></div></div>

Headers

All headers from h1 to h6 are available.

<h1>h1. Header 1<h1>
<h2>h2. Header 2<h2>
<h3>h3. Header 3<h3>
<h4>h4. Header 4<h4>
<h5>h5. Header 5<h5>
<h6>h6. Header 6<h6>	

Text elements

You can use tags i or b, but they often use for icons or other stuff, so it is better to avoid them.

<strong>Strong</strong>
<em>Italic</em>
<small>Small text</small>
This is <abbr title="Abbr">Abbr</abbr>
<p>Paragraph text</p>

Code

Use it if you have any code you want to show to user. You can also use tag code inside tag pre.

<code>git clone</code>

Address

If you want to separate parts of an address, use several address tags. Also use strong to show important parts of address. Do not forget to use abbr.

<address><strong>Vetrenko Maxim</strong><div>Gagaryinskiy 27<br/>Moscow<br/><abbr title="Cell phone">p:</abbr><span>+7 960 628 6999</span></div></address><address><strong>Email</strong><div><a>me@maxmert.com</a></div></address>

Blockquotes

Quoted blocks used when you have some text cited from another source. In small tags write an author or the source.

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><small class="meta">Someone famous in Source Title</small></blockquote>

Marked lists

<ul><li>List element</li><li>List element<ul><li>List element</li><li>List element<ul><li>List element</li><li>List element</li><li>List element</li></ul></li><li>List element</li></ul></li><li>List element</li></ul>

Numbered lists

<ol><li>Element</li><li>Element</li><li>Element<ol><li>Element</li><li>Element</li></ol></li><li>Element</li></ol>

Descriptions

List of terms and descriptions

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta lesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta lesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd></dl>

Inline descriptions

Inline list of terms and descriptions

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta lesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl class="_horizontal_"><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd><dd>Donec id elit non mi porta gravida at eget metus.</dd><dt>Malesuada porta lesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd></dl>

Striped and hovered

<table class="-table _striped_ _hovered_"><thead><tr><th>#</th><th>First name</th><th>Last name</th><th>User name</th></tr></thead><tbody><tr><td>1</td><td>Maxim</td><td>Vetrenko</td><td>maxmert</td></tr><tr>...</tr></tbody></table>

Vertical hovered

<table class="-table _vertical_ _hovered_"><thead><tr><th>#</th><th>First name</th><th>Last name</th><th>User name</th></tr></thead><tbody><tr><td>1</td><td>Maxim</td><td>Vetrenko</td><td>maxmert</td></tr><tr>...</tr></tbody></table>

With modifiers

Set statuses and modifiers to td, tr. Or to table if you want to apply modifier to all table.

<table class="-table _vertical_"><thead><tr><th>#</th><th>First name</th><th>Last name</th><th>User name</th></tr></thead><tbody><tr><td>1</td><td>Maxim</td><td>Vetrenko</td><td>maxmert</td></tr><tr class="-error-"><td>2</td><td>Andrew</td><td>Yarmolov</td><td>andrew</td></tr><tr><td>3</td><td>Sergey</td><td>Anapenkov</td><td>sapen</td></tr><tr class="_loading_"><td>4</td><td class="-info- _loading_">Yana</td><td>Ivanova</td><td>yai</td></tr><tr class="-disabled-"><td>5</td><td>Anatolii</td><td>Savenkov</td><td>anjh987</td></tr></tbody></table>

With size modifiers

Set statuses and modifiers to td, tr. Or to table if you want to apply modifier to all table.

<table class="-table _vertical_"><thead><tr><th>#</th><th>First name</th><th>Last name</th><th>User name</th></tr></thead><tbody><tr class="_tiny"><td>1</td><td>Maxim</td><td>Vetrenko</td><td>maxmert</td></tr><tr class="_small"><td>2</td><td>Andrew</td><td>Yarmolov</td><td>andrew</td></tr><tr><td>3</td><td>Sergey</td><td>Anapenkov</td><td>sapen</td></tr><tr class="_big"><td>4</td><td>Yana</td><td>Ivanova</td><td>yai</td></tr><tr class="_huge"><td>5</td><td>Anatolii</td><td>Savenkov</td><td>anjh987</td></tr></tbody></table>

Combine modifiers

Set statuses and modifiers to td, tr. Or to table if you want to apply modifier to all table.

<table class="-table _vertical_"><thead><tr><th>#</th><th>First name</th><th>Last name</th><th>User name</th></tr></thead><tbody><tr class="_tiny _loading_"><td>1</td><td>Maxim</td><td class="-warning-">Vetrenko</td><td>maxmert</td></tr><tr class="_small -error-"><td>2</td><td>Andrew</td><td>Yarmolov</td><td>andrew</td></tr><tr><td>3</td><td>Sergey</td><td>Anapenkov</td><td>sapen</td></tr><tr class="_big"><td class="-disabled-">4</td><td>Yana</td><td>Ivanova</td><td>yai</td></tr><tr class="_huge -primary-"><td>5</td><td>Anatolii</td><td>Savenkov</td><td>anjh987</td></tr></tbody></table>

Inputs

I wrap input into span.-form-field to get this beautiful borders around them. If you do not want this borders, just use input

<form class="-form"><span class="-form-field _tiny"><input type="text"></span><span class="-form-field -success- _small"><input type="text"></span><span class="-form-field -error-"><input type="text"></span><span class="-form-field -warning- _big"><input type="text"></span><span class="-form-field -info- _huge"><input type="text"></span><span class="-form-field -disabled- _huge"><input type="text" disabled="disabled"></span></form>

And here is a code for select. Using widget -caret is nessesary for correct webkit render inside -form-field.

<div class="-form-field"><select><option>Russia</option><option>USA</option><option>UK</option><option>Germany</option></select><i class="-caret"></i></div>

Form grid

<form class="-form"><p class="-form-field-row"><span class="-form-field -col3 -info- _huge"><input type="text" value="Column 3"></span><span class="-form-field -col3 -info- _big"><input type="text" value="Column 3"></span><span class="-form-field -col3 -info-"><input type="text" value="Column 3"></span></p><p class="-form-field-row"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"><input type="text" value="Col 1" class="-col1"></p><p class="-form-field-row"><span class="-form-field -col3 -info-"><select><option>option 1</option></select><i class="-caret"></i></span><span class="-form-field -col3 _big -info-"><select><option>option 1</option></select><i class="-caret"></i></span><span class="-form-field -col3 _huge -info-"><select><option>option 1</option></select><i class="-caret"></i></span></p><p class="-form-field-row"><span class="-form-field -col3 _tiny"><select><option>option 1</option></select><i class="-caret"></i></span><span class="-form-field -col3 _small"><select><option>option 1</option></select><i class="-caret"></i></span><span class="-form-field -col3"><select><option>option 1</option></select><i class="-caret"></i></span></p><p class="-form-field-row"><span class="-form-field -col6 -info-"><input type="text" value="Column 6"></span><span class="-form-field -col3 -info-"><input type="text" value="Column 3"></span></p><p class="-form-field-row"><input type="text" value="Column 9" class="-col9"></p></form>

Vertical form

Just set modificator ._vertical_ to form to create it.

<form class="-form _vertical_"><label>Login</label><span class="-form-field"><input type="text"></span><span class="-form-field-help">Help me</span><label>Password</label><span class="-form-field"><input type="password"></span><label>Short bio</label><span class="-form-field"><textarea></textarea></span><br><br><a class="-btn">Save</a><a class="-btn -error- -unstyled-">Cancel</a></form>

Horizontal form

It is more work here. You need to add modificator ._horizontal_ to your form, and use objects .-form-row to set rows inside form. Also you can use modificator .-col# (# – number) to set width of input field

<form class="-form _horizontal_"><div class="-form-row"><label>Login</label><span class="-form-field -col2"><input type="text"></span><span class="-form-field-help">Help me</span></div><div class="-form-row"><label>Password</label><span class="-form-field -col2"><input type="password"></span></div><div class="-form-row"><div class="-form-group"><label><input type="checkbox"></label></div></div><div class="-form-row"><div class="-form-group"><a class="-btn">Save</a><a class="-btn -error- -unstyled-">Cancel</a></div></div></form>

• glass
• music
• search
• envelope
• heart
• star
• star-empty
• user
• film
• th-large
• th
• th-list
• ok
• remove
• zoom-in
• zoom-out
• off
• signal
• cog
• trash
• home
• file
• time
• road
• download-alt
• download
• upload
• inbox
• play-circle
• repeat
• refresh
• list-alt
• lock
• flag
• headphones
• volume-off
• volume-down
• volume-up
• qrcode
• barcode
• tag
• tags
• book
• bookmark
• print
• camera
• font
• bold
• italic
• text-height
• text-width
• align-left
• align-center
• align-right
• align-justify
• list
• indent-left
• indent-right
• facetime-video
• picture
• pencil
• map-marker
• adjust
• tint
• edit
• share
• check
• move
• step-backward
• fast-backward
• backward
• play
• pause
• stop
• forward
• fast-forward
• step-forward
• eject
• chevron-left
• chevron-right
• plus-sign
• minus-sign
• remove-sign
• ok-sign
• question-sign
• info-sign
• screenshot
• remove-circle
• ok-circle
• ban-circle
• arrow-left
• arrow-right
• arrow-up
• arrow-down
• share-alt
• resize-full
• resize-small
• plus
• minus
• asterisk
• exclamation-sign
• gift
• leaf
• fire
• eye-open
• eye-close
• warning-sign
• plane
• calendar
• random
• comment
• magnet
• chevron-up
• chevron-down
• retweet
• shopping-cart
• folder-close
• folder-open
• resize-vertical
• resize-horizontal
• bar-chart
• twitter-sign
• facebook-sign
• camera-retro
• key
• cogs
• comments
• thumbs-up
• thumbs-down
• star-half
• heart-empty
• signout
• linkedin-sign
• pushpin
• external-link
• signin
• trophy
• github-sign
• upload-alt
• lemon
• phone
• check-empty
• bookmark-empty
• phone-sign
• twitter
• facebook
• github
• unlock
• credit-card
• rss
• hdd
• bullhorn
• bell
• certificate
• hand-right
• hand-left
• hand-up
• hand-down
• circle-arrow-left
• circle-arrow-right
• circle-arrow-up
• circle-arrow-down
• globe
• wrench
• tasks
• filter
• briefcase
• fullscreen
• group
• link
• cloud
• beaker
• cut
• copy
• paper-clip
• save
• sign-blank
• reorder
• list-ul
• list-ol
• strikethrough
• underline
• table
• magic
• truck
• pinterest
• pinterest-sign
• google-plus-sign
• google-plus
• money
• caret-down
• caret-up
• caret-left
• caret-right
• columns
• sort
• sort-down
• sort-up
• envelope-alt
• linkedin
• undo
• legal
• dashboard
• comment-alt
• comments-alt
• bolt
• sitemap
• umbrella
• paste
• user-md

Social icons

• facebook
• googleplus
• twitter
• linkedin
• dropbox
• evernote
• forrst
• dribbble
• cloudapp
• github
• spotify
• readitlater
• soundcloud
• tumblr
• smashingmagazine
• itunes
• appstore
• macappstore
• androidmarket
• pinterest
• quora
• lanyrd
• paypal
• amazon
• skype
• lastfm
• yelp
• forsquare
• klout
• wikipedia
• disqus
• intensedebate
• google
• gmail
• vimeo
• scribd
• youtube
• wordpress
• songkick
• posterous
• eventbrite
• flattr
• plancast
• ceo
• iefive
• meetup
• openid
• htmlsix
• parents
• guest
• creativecommonlicence
• rss
• chrome
• eventasaurus
• weibo
• plurk
• grooveshark
• blogger
• viadeo
• podcast
• fivehundredpx
• bitcoin
• ninetyninedesigns
• pinboard
• stumble
• myspace
• windowslive
• eventful
• xing
• flickr
• delicious
• googleplay
• opentable
• digg
• reddit
• angellist
• instagram
• steam
• vkontakte
• appnet
• drupal
• identica
• saveforlater
• adobeacrobat
• bitbucket
• buffer
• lego
• login
• hackernews
• stackoverflow
• lkdto
• callphone
• sendmessage
• addtocalendar
• addtocart
• print
• stripe
• dwolla

Font icons advantage

<div class="-group _tiny"><a class="-btn -dark-"><i class="-icon-heart"></i></a><a class="-btn">button</a></div><div class="-group _small"><a class="-btn -primary-"><i class="-icon-heart"></i></a><a class="-btn">button</a></div><div class="-group"><a class="-btn"><i class="-icon-heart"></i></a><a class="-btn">button</a></div><div class="-group _big"><a class="-btn -warning-"><i class="-icon-heart"></i></a><a class="-btn">button</a></div><div class="-group _huge"><a class="-btn -disabled-"><i class="-icon-heart"></i></a><a class="-btn">button</a></div>