Utils

Here you can find over a dozen of examples of little tiny utilities, that can make developer's life that much easier, and your project progress that much faster..

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="group">
    <div class="float-left">...</div>
    <div class="float-right">...</div>
</div>

Visibility

Below is an invisible div with class 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 visible class.

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

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

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

Print

One more neat feature of Kube. 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="hide-print">...</div>
<div class="show-print">...</div>

Video Container

Helps to serve responsive video to various devices.

<div class="video-container">
    <iframe>...</iframe>
</div>

Close

Closing icon to close anything you want.

<span class="close small"></span>

<span class="close"></span>

<span class="close big"></span>

Caret

Kube has already built-in four-direction caret.

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

Example of usage:

Link Text

Icons

Some useful icons are already built-in to Kube.

<i class="kube-search"></i>

<i class="kube-menu"></i>

<i class="kube-calendar"></i>