In maxmertkit widget is an object like button, group, input, tab, table, badge, label, dropdown or other stuff that contain information to show.
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.
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!
<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>
<div class="-group -disabled-"><a class="-btn">Left</a><a class="-btn">Middle</a><a class="-btn">Right</a><input type="text"></div>
Before you had to remember a lot of uncategorized classes. Now all classes you need to remember are widgets classes and modifiers classes. So:
I'm afraid to suggest... o_O
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
SASSI 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.
Node.js and NPMI recommend you to use nmp for frontend development. For example grunt tool is very useful.
StructureThere are three css files you need to include:
maxmertkit.css includes all basic styles for main tags like
<small> and others.
maxmertkit-components.css includes all widgets styles.
maxmertkit-animation.css includes all animation that widgets can use.
CSS widgets included:
- Social icon