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
.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.