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

Creed

This framework was created by me, Vetrenko Maxim Sergeevich, to make programmer's lives much easier. I'm working as a frontend developer, and I know the difficulties of gluing all parts of a web-project. I hope your life becomes easier with this framework. If it helped you, please inform me, donate or help to make it better. Thank you, my dear friend!

Widgets

In maxmertkit widget is an object like button, group, input, tab, table, badge, label, dropdown or other stuff that contain information to show.

Modifiers

Modifier can change any widget in some way that you can predict. For example size modifier will change button size, but if you will apply the same modifier to widget like group of buttons and inputs, it will change size of all widgets inside.

Сlass inheritance

Imagine you have a group of buttons. And this whole should be disabled for some reason. You would have to set "disabled" for each button. Arrrrrr!

Maxmertkit was designed to avoid those situations. All you have to do is to set style class to a parent and all childs became disabled (or errored, or succeed, or loading, or whatever)! Easy!

Before
<div class="group"><a class="button disabled">Left</a><a class="button disabled">Middle</a><a class="button disabled">Right</a><input type="text" class="input-disabled"></div>
After
<div class="-group -disabled-"><a class="-btn">Left</a><a class="-btn">Middle</a><a class="-btn">Right</a><input type="text"></div>

Class names

Before you had to remember a lot of uncategorized classes. Now all classes you need to remember are widgets classes and modifiers classes. So:

Before
I'm afraid to suggest... o_O
After
Widget class begins with "-".
For example ".-btn", ".-group", ".-tabs"
 
Status class begins and ends width "-".
For example ".-error-", ".-success-", ".-dark-"
 
Size class begins width "_".
For example "._tiny", "._small", "._huge"
 
Other modifiers classes begin and end with "_".
For example "._loading_", "._active_", "._top_" 
 
That is ALL you have to remember!

Fast widgets append

If there is not some objects in maxmertkit that you need, you can add them very fast. And after you add a widget all modifiers will work with it!

It's really amaizing. Maxmertkit will allow you very fast prototyping even with creating new elements that do not exists yet. I'll show you how to create new elements a little bit later (with maxmertkit-widget-manager, I'm creating it right now).

Start to use

Here I will tell you about technologies i used to create maxmertkit. In most cases it was not easy, but I am happy with my choice. Ok, let us start.
SASS
I have used SASS to build all CSS code in maxmertkit. I've started with LESS, but i have realized that LESS can't give such flexibility as SASS does.
Coffeescript
Today all javascript code is native, but I want to rewrite it to coffee. It is easier to support coffee code.
Node.js and NPM
I recommend you to use nmp for frontend development. For example grunt tool is very useful.

Download

You can download it from github, or if you want to help me with development, fork project.

I will add online configurator later. You will be able to configure your kit and add new widgets if you want to.

Structure

There are three css files you need to include: maxmertkit.css, maxmertkit-components.css, maxmertkit-animation.css.

maxmertkit.css includes all basic styles for main tags like <strong>, <em>, <small> and others.
maxmertkit-components.css includes all widgets styles.
maxmertkit-animation.css includes all animation that widgets can use.

CSS widgets included:

  • Arrow
  • Badge
  • Button
  • Caret
  • Carousel
  • Dropdown
  • Form
  • Froup
  • Group
  • Icon
  • Social icon
  • Label
  • Menu
  • Modal
  • Notify
  • Progressbar
  • Table
  • Tabs
  • Tooltip

Javascript folder has 8 plugins:

  • Affix
  • Button
  • Carousel
  • Modal
  • Notify
  • Popup
  • Scrollspy
  • Tabs

What next?

Proceed to docs