Helpers

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.

Container #

There is the .is-container modifiers. It helps to make the flex items inside the container.

Item 1
Item 2
<div class="is-container">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

The is-container-row sets display flex and the flex-direction row to the container on all devices.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
<div class="is-container-row">
    <div>Item 1</div>
    ...
    <div>Item 6</div>
</div>

The is-container-column sets display flex and the flex-direction column to the container on all devices.

Item 1
Item 2
<div class="is-container-column">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

The is-items-middle makes the items in the container vertically centered and aligns it top left on the mobile devices.

Item 1
Item 2
Item 3
<div class="is-container is-items-middle">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Container's Modifiers #

is-width-large

This modifier sets the max width of container. By default is 1000px and you can change it in the vars.scss.

<div class="is-width-large">...</div>

is-width-medium

The modifier sets the max width of container. By default is 820px and you can change it in the vars.scss.

<div class="is-width-medium">...</div>

is-width-small

This modifier sets the max width of container, by default is 420px.

<div class="is-width-small">...</div>

is-center

<div class="is-width-small is-center">...</div>

is-left-mobile

This modifier aligns the centered container to the left side on the mobile devices.

<div class="is-width-small is-center is-left-mobile">...</div>

is-push-right

Item 1
Item 2
<div class="is-container">
    <div>Item 1</div>
    <div class="is-push-right">Item 2</div>
</div>

is-shadow-1

<div class="is-width-small is-shadow-1">...</div>

is-shadow-2

<div class="is-width-small is-shadow-2">...</div>

is-shadow-3

<div class="is-width-small is-shadow-3">...</div>

is-border

<div class="is-width-small is-border">...</div>

is-border-top

<div class="is-width-small is-border-top">...</div>

is-border-bottom

<div class="is-width-small is-border-bottom">...</div>

Visibility #

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

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

Display #

This is a very useful little bit. Whenever you need to hide some text or an element just throw in is-hidden class. Or, if you need to specifically hide something on mobile is-hidden-mobile class is yours for the job.

I'm hidden on mobile
<div class="is-hidden">...</div>
<div class="is-shown-mobile">...</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="is-hidden-print">...</div>
<div class="is-shown-print">...</div>

Video Container #

Helps to serve responsive video to various devices.

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

Close #

Closing icon to close anything you want.

<span class="close"></span>
<span class="close is-big"></span>
<span class="close is-large"></span>

Caret #

Kube has already built-in four-direction caret.

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

In wildlife:

    Link     Text    
// Button
<button class="button">Button <span class="caret is-down"></span></button>

// Link
<a href="#">Link <span class="caret is-up"></span></a>

// Text
Text <span class="caret is-left"></span>

Icons #

Kube has built-in the most useful icons.

     
<span class="icon-kube-calendar"></span>
<span class="icon-kube-menu"></span>
<span class="icon-kube-search"></span>

Width #

Kube has predefined classes to set the percentage width for any elements in your markup.

is-10
is-20
is-25
is-30
is-33/is-34
is-35
is-40
is-50
is-60
is-65
is-66/is-67
is-70
is-75
is-80
is-90
is-100
<div class="is-10">...</div>
...
<div class="is-100">...</div>