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

The Material Design Lite (MDL) grid component is a simplified method for laying out content for multiple screen sizes. It reduces the usual coding burden required to correctly display blocks of content in a variety of display conditions.

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
1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
6
4
2
6 (8 tablet)
4 (6 tablet)
2 (4 phone)
Show Code 
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
  <div class="mdl-cell mdl-cell--1-col">1</div>
</div>

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col">4</div>
  <div class="mdl-cell mdl-cell--4-col">4</div>
  <div class="mdl-cell mdl-cell--4-col">4</div>
</div>

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col">6</div>
  <div class="mdl-cell mdl-cell--4-col">4</div>
  <div class="mdl-cell mdl-cell--2-col">2</div>
</div>

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet">6 (8 tablet)</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet">4 (6 tablet)</div>
  <div class="mdl-cell mdl-cell--2-col mdl-cell--4-col-phone">2 (4 phone)</div>
</div>
MDL class Effect Remarks
mdl-grid Defines a container as an MDL grid component Required on "outer" div element
mdl-cell Defines a container as an MDL cell Required on "inner" div elements
mdl-grid--no-spacing Modifies the grid cells to have no margin between them. Optional on grid container.
mdl-cell--N-col Sets the column size for the cell to N N is 1-12 inclusive, defaults to 4; optional on "inner" div elements
mdl-cell--N-col-desktop Sets the column size for the cell to N in desktop mode only N is 1-12 inclusive; optional on "inner" div elements
mdl-cell--N-col-tablet Sets the column size for the cell to N in tablet mode only N is 1-8 inclusive; optional on "inner" div elements
mdl-cell--N-col-phone Sets the column size for the cell to N in phone mode only N is 1-4 inclusive; optional on "inner" div elements
mdl-cell--N-offset Adds N columns of whitespace before the cell N is 1-11 inclusive; optional on "inner" div elements
mdl-cell--N-offset-desktop Adds N columns of whitespace before the cell in desktop mode N is 1-11 inclusive; optional on "inner" div elements
mdl-cell--N-offset-tablet Adds N columns of whitespace before the cell in tablet mode N is 1-7 inclusive; optional on "inner" div elements
mdl-cell--N-offset-phone Adds N columns of whitespace before the cell in phone mode N is 1-3 inclusive; optional on "inner" div elements
mdl-cell--order-N Reorders cell to position N N is 1-12 inclusive; optional on "inner" div elements
mdl-cell--order-N-desktop Reorders cell to position N when in desktop mode N is 1-12 inclusive; optional on "inner" div elements
mdl-cell--order-N-tablet Reorders cell to position N when in tablet mode N is 1-12 inclusive; optional on "inner" div elements
mdl-cell--order-N-phone Reorders cell to position N when in phone mode N is 1-12 inclusive; optional on "inner" div elements
mdl-cell--hide-desktop Hides the cell when in desktop mode Optional on "inner" div elements
mdl-cell--hide-tablet Hides the cell when in tablet mode Optional on "inner" div elements
mdl-cell--hide-phone Hides the cell when in phone mode Optional on "inner" div elements
mdl-cell--stretch Stretches the cell vertically to fill the parent Default; optional on "inner" div elements
mdl-cell--top Aligns the cell to the top of the parent Optional on "inner" div elements
mdl-cell--middle Aligns the cell to the middle of the parent Optional on "inner" div elements
mdl-cell--bottom Aligns the cell to the bottom of the parent Optional on "inner" div elements