ESSENTIALS
Essential classes (assets/css/essentials.css) that helps you to quick position elements without writing new css rules.
| Class | Description | Class | Description | |
|---|---|---|---|---|
.size-11 |
Force font size to 11px (text, icons) | .weight-300 |
Force font weight to 300 (text) | |
.size-12 |
Force font size to 12px (text, icons) | .weight-400 |
Force font weight to 400 (text) | |
.size-13 |
Force font size to 13px (text, icons) | .weight-500 |
Force font weight to 500 (text) | |
.size-14 |
Force font size to 14px (text, icons) | .weight-600 |
Force font weight to 600 (text) | |
.size-15 |
Force font size to 15px (text, icons) | .weight-700 |
Force font weight to 700 (text) | |
.size-16 |
Force font size to 16px (text, icons) | .font-lato |
Force font family: 'Lato', Arial, sans-serif | |
.size-17 |
Force font size to 17px (text, icons) | .padding-0 |
Force padding to 0px | |
.size-18 |
Force font size to 18px (text, icons) | .padding-3 |
Force padding to 3px | |
.size-19 |
Force font size to 19px (text, icons) | .padding-6 |
Force padding to 6px | |
.size-20 |
Force font size to 20px (text, icons) | .padding-8 |
Force padding to 8px | |
.size-26 |
Force font size to 26px (text, icons) | .padding-10 |
Force padding to 10px | |
.size-30 |
Force font size to 30px (text, icons) | .padding-0 |
Force padding to 0px | |
.size-40 |
Force font size to 40px (text, icons) | .padding-15 |
Force padding to 15px | |
.size-50 |
Force font size to 50px (text, icons) | .padding-20 |
Force padding to 20px | |
.size-60 |
Force font size to 60px (text, icons) | .padding-30 |
Force padding to 30px | |
.size-70 |
Force font size to 70px (text, icons) | .padding-40 |
Force padding to 40px | |
.size-80 |
Force font size to 80px (text, icons) | .padding-50 |
Force padding to 50px | |
.size-90 |
Force font size to 90px (text, icons) | .padding-60 |
Force padding to 60px | |
.size-100 |
Force font size to 100px (text, icons) | .padding-70 |
Force padding to 70px | |
.margin-top-0 |
Force margin top to 0px | .margin-bottom-0 |
Force margin bottom to 0px | |
.margin-top-3 |
Force margin top to 3px | .margin-bottom-3 |
Force margin bottom to 3px | |
.margin-top-6 |
Force margin top to 6px | .margin-bottom-6 |
Force margin bottom to 6px | |
.margin-top-8 |
Force margin top to 8px | .margin-bottom-8 |
Force margin bottom to 8px | |
.margin-top-10 |
Force margin top to 10px | .margin-bottom-10 |
Force margin bottom to 10px | |
.margin-top-20 |
Force margin top to 20px | .margin-bottom-20 |
Force margin bottom to 20px | |
.margin-top-30 |
Force margin top to 30px | .margin-bottom-30 |
Force margin bottom to 30px | |
.margin-top-40 |
Force margin top to 40px | .margin-bottom-40 |
Force margin bottom to 40px | |
.margin-top-50 |
Force margin top to 50px | .margin-bottom-50 |
Force margin bottom to 50px | |
.margin-top-60 |
Force margin top to 60px | .margin-bottom-60 |
Force margin bottom to 60px | |
.margin-top-80 |
Force margin top to 80px | .margin-bottom-80 |
Force margin bottom to 80px | |
.margin-top-100 |
Force margin top to 100px | .margin-bottom-100 |
Force margin bottom to 100px | |
.margin-top-130 |
Force margin top to 130px | .margin-bottom-130 |
Force margin bottom to 130px | |
.margin-top-150 |
Force margin top to 150px | .margin-bottom-150 |
Force margin bottom to 150px | |
.margin-top-180 |
Force margin top to 180px | .margin-bottom-180 |
Force margin bottom to 180px | |
.margin-top-200 |
Force margin top to 200px | .margin-bottom-200 |
Force margin bottom to 200px | |
.margin-left-0 |
Force margin left to 0px | .margin-right-0 |
Force margin right to 0px | |
.margin-left-3 |
Force margin left to 3px | .margin-right-3 |
Force margin right to 3px | |
.margin-left-6 |
Force margin left to 6px | .margin-right-6 |
Force margin right to 6px | |
.margin-left-8 |
Force margin left to 8px | .margin-right-8 |
Force margin right to 8px | |
.margin-left-10 |
Force margin left to 10px | .margin-right-10 |
Force margin right to 10px | |
.margin-left-20 |
Force margin left to 20px | .margin-right-20 |
Force margin right to 20px | |
.margin-left-30 |
Force margin left to 30px | .margin-right-30 |
Force margin right to 30px | |
.margin-left-40 |
Force margin left to 40px | .margin-right-40 |
Force margin right to 40px | |
.margin-left-50 |
Force margin left to 50px | .margin-right-50 |
Force margin right to 50px | |
.margin-left-60 |
Force margin left to 60px | .margin-right-60 |
Force margin right to 60px | |
.margin-left-80 |
Force margin left to 80px | .margin-right-80 |
Force margin right to 80px | |
.margin-left-100 |
Force margin left to 100px | .margin-right-100 |
Force margin right to 100px | |
.margin-left-130 |
Force margin left to 130px | .margin-right-130 |
Force margin right to 130px | |
.margin-left-150 |
Force margin left to 150px | .margin-right-150 |
Force margin right to 150px | |
.margin-left-180 |
Force margin left to 180px | .margin-right-180 |
Force margin right to 180px | |
.margin-left-200 |
Force margin left to 200px | .margin-right-200 |
Force margin right to 200px |
| Class | Description | Class | Description |
|---|---|---|---|
.height-10 |
Force height to 10px | .width-10 |
Force width to 10px |
.height-20 |
Force height to 20px | .width-20 |
Force width to 20px |
.height-30 |
Force height to 30px | .width-30 |
Force width to 30px |
.height-50 |
Force height to 50px | .width-50 |
Force width to 50px |
.height-100 |
Force height to 100px | .width-100 |
Force width to 100px |
.height-150 |
Force height to 150px | .width-150 |
Force width to 150px |
.height-200 |
Force height to 200px | .width-200 |
Force width to 200px |
.height-250 |
Force height to 250px | .width-250 |
Force width to 250px |
.height-250 |
Force height to 250px | .width-250 |
Force width to 250px |
.height-300 |
Force height to 300px | .width-300 |
Force width to 300px |
.height-350 |
Force height to 350px | .width-350 |
Force width to 350px |
.height-400 |
Force height to 400px | .width-400 |
Force width to 400px |
.height-450 |
Force height to 450px | .width-450 |
Force width to 450px |
.height-500 |
Force height to 500px | .width-500 |
Force width to 500px |
.height-550 |
Force height to 550px | .width-550 |
Force width to 550px |
.height-600 |
Force height to 600px | .width-600 |
Force width to 600px |
.height-650 |
Force height to 650px | .width-650 |
Force width to 650px |
.height-700 |
Force height to 700px | .width-700 |
Force width to 700px |
.height-750 |
Force height to 750px | .width-750 |
Force width to 750px |
.height-800 |
Force height to 800px | .width-800 |
Force width to 800px |
You might also need to use .block together with one of above classes.
|
|||
| Class | Description | Class | Description |
|---|---|---|---|
.nopadding |
Force no paddings | .nomargin |
Force no margins |
.nopadding-left |
Force no padding left | .nomargin-left |
Force no nomargin left |
.nopadding-right |
Force no padding right | .nomargin-left |
Force no nomargin left |
.nopadding-top |
Force no padding top | .nomargin-left |
Force no nomargin left |
.nopadding-bottom |
Force no padding bottom | .nomargin-left |
Force no nomargin left |
.noborder |
Force no border | .lowercase |
Force text to lowercase |
.noradius |
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 |
.softhide |
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.nopadding |
<section class="nopadding"> means no section padding top and no section padding bottom |
section.nopadding-bottom |
<section class="nopadding-bottom"> means no section padding bottom |
section.nopadding-top |
<section class="nopadding-top"> 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. |