WHY SMARTY?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

CONTACT INFO
  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

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.