Utilities

Use Leaf's custom utility classes such as spacing, shadows and text class modifiers.

Bootstrap 4 documentation
Margins

Use these classes to add increments of 50 pixels of margins in each direction (top, right, bottom, left).

The maximum value is 600.

.mt-50
.mr-100
.mb-250
.ml-600

Change the hex color for each variable to the color palette that you desire.

Paddings

Use these classes to add increments of 50 pixels of padding in each direction (top, right, bottom, left).

The maximum value is 600.

.pt-50
.pr-100
.pb-250
.pl-600

Change the hex color for each variable to the color palette that you desire.

Negative margins

Use these classes to add increments of minus 50 pixels of margin in each direction (top, right, bottom, left).

The maximum value is 600.

.mt--50
.mr--100
.mb--250
.ml--600

Change the hex color for each variable to the color palette that you desire.

Change increment

Of course you can change the increment value by modifying our custom utility Sass file located at scss/leaf/utilities/_spacing.scss.

Change the variable $mp-increment (stands for margin & padding increment) to update the value of multiplication. If you change it to 20 the classes will be .mt-20, mt-40, mb-60, pb-40.

To change the limit of incremented classes update the variable $nr-increments. By default it is 13.

$mp-increment: 50;
$nr-increments: 13;
Custom shadow classes

Use the following classes to add custom Pixel made shadows to your elements:

                                                    
<div class="d-flex">
    <div style="width: 50px; height: 50px; background: #ececec" class="shadow-pixel mr-3"></div>
    <div style="width: 50px; height: 50px; background: #ececec" class="shadow-soft"></div>
</div>
Decorations

Use the following custom classes to apply underline or strikethrough to your text:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem perferendis odio omnis repellendus saepe voluptatem obcaecati nihil similique natus eaque, facere ullam esse numquam ut sapiente, fuga possimus explicabo iusto.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem perferendis odio omnis repellendus saepe voluptatem obcaecati nihil similique natus eaque, facere ullam esse numquam ut sapiente, fuga possimus explicabo iusto.

                                                        
<p>Lorem ipsum dolor, <span class="text-underline">sit amet consectetur adipisicing elit</span>. Exercitationem perferendis odio omnis repellendus saepe voluptatem obcaecati nihil similique natus eaque, facere ullam esse numquam ut sapiente, fuga possimus explicabo iusto.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem perferendis odio omnis <span class="text-through">repellendus saepe voluptatem obcaecati nihil similique</span> natus eaque, facere ullam esse numquam ut sapiente, fuga possimus explicabo iusto.</p>
Opacity

Use the following opacity modifier classes .opacity-* (eg. .opacity-3) to change the opacity of the element from 0 to 1.

                                                        
<div class="d-flex">
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-0 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-1 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-2 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-3 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-4 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-5 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-6 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-7 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-8 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-9 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-10"></div>
</div>
Z-index

Use the following z-index modifier classes .z-* (eg. .z-3) to change the z-index of the element from 0 to 10.

                                                        
<div class="d-flex">
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-0 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-1 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-2 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-3 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-4 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-5 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-6 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-7 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-8 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-9 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-10"></div>
</div>
Overflow

Use .overflow-visible and .overflow-hidden to allow or hide overflow from an element.

Absolute center positioning

Use .center-vertical-absolute and .center-horizontal-absolute to center elements. Note that this makes the element positioned absolutely.

.center-vertical-absolute,
.center-horizontal-absolute {
    position: absolute;
}

.center-vertical-absolute {
    top: 50%;
    transform: translateY(-50%);
}

.center-horizontal-absolute {
    left: 50%;
    transform: translateX(-50%);
}
Fixed height & width

Use sizing classes .w-* and .h-* (eg. .fw-200, fh-500) to modify the width of the element by 200px or height by 500px.

                                                        
<div class="d-flex">
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-0 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-1 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-2 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-3 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-4 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-5 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-6 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-7 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-8 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-9 mr-3"></div>
    <div style="width: 50px; height: 50px;" class="bg-primary opacity-10"></div>
</div>
Hover animation

Use the following classes .animate-up-*, .animate-down-* (eg. .animate-up-3) to move the element away from its original position when it is being hovered. You can use from .animate-*-1 to .animate-*-5.

.animate-up-5
.animate-right-1
.animate-down-2
.animate-left-3
                                                        
    <div style="height: 50px;" class="mr-3 bg-soft animate-up-5 p-3">.animate-up-5</div>
    <div style="height: 50px;" class="mr-3 bg-soft animate-right-1 p-3">.animate-right-1</div>
    <div style="height: 50px;" class="mr-3 bg-soft animate-down-2 p-3">.animate-down-2</div>
    <div style="height: 50px;" class="mr-3 bg-soft animate-left-3 p-3">.animate-left-3</div>
Hover animation child

Use .animate-hover class on a parent element and the .animate-*-* classes on the child element to animate it and not the parent.

.animate-left-4
.animate-right-4 
                                                        
    <div style="height: 50px;" class="mr-3 bg-soft animate-hover p-3"><i class="fas fa-chevron-left mr-3 pl-2 animate-left-4"></i>.animate-left-4</div>
    <div style="height: 50px;" class="mr-3 bg-soft animate-hover p-3">.animate-right-4<i class="fas fa-chevron-right mr-3 pl-2 animate-right-4"></i></div>
Floating animation

Use .floating-sm, .floating-md, .floating-lg on any element to use a constant floating animation.

.floating-sm
.floating-md
.floating-lg
                                                        
    <div style="height: 50px;" class="mr-3 bg-primary text-white floating-sm p-3">.floating-sm</div>
    <div style="height: 50px;" class="mr-3 bg-secondary text-white floating-md p-3">.floating-md</div>
    <div style="height: 50px;" class="mr-3 bg-tertiary text-white floating-lg p-3">.floating-lg</div>