Mixins

Mixins are a great way to produce things and effects way faster with Sass then with pure CSS. Kube has a lot to offer in this respect; feel free to use any of these mixins with any Kube modules.

Use mixins in your project #

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 vars.scss and mixins.scss from Kube package: these files contain variables and mixins and everything you need to simplify daily routine tasks.

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

// master.scss
@import "dist/scss/vars.scss";
@import "dist/scss/mixins.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/vars.scss";
@import "dist/scss/mixins.scss";

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

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

If you need to change some framework styles just add your custom variables file:

// master.scss
@import "dist/scss/vars.scss";
@import "mytheme/scss/my-custom-vars.scss";
@import "dist/scss/mixins.scss";

Breakpoints #

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

@include for-mobile() {
    .span {
        display: none;
    }
}

Breakpoint not for mobile screens.

@include not-mobile() {
    .span {
        display: none;
    }
}

Custom breakpoints:

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

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

// max-width 1024px;
@include breakpoint($max: 1024px) {}

Layout #

@include make-container;
@include make-sidebar;
@include make-content;
@include make-gap-offset(10%);

Elements #

@include make-button($back-color, $text-color);
@include make-label($back-color, $text-color);

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-baseline;
@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);

Utils #

Clearfix

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

.layout {
    @include clearfix;
}
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);

A mixin to make transition none.

@include transition-none;
Transform

Provides a shorthand syntax for transforms.

.span {
    @include transform(rotate(90deg));
}
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);
}
Output
.span {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
Retina Image

Retina image should 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);
}
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;
            }
       }