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.

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

Smarty Material Design

power of google material

EXPLORE COMPONENTS

MATERIAL COMPONENTS

MATERIAL : UTILS

Material Design classes you may need.

HOW TO ENABLE MATERIAL 
1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


2. Add .enable-materialdesign class to body:
<body class="smoothscroll enable-animation enable-materialdesign">


NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 
(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:
Click to create your material design color

Credits: MDL official
MDL class Effect Remarks
mdl-shadow--2dp 2DP shadow You can add this class to any element
mdl-shadow--3dp 3DP shadow You can add this class to any element
mdl-shadow--4dp 4DP shadow You can add this class to any element
mdl-shadow--6dp 6DP shadow You can add this class to any element
mdl-shadow--8dp 8DP shadow You can add this class to any element
mdl-shadow--16dp 16DP shadow You can add this class to any element
mdl-shadow--24dp 24DP shadow You can add this class to any element
mdl-typography--display-4 112px text size Used for h1...h6, texts
mdl-typography--display-4-color-contrast 112px text size Used for h1...h6, texts - opacity 0.54
mdl-typography--display-3 56px text size Used for h1...h6, texts
mdl-typography--display-3-color-contrast 56px text size Used for h1...h6, texts - opacity 0.54
mdl-typography--display-2 45px text size Used for h1...h6, texts
mdl-typography--display-2-color-contrast 45px text size Used for h1...h6, texts - opacity 0.54
mdl-typography--display-1 34px text size Used for h1...h6, texts
mdl-typography--display-1-color-contrast 34px text size Used for h1...h6, texts - opacity 0.54
mdl-typography--headline 24px text size Text headline
mdl-typography--headline-color-contrast 24px text size Text headline - opacity 0.84
mdl-typography--title 20px text size Text title - opacity 0.84
mdl-typography--title-color-contrast 20px text size Text title - opacity 0.84
mdl-typography--subhead 16px text size Text subhead - opacity 0.84
mdl-typography--subhead-color-contrast 16px text size Text subhead - opacity 0.84
mdl-typography--text-left - Text align left
mdl-typography--text-right - Text align right
mdl-typography--text-center - Text align center
mdl-typography--text-justify - Text justify
mdl-typography--text-lowercase - Text lowercase
mdl-typography--text-uppercase - Text uppercase