MATERIALIZE CSS I

¿QUÉ ES MATERIAL DESIGN?

 Creado y diseñado por Google, Material Design es un lenguaje de diseño

que combina los principios clásicos del diseño exitoso junto con la
innovación y la tecnología. El objetivo de Google consiste en desarrollar
un sistema de diseño que permite una experiencia de usuario unificada
a través de todos sus productos en cualquier plataforma.
SISTEMA DE GRILLAS
VIDEOS E IMÁGENES RESPONSIVE
SOMBRAS EN MATERIAL DESIGN

responsive-img

responsive-img circle

video-container

z-depth-1
TABLAS

class="bordered"

class="striped"

class="highlight"

class="centered"

class="responsive-table"
BADGES
BOTONES

 <a class="waves-effect waves-light btn">button</a>

 <a class="waves-effect waves-light btn"><i
class="material-icons left">cloud</i>button</a>
 <a class="waves-effect waves-light btn"><i
class="material-icons right">cloud</i>button</a>
BOTONES FLAT

 <a class="btn-floating btn-large waves-effect waves-

light red"><i class="material-icons">add</i></a>
TARJETAS

 Tarjeta básica
 Tarjeta con imagen
 Tarjeta reveal
 Tarjeta pequeña
 Tarjeta panel
TARJETA BÁSICA
TARJETA CON IMAGEN
TARJETA REVEAL
TARJETA PEQUEÑA
TARJETA PANEL
FORMULARIOS
Input Field
FORMULARIOS
Text Area
FORMULARIOS
Select
FORMULARIOS
Radio
FORMULARIOS
File Input
FORMULARIOS
Date Picker
FORMULARIOS
Time Picker
FORMULARIOS
Autocomplete
FORMULARIOS
Autocomplete
NAVBAR
Navbar basic
NAVBAR
Navbar fixed
NAVBAR
Navbar with Dropdown
COLLAPSIBLE
Navbar with Dropdown
TOAST
TOOLTIPS

 <a class="btn tooltipped" data-position="bottom"

data-delay="50" data-tooltip="I am a tooltip">Hover
me!</a>
MATERIAL BOX
SLIDER
CAROUSEL
FULL WIDTH SLIDER
MODALS