Login Register

Kayzen

Helpers

assets/modules/utilities/helpers

Files

  • _helpers.scss
  • README.md

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

Module Overview

At one point, a long time ago, Kayzen was built off the popular HTML5 Boilerplate. There are still some remnants left over which Kayzen utilizes, namely its helper classes.

Helper Class Description
.hidden Hide element visually and also from screen readers.
.visually-hidden Hide element only visually, but keep for screen readers.
.invisible Hide element visually and from screen readers, but keep element in the layout flow.
.hide-overflow Hide an element's overlow.
.clearfix, .cf The good old clearfix hack to contain floated elements.
.relative Sets an element's position to relative.
.flush Remove's the top margin from an element.
.sink Remove's the bottom margin from an element.
%greyscale, .greyscale Turn any element greyscale (extend using the % placeholder).
%disabled, .disabled This extends the above %greyscale placeholder and also reduce the opacity.
.text-left Align an element's text to the left.
.text-center Align an element's text to the middle.
.text-right Align an element's text to the right.
.text-justify Align an element's text to be justified.
.object-center Center an element.
.va-top Sets an element's vertical align property to top.
.va-middle Sets an element's vertical align property to middle.
.va-bottom Sets an element's vertical align property to bottom.
.v-center Vertically center an element.
.bg-cover Set an element's background-size to 'cover'.
.bg-[social colors] For each color in the social palette, you can use the .bg-facebook class, replacing 'facebook' with your desired color. This will set the element's background to that color.
.max-[breakpoints] For each value in the breakpoints map, you can use the .max-break-3 class, replacing 'break-3' with your desired breakpoint. This will show the element only when the resolution is at most the value you specify.
.min-[breakpoints] For each value in the breakpoints map, you can use the .min-break-3 class, replacing 'break-3' with your desired breakpoint. This will show the element only when the resolution is at least the value you specify.