I'm trying to improve texts quality, so if you find an error, please select it and press button
Report an error

Buttons

Buttons is one of my favouriest parts. I'm a programmer. I love buttons. Especially when they react well on user actions. Maxmertkit allows you to create such buttons easely. Let us take a look on them.

Single button

<a class="-btn">Normal button</a>

You can add a lot of modifiers to it. For example status modifiers

Disabled button Dark Error Primary Warning Info Success
<a class="-btn -disabled-">Disabled button</a> <a class="-btn -dark-">Dark</a> <a class="-btn -error-">Error</a> <a class="-btn -primary-">Primary</a> <a class="-btn -warning-">Warning</a> <a class="-btn -info-">Info</a> <a class="-btn -success-">Success</a>

Apply .-unstyled- modificator to buttons in combination with other style modificator. It is great when you need a not primary but very useful button.

Error with unstyledPrimary with unstyledWarning with unstyled
<a class="-btn -error- -unstyled-">Error with unstyled</a><a class="-btn -primary- -unstyled-">Primary with unstyled</a><a class="-btn -warning- -unstyled-">Warning with unstyled</a>

The way you can use it

ApproveCancel
<a class="-btn">Approve</a><a class="-btn -error- -unstyled-">Cancel</a>

Combine modifiers. For example ._loading_, ._unclickable_, ._active_ and status modifiers.

Loading Loading Loading Loading Loading Loading Loading Loading

Active Active Active Active Active Active Active Active

Active load Active load Active load Active load Active load Active load Active load Active load
<a class="-btn -disabled- _loading_">Loading</a> <a class="-btn _loading_">Loading</a> <a class="-btn -dark- _loading_">Loading</a> <a class="-btn -error- _loading_">Loading</a> <a class="-btn -primary- _loading_">Loading</a> <a class="-btn -warning- _loading_">Loading</a> <a class="-btn -info- _loading_">Loading</a> <a class="-btn -success- _loading_">Loading</a><br><a class="-btn -disabled- _active_">Active</a> <a class="-btn _active_">Active</a> <a class="-btn -dark- _active_">Active</a> <a class="-btn -error- _active_">Active</a> <a class="-btn -primary- _active_">Active</a> <a class="-btn -warning- _active_">Active</a> <a class="-btn -info- _active_">Active</a> <a class="-btn -success- _active_">Active</a><br><a class="-btn -disabled- _active_ _loading_">Active load</a> <a class="-btn _active_ _loading_">Active load</a> <a class="-btn -dark- _active_ _loading_">Active load</a> <a class="-btn -error- _active_ _loading_">Active load</a> <a class="-btn -primary- _active_ _loading_">Active load</a> <a class="-btn -warning- _active_ _loading_">Active load</a> <a class="-btn -info- _active_ _loading_">Active load</a> <a class="-btn -success- _active_ _loading_">Active load</a>

Button size

Use size modifiers to change button size

Tiny button Small button Normal button Big button Huge button
<a class="-btn _tiny">Tiny button</a> <a class="-btn _small">Small button</a> <a class="-btn">Normal button</a> <a class="-btn _big">Big button</a> <a class="-btn _huge">Huge button</a>

And also combine them with other modifiers

Small active loading warning button
<a class="-btn _small _loading_ -warning- _active_">Small active loading warning button</a>

Groups

You can put into the group objects like .-btn, input and .-group-appendix. And all axioms still work, so if you will set modifiers to the group it will aply to all elements inside.

Group with buttons

Put buttons inside group

<div class="-group"><a class="-btn">Button</a><a class="-btn">Button</a><a class="-btn">Button</a></div>

Let's try to set modifiers to .-group. For example ._small modificator.

<div class="-group _small"><a class="-btn">Button</a><a class="-btn">Button</a><a class="-btn">Button</a></div>

Or ._big, .-disabled- and ._loading_ modifiers (You understood, right? You can combine them).

<div class="-group _big -disabled- _loading_"><a class="-btn">Button</a><a class="-btn">Button</a><a class="-btn">Button</a></div>

Group with inputs and appendix

If you use input inside your group, then you should declare that your group is a form object (just add .-form to your group)

ButtonappendixButton
<div class="-group -form"><a class="-btn">Button</a><span class="-group-appendix">appendix</span><a class="-btn">Button</a><input type="text" value="Input field"></div>
appendixButton
<div class="-group -form _big -warning-"><span class="-group-appendix">appendix</span><a class="-btn">Button</a><input type="text" value="Input field"></div>

Groups with icons

Use .-icon objects to create pretty buttons. If you want some part of group disabled to click, just apply ._unclickable_.

<div class="-group"><a class="-btn _unclickable_"><i class="-icon-thumbs-up"></i></a><a class="-btn">I like it</a></div><br><br><div class="-group"><a class="-btn -warning- _unclickable_"><i class="-icon-star"></i></a><a class="-btn">Favourite</a></div><br><br><div class="-group"><a class="-btn -dark- _unclickable_"><i class="-icon-repeat -icon-light-"></i></a><a class="-btn">Repeat</a></div>

And use ._loading_ and ._active_ modifiers after click while you sending AJAX request.

<div class="-group"><a class="-btn _unclickable_"><i class="-icon-thumbs-up"></i></a><a class="-btn">I like it</a></div><br><br><div class="-group"><a class="-btn -warning- _unclickable_"><i class="-icon-star"></i></a><a class="-btn">Favourite</a></div><br><br><div class="-group"><a class="-btn -dark- _unclickable_"><i class="-icon-repeat -icon-light-"></i></a><a class="-btn">Repeat</a></div>

Vertical groups

<div class="-group _vertical_"><a class="-btn"><i class="-icon-thumbs-up"></i></a><a class="-btn -disabled-"><i class="-icon-star"></i></a><a class="-btn"><i class="-icon-thumbs-down"></i></a></div>

Select button

You can create select button by two ways. First way if you need to keep some functionality on the button. For example one button can perform several operations, and which operation to use you can choose in the dropdown list.

<div class="-group"><a class="-btn">Operation</a><a class="-btn"><i class="-caret"></i></a></div><div class="-group"><a class="-btn">Operation</a><a class="-btn -info-"><i class="-caret"></i></a></div><div class="-group"><a class="-btn">Operation</a><a class="-btn -info- _loading_"><i class="-caret"></i></a></div><div class="-group"><a class="-btn">Operation</a><a class="-btn -info- _active_"><i class="-caret"></i></a></div>

The second is not so fun and beautiful (actually it does not contain .-group object at all).

<a class="-btn">Operation <i class="-caret"></i></a>

Notice that when you apply size modifiers to .-group, .-caret also become bigger.

<div class="-group _tiny"><a class="-btn">Operation</a><a class="-btn"><i class="-caret"></i></a></div><div class="-group _small"><a class="-btn">Operation</a><a class="-btn"><i class="-caret"></i></a></div><div class="-group"><a class="-btn">Operation</a><a class="-btn"><i class="-caret"></i></a></div><div class="-group _big"><a class="-btn">Operation</a><a class="-btn"><i class="-caret"></i></a></div><div class="-group _huge"><a class="-btn">Operation</a><a class="-btn"><i class="-caret"></i></a></div>

Tabs

Tabs sizes

Apply modifiers to ul and li.

<ul class="-tabs _huge"><li class="_active_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li></ul><br><ul class="-tabs _big"><li class="_active_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li></ul><br><ul class="-tabs"><li class="_active_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li></ul><br><ul class="-tabs _small"><li class="_active_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li></ul><br><ul class="-tabs _tiny"><li class="_active_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li></ul>

Apply modifiers to all -tabs object and to it's parts.

<ul class="-tabs -info-"><li class="_active_ _loading_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li><li class="-disabled- _active_"><a>Disabled</a></li></ul><ul class="-tabs -info- _bottom_"><li class="_active_ _loading_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li><li class="-disabled- _active_"><a>Disabled</a></li></ul>

Vertical tabs

<ul class="-tabs -info- _vertical_"><li class="_active_ _loading_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li><li class="-disabled- _active_"><a>Disabled</a></li></ul><ul class="-tabs -info- _vertical_ _right_"><li class="_active_ _loading_"><a>Active</a></li><li><a>With dropdown <i class="-caret"></i></a></li><li><a>With icon <i class="-icon-thumbs-up"></i></a></li><li class="-disabled- _active_"><a>Disabled</a></li></ul>

Badges

Same thing here. All axioms working. Well, almost all. I do not know situations where badges loading, or when badges are vertical (etc), so some modifiers will not work.

Statuses and sizes

default primary error success info warning disabled
<span class="-badge">default</span><span class="-badge -primary-">primary</span><span class="-badge -error-">error</span><span class="-badge -success-">success</span><span class="-badge -info-">info</span><span class="-badge -warning-">warning</span><span class="-badge -disabled-">disabled</span>
badge  badge  badge
<span class="-badge -primary-">badge <i class="-icon-thumbs-up -icon-light-"></i></span><span class="-badge -primary- _big">badge <i class="-icon-thumbs-up -icon-light-"></i></span><span class="-badge -primary- _huge">badge <i class="-icon-thumbs-up -icon-light-"></i></span>

Labels

Almost the same as badges.

Statuses and sizes

default primary error success info warning disabled
<span class="-label">default</span><span class="-label -primary-">primary</span><span class="-label -error-">error</span><span class="-label -success-">success</span><span class="-label -info-">info</span><span class="-label -warning-">warning</span><span class="-label -disabled-">disabled</span>
label  label  label
<span class="-label -primary-">label <i class="-icon-thumbs-up -icon-light-"></i></span><span class="-label -primary- _big">label <i class="-icon-thumbs-up -icon-light-"></i></span><span class="-label -primary- _huge">label <i class="-icon-thumbs-up -icon-light-"></i></span>
This is very useful object. You can use it as approve window, as select or as informational window.
With maxmertkit programmers will have a lot of features that will simplify their lifes. Just set couple modifiers to change it's state.

Add modifier _active_ to the menu, if you want to show submenu on hover.

Tooltips

Use tooltips to show some additional information.

Status modifiers

Default
 
Primary
 
Default
 
Success
 
Info
 
Warning
 
Dark
 
Disabled
<div class="-tooltip _top_"><i class="-arrow"></i>Default</div><div class="-tooltip -primary- _top_"><i class="-arrow"></i>Primary</div><div class="-tooltip -error- _top_"><i class="-arrow"></i>Default</div><div class="-tooltip -success- _top_"><i class="-arrow"></i>Success</div><div class="-tooltip -info- _top_"><i class="-arrow"></i>Info</div><div class="-tooltip -warning- _top_"><i class="-arrow"></i>Warning</div><div class="-tooltip -dark- _top_"><i class="-arrow"></i>Dark</div><div class="-tooltip -disabled- _top_"><i class="-arrow"></i>Disabled</div>

Size modifiers

Normal
 
Big
 
Huge
<div class="-tooltip _top_ -primary-"><i class="-arrow"></i>Normal</div><div class="-tooltip _top_ -primary- _big"><i class="-arrow"></i>Big</div><div class="-tooltip _top_ -primary- _huge"><i class="-arrow"></i>Huge</div>

Set tooltip position

Top
  
Bottom
  
Right
  
Left
<div class="-tooltip _top_ -success-"><i class="-arrow"></i>Top</div><div class="-tooltip _bottom_ -success- _big"><i class="-arrow"></i>Bottom</div><div class="-tooltip _right_ -success- _huge"><i class="-arrow"></i>Right</div><div class="-tooltip _left_ -success- _big"><i class="-arrow"></i>Left</div>

Progressbars

You should set width of bar by style="width:##px". Also you can add global bars and several local bars to progressbar.

Global and local bars

file 1 – 75%


global – 25%
file 1 – 75%


global – 22%
file 1 – 65%
file 2 – 25%

<div style="width:100%" class="-progress _loading_"><div style="width:75%" class="-progress-bar">file 1 – 75%</div></div><div style="width:100%" class="-progress _loading_"><div style="width:25%" class="-progress-bar-global -info-">global – 25%</div><div style="width:75%" class="-progress-bar">file 1 – 75%</div></div><div style="width:100%" class="-progress _loading_"><div style="width:22%" class="-progress-bar-global -info-">global – 22%</div><div style="width:65%" class="-progress-bar">file 1 – 65%</div><div style="width:25%" class="-progress-bar -error-">file 2 – 25%</div></div>

Sizes

I love ._tiny progressbars.

global – 22%
file 1 – 65%
file 2 – 25%

<div style="width:100%" class="-progress _loading_ _tiny"><div style="width:22%" class="-progress-bar-global -info-">global – 22%</div><div style="width:65%" class="-progress-bar">file 1 – 65%</div><div style="width:25%" class="-progress-bar">file 2 – 25%</div></div>

But ._small are pretty too.

global – 22%
file 1 – 65%
file 2 – 25%

<div style="width:100%" class="-progress _loading_ _small"><div style="width:22%" class="-progress-bar-global -info-">global – 22%</div><div style="width:65%" class="-progress-bar">file 1 – 65%</div><div style="width:25%" class="-progress-bar">file 2 – 25%</div></div>

And other sizes here too

global – 22%
file 1 – 65%
file 2 – 25%


global – 22%
file 1 – 65%
file 2 – 25%


global – 22%
file 1 – 65%
file 2 – 25%

<div><div style="width:100%" class="-progress _loading_"><div style="width:22%" class="-progress-bar-global -info-">global – 22%</div><div style="width:65%" class="-progress-bar">file 1 – 65%</div><div style="width:25%" class="-progress-bar">file 2 – 25%</div></div><div style="width:100%" class="-progress _loading_ _big"><div style="width:22%" class="-progress-bar-global -info-">global – 22%</div><div style="width:65%" class="-progress-bar">file 1 – 65%</div><div style="width:25%" class="-progress-bar">file 2 – 25%</div></div><div style="width:100%" class="-progress _loading_ _huge"><div style="width:22%" class="-progress-bar-global -info-">global – 22%</div><div style="width:65%" class="-progress-bar">file 1 – 65%</div><div style="width:25%" class="-progress-bar">file 2 – 25%</div></div></div>