Files

• _tools.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/utilities/tools

Module Overview

The tools module provides various extendable placeholders, mixins, classes and modules to use in your theme.

%horizontal-center

Horizontally center an element.

.foo {
    @extend %horizontal-center;
}

%list-reset

Remove the left padding and list-style from a list.

.foo ul {
    @extend %list-reset;
}

%fill-parent

Cause an element to fill the entire space of its parent.

.foo {
    @extend %fill-parent;
}

.auto-resizable-iframe

Create a responsive iframe element.

<div class="auto-resizable-iframe" data-iframe-height="56.5%">
    <div>
        <iframe src="https://player.vimeo.com/video/87701971?autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div>
</div>

Hrule Module

Module Overview

Examples

<hr class="hrule" />

<hr class="hrule-line" />

<hr class="hrule-dotted" />

<hr class="hrule-stripes" />

<hr class="hrule-gutter" />

<hr class="hrule-small" />

<hr class="hrule-large" />

<hr class="hrule-large-stripes" />

@keyframes spin

Used to rotate an element 360 degrees.

.foo {
    animation-name: spin;
    animation-duration: 35s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@mixin top-rhythm()

Used to remove the top margin from an element's first child.

.foo {
    @include top-rhythm();
}

@mixin bottom-rhythm()

Used to remove the bottom margin from an element's last child.

.foo {
    @include bottom-rhythm();
}

@mixin vertical-rhythm($position: null)

Used to remove the top margin from an element's first child and/or the bottom margin from an element's last child.

.foo {
    @include vertical-rhythm();
}
.bar {
    @include vertical-rhythm('top');
}
.baz {
    @include vertical-rhythm('bottom');
}

@mixin vertical-center($position: relative)

Vertically center any element using either position 'relative' or 'absolute'.

.foo {
    @include vertical-center();
}
.bar {
    @include vertical-center(absolute);
}

@mixin font-sizes()

Used to generate modifiers for each font-size.

@include module('foo') {
    @include font-sizes();
}

@mixin triangle()

Used to add a CSS triangle to an element.

.foo {
    @include triangle((
        'position' : 'bottom',
        'color'    : color('greyscale', 'grey-1'),
        'size'     : 0.5em
    ));
}

@mixin bg-overlay($background)

Used to add a background overlay to an element's :after pseudo element.

.foo {
    @include bg-overlay(#1887bf);
}