Mikit

Group

Combines float elements to group with a clearfix.

This text is visibly floating left

This text looks like a case of right float

<div class="mi-group">
    <div class="mi-float-left">...</div>
    <div class="mi-float-right">...</div>
</div>

Visibility

Below is an invisible div with class mi-invisible. You can't see it, because it is invisible. You can't see invisible things.

invisible

But you can see this div because it has mi-visible class.

<div class="mi-invisible">...</div>
<div class="mi-visible">...</div>

Display

This is a very useful little bit. Whenever you need to hide some text or an element on a small screen, just throw in mi-hide-sm class. Or, if you need to specifically show something only on small screens, mi-show-sm class is yours for the job. You can also just plain hide stuff with mi-hide class. Can you see red words "I'm hidden" below? Exactly.

I'm hidden

This text will not show up on a small screen.

Resize your window and trust us on this ↑ ↓

This text will only show up on a small screen

<div class="mi-hide">I'm hidden</div>
<div class="mi-hide-sm">This text will not show up on a small screen.</div>
<div class="mi-show-sm">This will only show up on a small screen</div>

Print

One more neat feature of Mikit. It helps you produce better ready-to-print pages by simply hiding irrelevant things.

This will be hidden on print, because it is some sort of web-specific thing.

This will be printed, because this text is somehow more relevant on paper than on screen.

<div class="mi-hide-print">...</div>
<div class="mi-show-print">...</div>

Close

Closing icon to close anything you want.

<span class="mi-icon-close"></span>

Caret

Mikit has already built-in four-direction caret.

<span class="mi-caret mi-down"></span>
<span class="mi-caret mi-up"></span>
<span class="mi-caret mi-left"></span>
<span class="mi-caret mi-right"></span>

Example of usage:

Link Text

Icons

Some useful icons are already built-in to Mikit.

<i class="mi-icon-search"></i>

<i class="mi-icon-menu"></i>

<i class="mi-icon-calendar"></i>