Grid

The default maxmertkit grid enables 12 columns with width 1200px. But if you want to change it, you can just edit theme file. Change column width, column count and gutter with and maxmertkit will do the rest. Nothing will broke in your project.
Use widget .-row-fluid to define new row, and .-col# to define new column (# – number from 1 to columns quantity)

Basic

1
1
1
1
1
1
1
1
1
1
1
1
2
4
3
3
4
5
3
12

<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>
Use .-col-offset# to make offset.

1
1
1
1
1
1
1
1
1
1
1
1
4
3 offset 2
3
3 offset 1
3 offset 2
1
2
6 offset 3
2
1

<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>
Columns nesting also works.

12
5
4
3

<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

Add modifyer _responsive_ to any block. Widths of .-container, .-row and .-col inside this block will become responsive. For example at this site I've appled modifier ._responsive_ to the body. Try to resize browser window to see effect.

Fluid grid

Use widget .-row-fluid to set all columns responsible to the row width. Grid system uses percentage for columns and rows. It is useful for different kind of devices.

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

<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>
Use .-col-offset# to make offset.

1
1
1
1
1
1
1
1
1
1
1
1
4
3 offset 2
2 offset 1
3 offset 1
3 offset 1
3 offset 1
6 offset 3
Columns nesting also works for fluid grid.

12
6
6
6
6

<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>

Typography

Headers

All headers from h1 to h6 are available.

h1 Header

h2 Header

h3 Header

h4 Header

h5 Header
h6 Header
<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
Italic
Small text
This is Abbr

Paragraph text

<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.

git clone
<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.

Vetrenko Maxim
Gagaryinskiy 27
Moscow
Russian Federation
P: +7 960 628 6999
Email
<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.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<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

  • List element
  • List element
    • List element
    • List element
      • List element
      • List element
      • List element
    • List element
  • List element
<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

  1. Element
  2. Element
  3. Element
    1. Element
    2. Element
  4. Element
<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>

Tables

Something about tables. Main axioms of maxmertkit are working here. But modifiers ._striped_, ._hovered_ and ._bordered_ uses only for table (for now).

Striped and hovered

#First nameLast nameUser name
1MaximVetrenkomaxmert
2AndrewYarmolovandrew
3SergeyAnapenkovsapen
4YanaIvanovayai
<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

#First nameLast nameUser name
1MaximVetrenkomaxmert
2AndrewYarmolovandrew
3SergeyAnapenkovsapen
4YanaIvanovayai
<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.

#First nameLast nameUser name
1MaximVetrenkomaxmert
2AndrewYarmolovandrew
3SergeyAnapenkovsapen
4YanaIvanovayai
5AnatoliiSavenkovanjh987
<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.

#First nameLast nameUser name
1MaximVetrenkomaxmert
2AndrewYarmolovandrew
3SergeyAnapenkovsapen
4YanaIvanovayai
5AnatoliiSavenkovanjh987
<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.

#First nameLast nameUser name
1MaximVetrenkomaxmert
2AndrewYarmolovandrew
3SergeyAnapenkovsapen
4YanaIvanovayai
5AnatoliiSavenkovanjh987
<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>

Forms

Very hard and important part of every framework. Forms are one of the biggest area of user-interaction aspect. It should be beautiful and simple, because often it should sell.

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.


Help me with this field

SaveCancel
<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


Help me with this 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>

Icons

There is no sprites for icons in maxmertkit. I used Awesome font and Zocial fonts to create icons. I think that icon fonts are great, because we can change icon sizes and colors on the fly. It's awesome!

Use class name .-icon-{iconName}
  • 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

Awesome font already has social icons, but I realized that these is not enough. Maxmertkit uses Zocial for social icons.

Use class name .-icon-social-{iconName}
  • 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

When you set size modifiers icons scale with you widget. The same with modify classes.

     
<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>