Colors

Colors are variables defined in the :root pseudo-element (line 69). You can define a new color inside this element like this :

--mycolor: #ff0000;

Then define a new class and use it like this :

.myColor { color: var(--mycolor) }

Use the following classes to use the colors:

Positionning

This template uses Flexbox for positionning:

Flex

To position your div, first of all, add the flex class to your parent div. Your code should look like this :

<div class="flex"> <!--Content--> </div>
.flexCenter

Center a div inside another div. Your code should be like this:

<div class="flex flexCenter">
    <div><!--Content--></div>
</div>
.flexColumn

Instead of having a flow left to right, your divs have a flow top to bottom. Your code will be :

<div class="flex flexColumn">
    <div><!--Content--></div>
</div>
.flexStart

Aligns all the child elements to the left:

<div class="flex flexStart">
    <div><!--Content--></div>
</div>

Combined to .flexColumn, it aligns all the child elements to the top:

<div class="flex flexColumn flexStart">
    <div><!--Content--></div>
</div>
.flexEnd

Aligns all the child elements to the right:

<div class="flex flexEnd">
    <div><!--Content--></div>
</div>

Combined to .flexColumn, aligns all the child elements to the bottom:

<div class="flex flexColumn flexEnd">
    <div><!--Content--></div>
</div>
.flexWrap

By default, the elements inside a flex element will never wrap, it means that it will always remain on one line. To avoid that, you can use the .flexWrap class:

<div class="flex flexWrap">
    <div><!--Content--></div>
</div>

More information here : flex.wrap

.flexVerticalAlign

Vertically center any content:

<div class="flex flexVerticalAlign">
    <div>Content</div>
</div>
.textCenter

Use this class to center a text inside a div:

<div class="text-center">
    <p>Your text centered</p>
</div>

Sections

Use this classes to add padding to your sections :

Margin

Use this classes to add margin. You can change the number from 0 to 80 to change the size of the margin.

Padding

Use this classes to add padding. You can change the number from 0 to 80 to change the size of the padding.

Icons

The icons used on this Template are from Line Icons. If you want to use more icons, please visit : https://lineicons.com/icons/. Here is an example of the different styles :