Login Register

Kayzen

Tools

assets/modules/objects/tools

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.

  1. .foo {
  2. @extend %horizontal-center;
  3. }
.foo {
    @extend %horizontal-center;
}

%list-reset

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

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

%fill-parent

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

  1. .foo {
  2. @extend %fill-parent;
  3. }
.foo {
    @extend %fill-parent;
}

.auto-resizable-iframe

Create a responsive iframe element.

  1. <div class="auto-resizable-iframe" data-iframe-height="56.5%">
  2. <div>
  3. <iframe src="https://player.vimeo.com/video/87701971?autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  4. </div>
  5. </div>
<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

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

Examples

  1. <hr class="hrule" />
  3. <hr class="hrule-line" />
  5. <hr class="hrule-dotted" />
  7. <hr class="hrule-stripes" />
  9. <hr class="hrule-gutter" />
  11. <hr class="hrule-small" />
  13. <hr class="hrule-large" />
  15. <hr class="hrule-large-stripes" />
<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.

  1. .foo {
  2. animation-name: spin;
  3. animation-duration: 35s;
  4. animation-iteration-count: infinite;
  5. animation-timing-function: linear;
  6. }
.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.

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

@mixin bottom-rhythm()

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

  1. .foo {
  2. @include bottom-rhythm();
  3. }
.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.

  1. .foo {
  2. @include vertical-rhythm();
  3. }
  4. .bar {
  5. @include vertical-rhythm('top');
  6. }
  7. .baz {
  8. @include vertical-rhythm('bottom');
  9. }
.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'.

  1. .foo {
  2. @include vertical-center();
  3. }
  4. .bar {
  5. @include vertical-center(absolute);
  6. }
.foo {
    @include vertical-center();
}
.bar {
    @include vertical-center(absolute);
}

@mixin font-sizes()

Used to generate modifiers for each font-size.

  1. @include module('foo') {
  2. @include font-sizes();
  3. }
@include module('foo') {
    @include font-sizes();
}

@mixin triangle()

Used to add a CSS triangle to an element.

  1. .foo {
  2. @include triangle((
  3. 'position' : 'bottom',
  4. 'color' : color('greyscale', 'grey-1'),
  5. 'size' : 0.5em
  6. ));
  7. }
.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.

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