Maxmertkit widgets

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

Normal 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 unstyled Primary with unstyled Warning 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

Approve Cancel

<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

Button Button Button

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

Button Button Button

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

Button Button Button

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

I like it

Favourite

Repeat

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

I like it

Favourite

Repeat

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

Operation

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

Operation

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

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

Operation

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

Active
With dropdown
With icon

Active
With dropdown
With icon

Active
With dropdown
With icon

Active
With dropdown
With icon

Active
With dropdown
With icon

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

Active
With dropdown
With icon
Disabled

Active
With dropdown
With icon
Disabled

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

Active
With dropdown
With icon
Disabled

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

Dropdowns

This is very useful object. You can use it as approve window, as select or as informational window.

Statuses

<div class="-dropdown"><div class="-dropdown-header">Header</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -primary-"><div class="-dropdown-header">Header</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -error-"><div class="-dropdown-header">Header</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -info-"><div class="-dropdown-header">Header</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -warning-"><div class="-dropdown-header">Header</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -success-"><div class="-dropdown-header">Header</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -dark-"><div class="-dropdown-header">Header</div><div class="-dropdown-content">Content</div></div>

With arrows

<div class="-dropdown _top_"><div class="-arrow"></div><div class="-dropdown-content">Content</div></div><div class="-dropdown -primary- _top_"><div class="-arrow"></div><div class="-dropdown-content">Content</div></div><div class="-dropdown -error- _top_"><div class="-arrow"></div><div class="-dropdown-content">Content</div></div><div class="-dropdown -info- _top_"><div class="-arrow"></div><div class="-dropdown-content">Content</div></div><div class="-dropdown -warning- _top_"><div class="-arrow"></div><div class="-dropdown-content">Content</div></div><div class="-dropdown -success- _top_"><div class="-arrow"></div><div class="-dropdown-content">Content</div></div><div class="-dropdown -dark- _top_"><div class="-arrow"></div><div class="-dropdown-content">Content</div></div>

Set dropdown position

<div class="-dropdown -primary- _top_"><div class="-arrow"></div><div class="-dropdown-header">Top</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -primary- _bottom_"><div class="-arrow"></div><div class="-dropdown-header">Bottom</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -primary- _right_"><div class="-arrow"></div><div class="-dropdown-header">Right</div><div class="-dropdown-content">Content</div></div><div class="-dropdown -primary- _left_"><div class="-arrow"></div><div class="-dropdown-header">Left</div><div class="-dropdown-content">Content</div></div>

Menus

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.

Put menus to dropdowns

Try set modifiers to the whole menu. All items will look different.

You do not need to add modifier _active_ to the menu, if menu is in dropdown.

<div class="-dropdown -primary- _right_"><div class="-arrow"></div><ul class="-menu -primary-"><li><a><i class="-icon-thumbs-up"></i>  I like it</a></li><li><a><i class="-icon-star"></i>  Favourite</a></li><li><a><i class="-icon-thumbs-down"></i>  I hate it</a></li><li class="-menu-sub"><a><i class="-icon"></i>  Share</a><div class="-dropdown"><ul class="-menu"><li><a><i class="-icon"></i>  Facebook</a></li><li class="-success-"><a><i class="-icon-ok-circle"></i>  Twitter</a></li><li><a><i class="-icon"></i>  Myspace</a></li></ul></div></li><li class="-menu-separator"></li><li class="-error-"><a><i class="-icon-remove"></i>  Dont't show me this</a></li></ul></div>

Tooltips

Use tooltips to show some additional information.

Status modifiers

<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

<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

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

Buttons

Single button

Button size

Groups

Group with buttons

Group with inputs and appendix

Groups with icons

Vertical groups

Select button

Tabs

Tabs sizes

Vertical tabs

Badges

Statuses and sizes

Labels

Statuses and sizes

Dropdowns

Statuses

With arrows

Set dropdown position

Menus

Modifiers to items

Put menus to dropdowns

Control submenu's positions

Tooltips

Status modifiers

Size modifiers

Set tooltip position

Progressbars

Global and local bars

Sizes