• _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.


Horizontally center an element.

.foo {
    @extend %horizontal-center;


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

.foo ul {
    @extend %list-reset;


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

.foo {
    @extend %fill-parent;


Create a responsive iframe element.

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

Hrule Module

Module Overview

  • Name: hrule
  • Modifiers: line, dotted, stripes, gutter, small, large
  • Components: null


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