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

Smarty Material Design

power of google material

MATERIAL : DIALOGS

The Material Design Lite (MDL) dialog component allows for verification of user actions, simple data input, and alerts to provide extra information to users.

Note: Dialogs use the HTML <dialog> element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own. There is no polyfill included with MDL.

Smarty note: Desktop browsers may support this feature but mobile browsers do not! We recommend you bootstrap modals. In the future, all browsers may support <dialog> but for now, please, avoid using it.

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

Allow data collection?

Allowing us to collect data will let us get you the information you want faster.

<!-- Basic Chip -->
<span class="mdl-chip">
    <span class="mdl-chip__text">Basic Chip</span>
</span>

<!-- Deletable Chip -->
<span class="mdl-chip mdl-chip--deletable">
    <span class="mdl-chip__text">Deletable Chip</span>
    <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
</span>

<!-- Button Chip -->
<button type="button" class="mdl-chip">
    <span class="mdl-chip__text">Button Chip</span>
</button>

BLOCKS

MDL class Effect Remarks
mdl-dialog Defines the container of the dialog component. Required on dialog container.

ELEMENTS

MDL class Effect Remarks
mdl-dialog__title Defines the title container in the dialog. Optional on title container.
mdl-dialog__content Defines the content container of the dialog. Required on content container.
mdl-dialog__actions Defines the actions container in the dialog. Required on action container.

MODIFIERS

MDL class Effect Remarks
mdl-dialog__actions--full-width Modifies the actions to each take the full width of the container. This makes each take their own line. Optional on action container.