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

Checkbox: The Material Design Lite (MDL) checkbox component is an enhanced version of the standard HTML <input type="checkbox"> element. A checkbox consists of a small square and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it. Checkboxes typically, but not necessarily, appear in groups, and can be selected and deselected individually. The MDL checkbox component allows you to add display and click effects.

Radio: The Material Design Lite (MDL) radio component is an enhanced version of the standard HTML <input type="radio">, or "radio button" element. A radio button consists of a small circle and, typically, text that clearly communicates a condition that will be set when the user clicks or touches it.

Icon Toggle: The Material Design Lite (MDL) icon-toggle component is an enhanced version of the standard HTML <input type="checkbox"> element. An icon-toggle consists of a user defined icon that indicates, by visual highlighting, a binary condition that will be set or unset when the user clicks or touches it. Like checkboxes, icon-toggles may appear individually or in groups, and can be selected and deselected individually.

Switch: The Material Design Lite (MDL) switch component is an enhanced version of the standard HTML <input type="checkbox"> element. A switch consists of a short horizontal "track" with a prominent circular state indicator and, typically, text that clearly communicates a binary condition that will be set or unset when the user clicks or touches it.

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
Show Code 
<!-- Check on -->
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
  <span class="mdl-checkbox__label">Checkbox</span>
</label>

<!-- Check off -->
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
  <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
  <span class="mdl-checkbox__label">Checkbox</span>
</label>
Show Code 
<!-- Radio on	 -->
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
  <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
  <span class="mdl-radio__label">First</span>
</label>

<!-- Radio off -->
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
  <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
  <span class="mdl-radio__label">Second</span>
</label>
Show Code 
<!-- Icon on -->
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
  <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
  <i class="mdl-icon-toggle__label material-icons">format_bold</i>
</label>

<!-- Icon off	 -->
<label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-2">
  <input type="checkbox" id="icon-toggle-2" class="mdl-icon-toggle__input">
  <i class="mdl-icon-toggle__label material-icons">format_italic</i>
</label>
Show Code 
<!-- Switch on -->
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
  <input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
  <span class="mdl-switch__label"></span>
</label>

<!-- Switch off -->
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-2">
  <input type="checkbox" id="switch-2" class="mdl-switch__input">
  <span class="mdl-switch__label"></span>
</label>

CONFIGURATION OPTIONS

CHECKBOX

MDL class Effect Remarks
mdl-checkbox Defines label as an MDL component Required on label element
mdl-js-checkbox Assigns basic MDL behavior to label Required on label element
mdl-checkbox__input Applies basic MDL behavior to checkbox Required on input element (checkbox)
mdl-checkbox__label Applies basic MDL behavior to caption Required on span element (caption)
mdl-js-ripple-effect Applies ripple click effect Optional; goes on label element, not input element (checkbox)

RADIO

MDL class Effect Remarks
mdl-radio Defines label as an MDL component Required on label element
mdl-js-radio Assigns basic MDL behavior to label Required on label element
mdl-radio__button Applies basic MDL behavior to radio Required on input element (radio button)
mdl-radio__label Applies basic MDL behavior to caption Required on span element (caption)
mdl-js-ripple-effect Applies ripple click effect Optional; goes on label element, not input element (radio button)

ICON TOGGLE

MDL class Effect Remarks
mdl-icon-toggle Defines label as an MDL component Required on label element
mdl-js-icon-toggle Assigns basic MDL behavior to label Required on label element
mdl-icon-toggle__input Applies basic MDL behavior to icon-toggle Required on input element (icon-toggle)
mdl-icon-toggle__label Applies basic MDL behavior to caption Required on i element (icon)
mdl-js-ripple-effect Applies ripple click effect Optional; goes on label element, not input element (icon-toggle)

SWITCH

MDL class Effect Remarks
mdl-switch Defines label as an MDL component Required on label element
mdl-js-switch Assigns basic MDL behavior to label Required on label element
mdl-switch__input Applies basic MDL behavior to switch Required on input element (switch)
mdl-switch__label Applies basic MDL behavior to caption Required on span element (caption)
mdl-js-ripple-effect Applies ripple click effect Optional; goes on label element, not input element (switch)