ESSENTIALS
Essential classes (assets/css/essentials.css) that helps you to quick position elements without writing new css rules.
| Class | Description | Class | Description | |
|---|---|---|---|---|
.fs-11 |
Force font size to 11px (text, icons) | .fw-300 |
Force font weight to 300 (text) | |
.fs-12 |
Force font size to 12px (text, icons) | .fw-400 |
Force font weight to 400 (text) | |
.fs-13 |
Force font size to 13px (text, icons) | .fw-500 |
Force font weight to 500 (text) | |
.fs-14 |
Force font size to 14px (text, icons) | .fw-600 |
Force font weight to 600 (text) | |
.fs-15 |
Force font size to 15px (text, icons) | .fw-700 |
Force font weight to 700 (text) | |
.fs-16 |
Force font size to 16px (text, icons) | .font-lato |
Force font family: 'Lato', Arial, sans-serif | |
.fs-17 |
Force font size to 17px (text, icons) | .p-0 |
Force padding to 0px | |
.fs-18 |
Force font size to 18px (text, icons) | .p-3 |
Force padding to 3px | |
.fs-19 |
Force font size to 19px (text, icons) | .p-6 |
Force padding to 6px | |
.fs-20 |
Force font size to 20px (text, icons) | .p-8 |
Force padding to 8px | |
.fs-26 |
Force font size to 26px (text, icons) | .p-10 |
Force padding to 10px | |
.fs-30 |
Force font size to 30px (text, icons) | .p-0 |
Force padding to 0px | |
.fs-40 |
Force font size to 40px (text, icons) | .p-15 |
Force padding to 15px | |
.fs-50 |
Force font size to 50px (text, icons) | .p-20 |
Force padding to 20px | |
.fs-60 |
Force font size to 60px (text, icons) | .p-30 |
Force padding to 30px | |
.fs-70 |
Force font size to 70px (text, icons) | .p-40 |
Force padding to 40px | |
.fs-80 |
Force font size to 80px (text, icons) | .p-50 |
Force padding to 50px | |
.fs-90 |
Force font size to 90px (text, icons) | .p-60 |
Force padding to 60px | |
.fs-100 |
Force font size to 100px (text, icons) | .p-70 |
Force padding to 70px | |
.mt-0 |
Force margin top to 0px | .mb-0 |
Force margin bottom to 0px | |
.mt-3 |
Force margin top to 3px | .mb-3 |
Force margin bottom to 3px | |
.mt-6 |
Force margin top to 6px | .mb-6 |
Force margin bottom to 6px | |
.mt-8 |
Force margin top to 8px | .mb-8 |
Force margin bottom to 8px | |
.mt-10 |
Force margin top to 10px | .mb-10 |
Force margin bottom to 10px | |
.mt-20 |
Force margin top to 20px | .mb-20 |
Force margin bottom to 20px | |
.mt-30 |
Force margin top to 30px | .mb-30 |
Force margin bottom to 30px | |
.mt-40 |
Force margin top to 40px | .mb-40 |
Force margin bottom to 40px | |
.mt-50 |
Force margin top to 50px | .mb-50 |
Force margin bottom to 50px | |
.mt-60 |
Force margin top to 60px | .mb-60 |
Force margin bottom to 60px | |
.mt-80 |
Force margin top to 80px | .mb-80 |
Force margin bottom to 80px | |
.mt-100 |
Force margin top to 100px | .mb-100 |
Force margin bottom to 100px | |
.mt-130 |
Force margin top to 130px | .mb-130 |
Force margin bottom to 130px | |
.mt-150 |
Force margin top to 150px | .mb-150 |
Force margin bottom to 150px | |
.mt-180 |
Force margin top to 180px | .mb-180 |
Force margin bottom to 180px | |
.mt-200 |
Force margin top to 200px | .mb-200 |
Force margin bottom to 200px | |
.ml-0 |
Force margin left to 0px | .mr-0 |
Force margin right to 0px | |
.ml-3 |
Force margin left to 3px | .mr-3 |
Force margin right to 3px | |
.ml-6 |
Force margin left to 6px | .mr-6 |
Force margin right to 6px | |
.ml-8 |
Force margin left to 8px | .mr-8 |
Force margin right to 8px | |
.ml-10 |
Force margin left to 10px | .mr-10 |
Force margin right to 10px | |
.ml-20 |
Force margin left to 20px | .mr-20 |
Force margin right to 20px | |
.ml-30 |
Force margin left to 30px | .mr-30 |
Force margin right to 30px | |
.ml-40 |
Force margin left to 40px | .mr-40 |
Force margin right to 40px | |
.ml-50 |
Force margin left to 50px | .mr-50 |
Force margin right to 50px | |
.ml-60 |
Force margin left to 60px | .mr-60 |
Force margin right to 60px | |
.ml-80 |
Force margin left to 80px | .mr-80 |
Force margin right to 80px | |
.ml-100 |
Force margin left to 100px | .mr-100 |
Force margin right to 100px | |
.ml-130 |
Force margin left to 130px | .mr-130 |
Force margin right to 130px | |
.ml-150 |
Force margin left to 150px | .mr-150 |
Force margin right to 150px | |
.ml-180 |
Force margin left to 180px | .mr-180 |
Force margin right to 180px | |
.ml-200 |
Force margin left to 200px | .mr-200 |
Force margin right to 200px |
| Class | Description | Class | Description |
|---|---|---|---|
.h-10 |
Force height to 10px | .fw-10 |
Force width to 10px |
.h-20 |
Force height to 20px | .fw-20 |
Force width to 20px |
.h-30 |
Force height to 30px | .fw-30 |
Force width to 30px |
.h-50 |
Force height to 50px | .fw-50 |
Force width to 50px |
.h-100 |
Force height to 100px | .fw-100 |
Force width to 100px |
.h-150 |
Force height to 150px | .fw-150 |
Force width to 150px |
.h-200 |
Force height to 200px | .fw-200 |
Force width to 200px |
.h-250 |
Force height to 250px | .fw-250 |
Force width to 250px |
.h-250 |
Force height to 250px | .fw-250 |
Force width to 250px |
.h-300 |
Force height to 300px | .fw-300 |
Force width to 300px |
.h-350 |
Force height to 350px | .fw-350 |
Force width to 350px |
.h-400 |
Force height to 400px | .fw-400 |
Force width to 400px |
.h-450 |
Force height to 450px | .fw-450 |
Force width to 450px |
.h-500 |
Force height to 500px | .fw-500 |
Force width to 500px |
.h-550 |
Force height to 550px | .fw-550 |
Force width to 550px |
.h-600 |
Force height to 600px | .fw-600 |
Force width to 600px |
.h-650 |
Force height to 650px | .fw-650 |
Force width to 650px |
.h-700 |
Force height to 700px | .fw-700 |
Force width to 700px |
.h-750 |
Force height to 750px | .fw-750 |
Force width to 750px |
.h-800 |
Force height to 800px | .fw-800 |
Force width to 800px |
You might also need to use .block together with one of above classes.
|
|||
| Class | Description | Class | Description |
|---|---|---|---|
.p-0 |
Force no paddings | .m-0 |
Force no margins |
.pl-0 |
Force no padding left | .ml-0 |
Force no m-0 left |
.pr-0 |
Force no padding right | .ml-0 |
Force no m-0 left |
.pt-0 |
Force no padding top | .ml-0 |
Force no m-0 left |
.pb-0 |
Force no padding bottom | .ml-0 |
Force no m-0 left |
.b-0 |
Force no border | .lowercase |
Force text to lowercase |
.rad-0 |
Force to radius 0 | .uppercase |
Force text to uppercase |
.italic |
Force text to italic | .pointer |
Force cursor pointer (link) |
.block |
Force display to block | .bold |
Force text bold |
.fullwidth |
Force width 100% | .justify |
Force text to justify |
.halfwidth |
Force width 50% | .nofloat |
Force float:none |
.hide |
diplay:none , without !important | .no-text-underline |
No underline (link) |
.border-bottom-dashed |
dotted bottom border | .border-bottom-dotted |
dashed bottom border |
| Class | Description | Class | Description |
|---|---|---|---|
.letter-spacing-0 |
Letter spacing 0px | .overlay.dark-0 |
0% opactity - used for parallax or slider |
.letter-spacing-1 |
Letter spacing 0.1em | .overlay.dark-1 |
10% opactity - used for parallax or slider |
.letter-spacing-2 |
Letter spacing 0.2em | .overlay.dark-2 |
20% opactity - used for parallax or slider |
.letter-spacing-3 |
Letter spacing 0.3em | .overlay.dark-3 |
30% opactity - used for parallax or slider |
.letter-spacing-4 |
Letter spacing 0.4em | .overlay.dark-4 |
40% opactity - used for parallax or slider |
.letter-spacing-5 |
Letter spacing 0.5em | .overlay.dark-5 |
50% opactity - used for parallax or slider |
.letter-spacing-6 |
Letter spacing 0.6em | .overlay.dark-6 |
60% opactity - used for parallax or slider |
.letter-spacing-7 |
Letter spacing 0.7em | .overlay.dark-7 |
70% opactity - used for parallax or slider |
.letter-spacing-8 |
Letter spacing 0.8em | .overlay.dark-8 |
80% opactity - used for parallax or slider |
.letter-spacing-9 |
Letter spacing 0.9em | .overlay.dark-9 |
90% opactity - used for parallax or slider |
.letter-spacing-10 |
Letter spacing 1em | .overlay.dark-10 |
100% opactity - used for parallax or slider |
Overlay usage example: <span class="overlay dark-5"><span>
|
|||
| Class | Description |
|---|---|
section.alternate |
<section class="alternate"> means a slightly darker section. |
section.dark |
<section class="dark"> means the section will be dark: #212121 |
section.p-0 |
<section class="p-0"> means no section padding top and no section padding bottom |
section.pb-0 |
<section class="pb-0"> means no section padding bottom |
section.pt-0 |
<section class="pt-0"> means no section padding top |
.txt-success |
Lorem ipsum dolor sit amet. |
.txt-danger |
Lorem ipsum dolor sit amet. |
.txt-warning |
Lorem ipsum dolor sit amet. |
.txt-info |
Lorem ipsum dolor sit amet. |