Mixins

Get Started

Kube has been designed to help you with web development, that’s why it’s so easy to use Kube when building websites. To move forward quickly and efficiently, just link kube.scss from Kube package: this file contains variables, mixins and everything you need to simplify daily routine tasks.

For example, import kube.scss into your master.scss styles file, which you will later compile into master.css

// master.scss
@import “dist/scss/kube.scss”;

Now all Kube’s variables and mixins are readily available in master.scss, and you can use them whenever needed.

// master.scss
@import “dist/scss/kube.scss”;


// use mixins
#my-layout {
    @include flex;
}

// use variables
#my-layout {
    padding: $base-line;
}

Fonts

Generates a font-family declarations for text, headings, buttons or inputs.

// import Kube
@import “dist/scss/kube.scss”;


// use mixins
@include text-font(“Lato, ‘Helvetica Neue’, sans-serif”);
@include headings-font(“Lato, ‘Helvetica Neue’, sans-serif”);
@include buttons-font(“Lato, ‘Helvetica Neue’, sans-serif”);
@include inputs-font(“Lato, ‘Helvetica Neue’, sans-serif”);

CSS Output

// Text
body {
    font-family: Lato, ‘Helvetica Neue’, sans-serif;
}


// Headings
h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Lato, ‘Helvetica Neue’, sans-serif;
}

// Buttons
button, .button {
    font-family: Lato, ‘Helvetica Neue’, sans-serif;
}

// Inputs
input, textarea, select {
    font-family: Lato, ‘Helvetica Neue’, sans-serif;
}

Breakpoints

Breakpoint for small screens (max-width 768px by default).

@include breakpoint(sm) {
    .span {
        display: none;
    }
}

Breakpoint for medium screens (min-width 1024px by default).

@include breakpoint(md) {
    .span {
        display: none;
    }
}

Breakpoint for large screens (min-width 1200px by default).

@include breakpoint(lg) {
    .span {
        display: none;
    }
}

Custom breakpoints:

// min-width 768px;
@include breakpoint(768px) {}


// min-width 768px and max-width 1024px;
@include breakpoint(768px, 1024px) {}

// max-width 1024px;
@include breakpoint(0, 1024px) {}

Grid

Row

Generates a grid row.

.my-row {
    @include grid-row;
}

CSS Output

.my-row {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;


<span class="hljs-attribute">-ms-flex-direction</span>: row;
<span class="hljs-attribute">-webkit-flex-direction</span>: row;
<span class="hljs-attribute">flex-direction</span>: row;

<span class="hljs-attribute">-ms-flex-wrap</span>: wrap;
<span class="hljs-attribute">-webkit-flex-wrap</span>: wrap;
<span class="hljs-attribute">flex-wrap</span>: wrap;


}

Media Grid

Generates a media grid. See live example.

.my-media-grid {
    @include grid-media-columns(3);
}

CSS Output

.my-media-grid {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;


<span class="hljs-comment">// column gap is specified</span>
<span class="hljs-comment">// in the grid settings (variables.scss) as $grid-gutter</span>
-webkit-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>;
-moz-<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>;
<span class="hljs-attribute">column-gap</span>: <span class="hljs-number">2%</span>;


}

.my-media-grid > div {
    display: inline-block;
    width: 100%;
}

@media (max-width: 768px) {
    .my-media-grid {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

Flex

@include flex;
@include flex-basis($basis);


// items
@include flex-items-wrap;
@include flex-items-nowrap;
@include flex-items-row
@include flex-items-column;
@include flex-items-left;
@include flex-items-right;
@include flex-items-center;
@include flex-items-space-between;
@include flex-items-space-around;
@include flex-items-top;
@include flex-items-middle;
@include flex-items-bottom;

// item
@include flex-item-grow($grow);
@include flex-item-auto;
@include flex-item-one;
@include flex-item-shrink($shrink);
@include flex-item-width($width);

Gradients

Vertical

@include gradient-vertical($startColor, $endColor);

@include gradient-vertical-to-opacity($startColor, $opacity);

Horizontal

@include gradient-horizontal($startColor, $endColor);

@include gradient-horizontal-to-opacity($startColor, $opacity);

Radial

@include gradient-radial($innerColor, $outerColor);

Utils

Clearfix

Provides an easy way to include a clearfix for containing floats.

.layout {
    @include clearfix;
}

CSS Output

.layout:after {
    content: “;
    display: table;
    clear: both;
}

Transition

This mixin provides a shorthand syntax for transitions.

// by default ‘all linear .2s’
@include transition;


// custom transitions
@include transition(all .2s ease-in-out);
@include transition(opacity 1s ease-in, width .2s ease-in);

Transform

Provides a shorthand syntax for transforms.

.span {
    @include transform(rotate(90deg));
}

CSS Output

.span {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Blur

Provides a shorthand syntax for blur filter.

.span {
    @include blur(5px);
}

CSS Output

.span {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Retina Image

Retina image must have a suffix -2x, for example: image-2x.jpg

@include retina-background-image($image-url, $image-type, $image-width, $image-height);


// $image-type - jpg, png, gif
// $image-height - optional

Example:

.brand {
    @include retina-background-image(’../logo’, ‘png’, 100px);
}

CSS Output

.brand {
    background-repeat: no-repeat;
    background-image: url(”../logo.png”);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min–moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2 / 1),
       only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx)
       {
            .brand {
                background-image: url(”../logo-2x.png”);
                background-size: 100px auto;
            }
       }