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 : BADGES

The Material Design Lite (MDL) badge component is an onscreen notification element. A badge consists of a small circle, typically containing a number or other characters, that appears in proximity to another object. A badge can be both a notifier that there are additional items associated with an object and an indicator of how many items there are.

You can use a badge to unobtrusively draw the user's attention to items they might not otherwise notice, or to emphasize that items may need their attention.

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
account_box

Number
account_box

Icon
Show Code 
<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap fs-40" data-badge="1">account_box</div>

<!-- Icon badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap fs-40" data-badge="♥">account_box</div>
Inbox
Mood
Show Code 
<!-- Number badge -->
<span class="mdl-badge" data-badge="4">Inbox</span>

<!-- Icon badge -->
<span class="mdl-badge" data-badge="♥">Mood</span>
1. This badge has no background color.
2. This link is followed by a badge.
3. This link contains a badge.
Show Code 
1.  <span class="mdl-badge mdl-badge--no-background" data-badge="123">This badge has no background color.</span>


2.  <a href="#">This link is followed by a badge.</a>
<span class="mdl-badge" data-badge="12"></span>


3.  <a href="#" class="mdl-badge" data-badge="7">This link contains a badge.</a>
MDL class Effect Remarks
mdl-badge Defines badge as an MDL component Required on span or link
mdl-badge--no-background Applies open-circle effect to badge Optional
mdl-badge--overlap Make the badge overlap with its container Optional
data-badge="value" Assigns string value to badge Not a class, but a separate attribute; required on span or link