Utilities

The Framework has some useful utility classes for margin, padding, height and width as well as things like shadow or even hover effects.

Margins

You can use the margins like m<direction>-<breakpoint>-<value>. Possible directions are l(left), r(right), t(top), b(bottom), x(horizontal), y(vertical). Values from <1-5> for default theme spacings, 10vw and 20vw for viewport-width and auto. If you put an n before the value like mt-n5 the margin will be negative.

<!-- Examples -->
<div class="mb-4">...</div>
<div class="m3 m-md-4 m-lg-10vw">...</div>
<div class="ml-md-auto"></div>
<div class="mt-sm-n3">This Element will have a negative margin and will overlapp the previous content from breakpoint sm and higher.</div>

Paddings

Paddings work exactly the same like margins. Except that they obviously can't have negative values.

<!-- Examples -->
<div class="pb-1">...</div>
<div class="py-2 px-4">...</div>
<div class="pt-md-2 pt-sm-0">...</div>

Positioning

Available Position-Utilities are: position-static,position-absolute, position-relative and position-fixed. Use them combined with top-0, bottom-0, left-0 and right-0 to position elements.

Because centering elements can be really tricky sometimes. There is an easy solution to force centering. You have to set e.g. position: relative; to the parent element and use one of the classes .absolute-center, .absolute-y-center or .absolute-x-center.This should do the trick.

Text utilities

You have some classes to speed up the styling of texts. Use the classes text-left, text-center or text-right to align the text horizontally. It is also possible to transform the text with text-uppercase, text-lowercase and text-capitalize.

Colors

Use text-<color> to color text. Or bg-<color> to color the background of an element.

Shadows

There are two box-shadow options for your elements provided: shadowshadow-lg

Hover effects

use hover-up or hover-shadow for hover effects.

Cursors

use .cursor-default, .cursor-move, .cursor-pointer,