¿QUÉ ES MATERIALIZE CSS?

Al igual que Foundation o Bootstrap, Materialize CSS es un
framework para el desarrollo frontend responsivo que nos
proporciona una serie de componentes CSS y ficheros JavaScript para
trabajar.
Menús, headers, botones, iconos, etc, así como una retícula o rejilla
para maquetar y construir nuestra página web o aplicación.

Vamos a ver estos componentes uno a uno.

ESTRUCTURA DEL
PROYECTO MATERIALIZE CSS
Descárgate Materialize directamente desde su página y
descomprime los archivos, o si tienes instalado NodeJS bájatelo
escribiendo npm install materialize-css en consola.
En cualquiera de los casos, solo usaremos los ficheros minificados
CSS y
JavaScript: materialize.min.css y materialize.min.js respectivamente.
También usaremos las fuentes por defecto de materialize y sus
iconos.
Crea una carpeta y llámala materialize-css o como gustes, y dentro
de esta crea un index.html y una carpeta /img.
Finalmente la estructura de nuestro proyecto + el CSS y JS de
Materialize quedaría así:
1 materialize-css/
2 |--css/
3 | |--materialize.min.css
4 | |--custom.css
5 |
6 |--img/
7 |
8 |--fonts/
9 | |--material-design-icons
10 | |--roboto
11 |
12 |--js/
13 | |--materialize.min.js
14 |
15 |--index.html
Abrimos nuestro fichero index.html y cargamos el css y el js de
materialize, también debemos cargar jQuery ya que materialize
funciona con él. Cárgalo antes que materialize.min.js y coloca ambos
ficheros JavaScript justo antes del cierre de la etiqueta </body> para
optimizar los tiempos de carga:

1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Materialize CSS Tutorial</title>
5 <meta charset="UTF-8">

css aparte para no tocar el de materialize.com/jquery- 19 2.1.min. aclarándolo u oscureciéndolo.darken y con ella sacamos esa intensidad del color.js"></script> 20 <script type="text/javascript" src="js/materialize.min. sencilla y elegante. initial-scale=1. ¡Vamos a ver lo que nos brinda materialize CSS antes de meternos con nuestro portfolio! COMPONENTES DESTACADOS USO DEL COLOR Disponemos de una paleta de colores predefinidos de acuerdo con Material Design que dan estilos al texto y al fondo.Cargamos el CSS --> 9 <link type="text/css" rel="stylesheet" href="css/materialize. envolviendo a las filas (row) que a su vez contienen las columnas. Un color muy saturado se verá puro y rico: GRID O CUADRÍCULA En MaterializeCSS se usa el sistema estándar de cuadrículas de 12 columnas.jquery. <!-. user-scalable=no"/> 7 8 <!-. ¿para qué?. manipulando dos clases. Debajo del css de materialize añadimos nuestro propio custom.0.css" 10 media="screen.Cargamos jQuery y materialize js --> 18 <script type="text/javascript" src="https://code. maximum- 6 scale=1.Le decimos al navegador que nuestra web esta optimizada para moviles --> <meta name="viewport" content="width=device-width.css" /> 12 </head> 13 14 15 <body> 16 17 <!-.min.0.projection"/> 11 <link type="text/css" rel="stylesheet" href="css/custom. Las cuadrículas te ayudan a maquetar y diseñar las páginas de tus webs o aplicación de forma ordenada.1. .js"></script> </body> </html> La etiqueta <meta name="viewport"> definimos el ancho y la escala del área usada por el navegador para mostrar el contenido.container que no necesariamente forma parte de la cuadrícula pero que conviene usarse para disponer el contenido de forma centrada. Tenemos una clase . La clase container se establece en un ~ 70% del ancho de la ventana. una para el color y otra para la saturación. si ya vamos a mostrarle todo adaptado a su pantalla. La segunda clase puede ser .lighten o . Y además evitamos que el usuario haga zoom en el móvil con el dedo.

row y dentro de las filas situamos las columnas usando la clase . maquetamos filas con la clase . L:3</div> 5 <div class="teal lighten-3 col s12 m2 l3">Columna (3)-> S:12.m o . . M:6. es decir. Si empiezas a reducir la ventana de tu navegador hasta lo que podría ser la pantalla de un móvil. ocupando así el container completo. Observa este ejemplo: 1 <div class="container"> 2 <div class="row"> 3 <div class="teal lighten-5 col s12 m6 l3">Columna (1)-> S:12.s. L:3</div> 6 <div class="teal lighten-2 col s12 m2 l3">Columna (4)-> S:12.l para las pantallas pequeñas (small). en los tamaños medianos me encapricho en repartirle 6 columnas al primero (m6) y dos columnas a los tres div restantes (m2). ahora dispongo de 4 bloques div. que pueden definirse como . medianas (medium) o grandes (large). M:2. M:2.col. AÑADIENDO PROFUNDIDAD CON SOMBRAS En material design damos profundidad a los elementos en el eje Z usando sombras. M:2. Esto se logra añadiendo la clase . así que le digo que en pantallas grandes los muestre todos a 3 columnas (l3).z-depth-1.Después como he mencionado antes. L:3</div> 4 <div class="teal lighten-4 col s12 m2 l3">Columna (2)-> S:12. y ya en tamaño pequeño decido mostrar los 4 divs a 12 columnas. L:3</div> 7 </div> 8 </div> Todo consiste en ir jugando con la retícula de 12 columnas. ayudando al usuario a percibir que elemento de la página está por encima de los otros. disponible hasta en 5 niveles: 1 <div class="col s12 m2"> 2 <p class="z-depth-1 shadow-demo">z-depth-1</p> 3 </div> 4 <div class="col s12 m2"> 5 <p class="z-depth-2 shadow-demo">z-depth-2</p> 6 </div> 7 <div class="col s12 m2"> 8 <p class="z-depth-3 shadow-demo">z-depth-3</p> 9 </div> 10 <div class="col s12 m2"> 11 <p class="z-depth-4 shadow-demo">z-depth-4</p> 12 </div> 13 <div class="col s12 m2 l2"> 14 <p class="z-depth-5 shadow-demo">z-depth-5</p> 15 </div> BOTONES / BUTTONS Hay tres tipos de botones descritos en Material Design: . observarás como cambia el tamaño de los divs y se ponen en s12. ocuparán toda la retícula: Ahora verás mi ejemplo en el formato de pantallas mediano (m6 y tres m2). ya que el frame de CodePen está contenido en el espacio de mi blog.

Puedes manipular el tamaño de los iconos cambiando el font-size o usando las clases predefinidas . FORMULARIOS Los formularios con material design gozan de transiciones muy amigables para el usuario.materialboxed a una etiqueta <img> creas el efecto: TABS / PESTAÑAS .small.large. Añadiendo la clase . Floating button (botón circular flotante). . . Con solo hacer scroll. para que cuando el usuario haga click se amplíe el tamaño de una imagen. que se usan dentro de elementos que ya tienen profundidad.tiny. Lo que hace es centrar y ampliar la imagen en nuestra pantalla de una forma elegante que no inquieta al usuario con una brusca animación. 2. Con solo añadir la clase . hacer click de nuevo o pulsar ESC el usuario sale del zoom de la imagen. cortesía de papi Google. Para usarlos coloca el nombre del icono dentro del class de una tag <i>: <i class="large mdi-action-grade"></i>.input-field animamos el <label>: ICONOS Materialize incluye 740 de Material Design. MATERIAL BOX Material Box es una implementación del plugin Lightbox.1. 3.medium o . Flat Buttons (botones planos). Raised button (botón en relieve). como las ventanas modales. usado para funciones muy importantes y situado jerárquicamente por encima de los otros. <a class="waves-effect waves-light btn">Raised Button</a> 1 <a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content- 2 add"></i></a> 3 <a class="waves-effect waves-teal teal white-text btn-flat">Flat Button</a> SIDENAV / MENÚ LATERAL Menú lateral desplegable. que es un botón estándar que sugiere acciones y trata de dar profundidad a una página en su mayoría plana (flat).

Dejamos el correspondiente botón del menú desplegable y hacemos que active el menú pasándole al atributo personalizado de Materialize llamado data-activates. Puedes bajarte el proyecto completo desde Github clonándolo o con descarga directa pulsando en Download ZIP. Jugamos con las clases de Materialize dando el color de fondo y su matiz correspondiente. CABECERA / HEADER Creamos el menú y una pequeña introducción sobre de qué va nuestro portfolio (situar el h1 para posicionamiento y demás). en el ejemplo he usado la temática de un portfolio orientado a un artista de pixel art. ese id será el de un contenedor <div> que mostraremos haciéndolo visible cuando pulsamos en su correspondiente tab: CREANDO NUESTRO PORTFOLIO CON MATERIALIZE CSS Vamos a coger algunos de los elementos explicados más arriba y crear un portfolio one page. el id del menú que vamos a desplegar en dispositivos tablets y móviles: <header class="orange lighten-2 z-depth-1"> <nav class="top-nav orange lighten-2"> 1 <div class="nav-wrapper"> 2 <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi- 3 navigation-menu"></i></a> 4 <ul class="side-nav fixed grey darken-4" id="mobile-demo"> 5 <li><a href="#portfolio" class="waves-effect">Portfolio</a> 6 </li> 7 <li><a href="#sobremi" class="waves-effect">Sobre mí</a> 8 </li> 9 <li><a href="#habilidades" class="waves-effect">Habilidades</a> 10 </li> 11 <li><a href="#contacto" class="waves-effect">Contacto</a> 12 </li> 13 </ul> 14 </div> 15 </nav> 16 <img src="img/retratos-pixelart. Aquí tienes la demo completa de lo que vamos a hacer.Si ya tienes experiencia con las tabs sabrás que son una lista desordenada donde cada <li> tiene un enlace <a> con la referencia apuntando a un id <a href="#tab1">.svg" alt="Retratos Pixelart" class="logo responsive- 17 img"> 18 <h1 class="white-text">Retratos e ilustraciones con <strong>pixelart</strong></h1> 19 20 21 22 <a href="#portfolio" class="btn-floating btn-large waves-effect waves-light teal lighten- 23 1"> 24 <i class="mdi-navigation-expand-more"></i> 25 </a> </header> .

usaremos material boxes añadiendo la clase . En la sección portfolio mostramos nuestros proyectos realizados o trabajos.js. Es un efecto en el background de la sección que mueve este fondo a una velocidad diferente que el contenido de frente cuando hacemos scroll.1.jpg" alt=""></div> 12 <div><img class="materialboxed" src="img/sample. que vuelve nuestro menú responsivo: <!-. </script> SECCIÓN PORTFOLIO Habrás observado que las secciones Porfolio. 9 10 11 12 }). colocamos los scripts necesarios para materialize: jQuery en este caso y materialize.jpg" alt=""></div> 13 </div> 14 </div> 15 </div> 16 </section> SECCIÓN “SOBRE MÍ” Para darle un toque dinámico al background de esta sección usamos un Parallax.En el código.ready(function () { 6 7 //Menú responsivo 8 $(".button-collapse"). Sobre mí. etc están contenidas en la etiqueta <main></main>. De paso hacemos la llamada de la función sideNav() de Materialize CSS. una etiqueta precisa de HTML5 que describe el contenido principal de la página.js"></script> 4 <script> 5 $(document).materialboxed a cada etiqueta <img>.min.sideNav().jpg" alt=""></div> 8 <div><img class="materialboxed" src="img/sample.jquery.com/jquery- 2 2.jpg" alt=""></div> 9 <div><img class="materialboxed" src="img/sample.min.jpg" alt=""></div> 11 <div><img class="materialboxed" src="img/sample. En los estilos custom.1.jpg" alt=""></div> 10 <div><img class="materialboxed" src="img/sample.js"></script> 3 <script type="text/javascript" src="js/materialize. justo antes de cerrar la etiqueta </body>.css que son nuestros estilos personalizados.Cargamos jQuery y materialize js --> 1 <script type="text/javascript" src="https://code. he optado por mostrar las imágenes a tres columnas y flotando: 1 <section id="portfolio" class="portfolio teal lighten-3"> 2 <div class="container"> 3 <h4 class="teal-text">portfolio</h4> 4 <hr class="teal-text"> 5 <div class="row"> 6 <div class="col s12 m12 l12 portfolio-holder"> 7 <div><img class="materialboxed" src="img/sample. Sencillamente añadimos este código nada más empezar el contenido de nuestro section#sobremi: .

8-Bits <i 12 class="mdi-navigation-more-vert right"></i></span> 13 <p> 14 <a href="#">twitter</a> 15 <a href="#">facebook</a> 16 </p> 17 </div> 18 <div class="card-reveal"> 19 <span class="card-title grey-text text-darken-4">Card Title <i class="mdi- 20 navigation-close right"></i></span> 21 <p> 22 Lorem ipsum dolor sit amet.parallax(). sed do eiusmod 23 tempor incididunt ut labore et dolore magna aliqua. que básicamente es una forma recomendada e interactiva de mostrar contenido. tarjeta. Bloque de código completo de esta sección: <section id="sobremi" class="sobremi parallax-container"> <div class="parallax"><img src="img/parallax.1 <div class="parallax"> 2 <img src="img/parallax. 24 consectetur adipiscing elit. Vamos a usar el componente Card.jpg" alt=""> 3 </div> Y vamos a los scripts que tenemos abajo y llamamos a la función de Materialize que lo activa: 1 //Parallax 2 $('. 26 </p> 27 </div> 28 </div> 29 </div> 30 </div> </div> </section> HABILIDADES Aprovechamos los iconos que tiene Materialize y los sacamos a relucir un poco en esta sección.jpg"> 9 </div> 10 <div class="card-content"> 11 <span class="card-title activator grey-text text-darken-4">Mr.activator a un elemento lo convertimos en un botón que despliega u oculta esta tarjeta. En concreto la clase . Lorem ipsum dolor sit amet.jpg" alt=""> </div> 1 <div class="container"> 2 <h4 class="deep-orange-text text-darken-4">sobre mí</h4> 3 <hr class="deep-orange-text text-darken-4"> 4 <div class="row"> 5 <div class="col s12 center"> 6 <div class="card small blue-grey darken-1"> 7 <div class="card-image waves-effect waves-block waves-light"> 8 <img class="activator" src="img/sobremi.parallax'). para pantallas grandes lo mostramos a 3 columnas y en móviles lo ponemos a 12 columnas: 1 <section id="habilidades" class="habilidades pink lighten-3"> .card-reveal nos muestra el contenido de la tarjeta y añadiendo la clase . sed do eiusmod tempor incididunt ut labore et dolore magna 25 aliqua. consectetur adipiscing elit.

quis nostrud exercitation ullamco laboris 24 nisi ut aliquip ex ea commodo consequat. 25 </p> 26 </div> 27 </div> 28 </li> 29 <li> 30 <div class="col s12 m4"> 31 <div class="center"> 32 <i class="pink-text mdi-hardware-gamepad"></i> 33 <h5>Dolor</h5> 34 <p class="light center"> 35 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 36 dolore eu fugiat nulla pariatur. 37 </p> 38 </div> 39 </div> 40 </li> 41 </ul> 42 </div> 43 </div> </section> CONTACTO Código muy sencillo que nos deja un formulario de contacto visualmente atractivo usando las clases para formularios de Materialize: 1 <section id="contacto" class="contacto"> 2 <div class="container"> 3 <h4>contacto</h4> 4 <hr> 5 <div class="row"> 6 <div class="col s12 m7"> 7 <div class="row"> 8 <form class="col s12"> 9 <div class="row"> . consectetur adipiscing elit. sed do 12 eiusmod tempor incididunt ut labore et dolore magna aliqua 13 </p> 14 </div> 15 </div> 16 </li> 17 <li> 18 <div class="col s12 m4"> 19 <div class="center"> 20 <i class="pink-text mdi-action-settings-ethernet"></i> 21 <h5>Ipsum</h5> 22 <p class="light center"> 23 Ut enim ad minim veniam. <div class="container"> <h4 class="pink-text">habilidades</h4> 2 <hr class="pink-text"> 3 <div class="row"> 4 <ul> 5 <li> 6 <div class="col s12 m4"> 7 <div class="center"> 8 <i class="pink-text mdi-image-flash-on"></i> 9 <h5>Lorem</h5> 10 <p class="light center"> 11 Lorem ipsum dolor sit amet.

<div class="input-field col s6"> 10 <i class="mdi-action-account-circle prefix"></i> 11 <input id="first_name" type="text" class="validate"> 12 <label for="first_name">Nombre</label> 13 </div> 14 <div class="input-field col s6"> 15 <input id="last_name" type="text" class="validate"> 16 <label for="last_name">Apellido</label> 17 </div> 18 </div> 19 <div class="row"> 20 <div class="input-field col s12"> 21 <i class="mdi-communication-email prefix"></i> 22 <input id="email" type="email" class="validate"> 23 <label for="email">E-Mail</label> 24 </div> 25 </div> 26 <div class="row"> 27 <div class="input-field col s12"> 28 <i class="mdi-communication-comment prefix"></i> 29 <textarea id="mensaje" class="materialize-textarea" 30 required></textarea> 31 <label for="mensaje">Mensaje</label> 32 </div> 33 </div> 34 35 <button class="btn waves-effect waves-light" type="submit" 36 name="action">Enviar 37 <i class="mdi-content-send right"></i> 38 </button> 39 </form> 40 </div> 41 </div> 42 <div class="col s12 m4 offset-m1 contact-holder"> 43 <h6 class="mdi-action-home">Dirección</h6> 44 <p>C/Megadrive. Nº7</p> 45 <h6 class="mdi-hardware-phone-android">Móvil</h6> 46 <p>999 999 999</p> 47 <h6 class="mdi-action-open-in-browser">Web</h6> 48 <p>funnyfrontend.com</p> 49 </div> 50 </div> 51 </div> </section> FOOTER En él mostramos el copyright y algún que otro enlace. con las clases de Materialize CSS creamos un footer en un momento: <footer class="page-footer orange lighten-2"> 1 <div class="footer-copyright"> 2 <div class="container"> 3 © 2015 Funny Frontend 4 <a class="grey-text text-lighten-4 right" 5 href="http://funnyfrontend.com/">Web</a> 6 </div> 7 </div> 8 </footer> .

habilidades ul")' 10 }]. ya que hay muy pocas webs que estén usando este estilo por ahora.scrollSpy(). llamaremos también a la función ScrollSpy para solucionar este detalle: 1 //Scroll 2 $('section').ANIMACIONES EN LA PÁGINA Recuerda que abajo situamos ciertos scrips como el de Parallax.portfolio-holder img'. cuando nos desplazamos por el menú lateral los saltos de los href del menú a nuestras section#id es muy brusco. 9 callback: 'showStaggeredList(". También se puede usar este framework para crear aplicaciones móviles híbridas. tu diseño destacará sin duda sobre el resto. { 7 selector: '. Si estás pensando en crear una web con este estilo con el framework frontend Materialize CSS tienes más que suficiente. 4 offset: 0. el offset (cantidad de píxeles del scroll) y callback que ejecuta una función cuando el usuario llega al punto especificado en el offset haciendo scroll. que cada vez está cobrando más fuerza sobre el Flat Design. Simplemente pasamos como parámetros el selector del bloque div que queremos animar. CONCLUSIONES FINALES Hemos visto algunas de las características y componentes de este Material Design framework. 8 offset: 0.portfolio-holder img")' 6 }. ambas animaciones de Materialize CSS: 1 //Animaciones 2 var options = [{ 3 selector: '. en este mismo sitio usaremos el plugin que incorpora Materialize. Por último. . por ejemplo en PhoneGap. También hemos animado el portfolio con el fadeInImage y las habilidades con el showStaggeredList. 5 callback: 'fadeInImage(".habilidades li'. ScrollFire que realiza animaciones según vamos haciendo scroll en la web. 11 scrollFire(options).