Materialize CSS se define en su web como «Un framework web frontend moderno y responsivo basado en Google Material Design».
Vamos a ver los componentes principales de Materialize CSS y a crear una sencilla web portfolio como práctica que repasa el modo de diseñar con este framework responsivo:
Además abordaremos brevemente el relativamente nuevo lenguaje de diseño de Google, Material Design, que parece que ha llegado para quedarse y derrocar al Flat Design.
Lenguaje de Diseño o Design Language. Es un esquema global o guía de estilo que los diseñadores usan cuando quieren dar a su producto una única pero consistente apariencia. Un lenguaje de diseño describe aspectos como el material, las combinaciones de colores, las formas, patterns, texturas o la disposición (layout).
¿Qué es Material Design?
Es un Lenguaje de diseño desarrollado por Google que sintetiza los principios del buen diseño junto con la innovación y la tecnología.
Aunque Google creó este sistema de diseño para crear una experiencia de usuario (UX) unificada para todos sus productos, se ha ido extendiendo y ganando éxito en estos meses ya que llama mucho la atención este tipo diseño limpio, con sombras, efectos de profundidad, y las increíbles transiciones de unas animaciones que representan con fluidez la interacción del usuario con la aplicación.
¿Material Design o Flat design?
Digamos que Google ha cogido todo lo bueno del Flat Design: su simpleza, claridad y facilidad de comprensión para el usuario, y le ha añadido un factor tridimensional a estos elementos. Por ejemplo, observa estos dos botones de edición:
Flat Design ha dejado una huella de minimalismo en el diseño web, apenas usamos ya elementos como degradados, sombras, texturas y todo lo que dé la ilusión de tridimensionalidad.
Mientras que Material Design apuesta por que el usuario perciba de forma tangible los objetos con los que va a interaccionar y de esta forma comprenda cómo manipularlos. La forma y el movimiento le da información al usuario sobre el peso, la rigidez, el tamaño, la profundidad de los elementos de la aplicación. Además ayuda a comprender mejor las interacciones que el usuario está realizando con la aplicación, invitándolo a seguir explorando ésta.
En definitiva, Material Design no es Flat Design con unas cuantas sombritas, todo está muy estudiado para mejorar considerablemente la experiencia de usuario. La mejor fuente de información la tienes en Google Material Design, donde Google se ofrece a explicarte todo este complejo lenguaje de diseño, sus principios y a usarlo con «cabeza».
¿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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
materialize-css/ |--css/ | |--materialize.min.css | |--custom.css | |--img/ | |--fonts/ | |--material-design-icons | |--roboto | |--js/ | |--materialize.min.js | |--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 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Materialize CSS Tutorial</title> <meta charset="UTF-8"> <!-- Le decimos al navegador que nuestra web esta optimizada para moviles --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <!-- Cargamos el CSS --> <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> <link type="text/css" rel="stylesheet" href="css/custom.css" /> </head> <body> <!-- Cargamos jQuery y materialize js --> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.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. Y además evitamos que el usuario haga zoom en el móvil con el dedo, ¿para qué?, si ya vamos a mostrarle todo adaptado a su pantalla.
Debajo del css de materialize añadimos nuestro propio custom.css aparte para no tocar el de materialize.
¡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, manipulando dos clases, una para el color y otra para la saturación. La segunda clase puede ser .lighten o .darken y con ella sacamos esa intensidad del color, aclarándolo u oscureciéndolo. Un color muy saturado se verá puro y rico:
See the Pen bNjyEb by Funny Frontend (@funnyfrontend) on CodePen.
Grid o cuadrícula
En MaterializeCSS se usa el sistema estándar de cuadrículas de 12 columnas. Las cuadrículas te ayudan a maquetar y diseñar las páginas de tus webs o aplicación de forma ordenada, sencilla y elegante.
Tenemos una clase .container que no necesariamente forma parte de la cuadrícula pero que conviene usarse para disponer el contenido de forma centrada, envolviendo a las filas (row) que a su vez contienen las columnas. La clase container se establece en un ~ 70% del ancho de la ventana.
Después como he mencionado antes, maquetamos filas con la clase .row y dentro de las filas situamos las columnas usando la clase .col, que pueden definirse como .s, .m o .l para las pantallas pequeñas (small), medianas (medium) o grandes (large). Observa este ejemplo:
|
1 2 3 4 5 6 7 8 |
<div class="container"> <div class="row"> <div class="teal lighten-5 col s12 m6 l3">Columna (1)-> S:12, M:6, L:3</div> <div class="teal lighten-4 col s12 m2 l3">Columna (2)-> S:12, M:2, L:3</div> <div class="teal lighten-3 col s12 m2 l3">Columna (3)-> S:12, M:2, L:3</div> <div class="teal lighten-2 col s12 m2 l3">Columna (4)-> S:12, M:2, L:3</div> </div> </div> |
Todo consiste en ir jugando con la retícula de 12 columnas, ahora dispongo de 4 bloques div, así que le digo que en pantallas grandes los muestre todos a 3 columnas (l3), en los tamaños medianos me encapricho en repartirle 6 columnas al primero (m6) y dos columnas a los tres div restantes (m2), y ya en tamaño pequeño decido mostrar los 4 divs a 12 columnas, es decir, ocuparán toda la retícula:
See the Pen VYEwrZ by Funny Frontend (@funnyfrontend) on CodePen.
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. Si empiezas a reducir la ventana de tu navegador hasta lo que podría ser la pantalla de un móvil, observarás como cambia el tamaño de los divs y se ponen en s12, ocupando así el container completo.
Añadiendo profundidad con sombras
En material design damos profundidad a los elementos en el eje Z usando sombras, ayudando al usuario a percibir que elemento de la página está por encima de los otros. Esto se logra añadiendo la clase .z-depth-1, disponible hasta en 5 niveles:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="col s12 m2"> <p class="z-depth-1 shadow-demo">z-depth-1</p> </div> <div class="col s12 m2"> <p class="z-depth-2 shadow-demo">z-depth-2</p> </div> <div class="col s12 m2"> <p class="z-depth-3 shadow-demo">z-depth-3</p> </div> <div class="col s12 m2"> <p class="z-depth-4 shadow-demo">z-depth-4</p> </div> <div class="col s12 m2 l2"> <p class="z-depth-5 shadow-demo">z-depth-5</p> </div> |
See the Pen LEBKaG by Funny Frontend (@funnyfrontend) on CodePen.
Botones / Buttons
Hay tres tipos de botones descritos en Material Design:
1. Raised button (botón en relieve), 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).
2. Floating button (botón circular flotante), usado para funciones muy importantes y situado jerárquicamente por encima de los otros.
3. Flat Buttons (botones planos), que se usan dentro de elementos que ya tienen profundidad, como las ventanas modales.
|
1 2 3 |
<a class="waves-effect waves-light btn">Raised Button</a> <a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a> <a class="waves-effect waves-teal teal white-text btn-flat">Flat Button</a> |
See the Pen zxJeow by Funny Frontend (@funnyfrontend) on CodePen.
SideNav / Menú lateral
Menú lateral desplegable.
See the Pen pvZXwV by Funny Frontend (@funnyfrontend) on CodePen.
Formularios
Los formularios con material design gozan de transiciones muy amigables para el usuario. Añadiendo la clase .input-field animamos el <label>:
See the Pen ZYqEao by Funny Frontend (@funnyfrontend) on CodePen.
Iconos
Materialize incluye 740 de Material Design, 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>.
Puedes manipular el tamaño de los iconos cambiando el font-size o usando las clases predefinidas .tiny, .small, .medium o .large.
See the Pen dPgoej by Funny Frontend (@funnyfrontend) on CodePen.
Material Box
Material Box es una implementación del plugin Lightbox, para que cuando el usuario haga click se amplíe el tamaño de una imagen. 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. Con solo hacer scroll, hacer click de nuevo o pulsar ESC el usuario sale del zoom de la imagen.
Con solo añadir la clase .materialboxed a una etiqueta <img> creas el efecto:
See the Pen pvxJOE by Funny Frontend (@funnyfrontend) on CodePen.
Tabs / Pestañas
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">, ese id será el de un contenedor <div> que mostraremos haciéndolo visible cuando pulsamos en su correspondiente tab:
See the Pen vEVOQb by Funny Frontend (@funnyfrontend) on CodePen.
Creando nuestro portfolio con Materialize CSS
Vamos a coger algunos de los elementos explicados más arriba y crear un portfolio one page, en el ejemplo he usado la temática de un portfolio orientado a un artista de pixel art. Aquí tienes la demo completa de lo que vamos a hacer. Puedes bajarte el proyecto completo desde Github clonándolo o con descarga directa pulsando en Download ZIP.
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). Jugamos con las clases de Materialize dando el color de fondo y su matiz correspondiente. Dejamos el correspondiente botón del menú desplegable y hacemos que active el menú pasándole al atributo personalizado de Materialize llamado data-activates, el id del menú que vamos a desplegar en dispositivos tablets y móviles:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<header class="orange lighten-2 z-depth-1"> <nav class="top-nav orange lighten-2"> <div class="nav-wrapper"> <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a> <ul class="side-nav fixed grey darken-4" id="mobile-demo"> <li><a href="#portfolio" class="waves-effect">Portfolio</a> </li> <li><a href="#sobremi" class="waves-effect">Sobre mí</a> </li> <li><a href="#habilidades" class="waves-effect">Habilidades</a> </li> <li><a href="#contacto" class="waves-effect">Contacto</a> </li> </ul> </div> </nav> <img src="img/retratos-pixelart.svg" alt="Retratos Pixelart" class="logo responsive-img"> <h1 class="white-text">Retratos e ilustraciones con <strong>pixelart</strong></h1> <a href="#portfolio" class="btn-floating btn-large waves-effect waves-light teal lighten-1"> <i class="mdi-navigation-expand-more"></i> </a> </header> |
En el código, justo antes de cerrar la etiqueta </body>, colocamos los scripts necesarios para materialize: jQuery en este caso y materialize.js.
De paso hacemos la llamada de la función sideNav() de Materialize CSS, que vuelve nuestro menú responsivo:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- Cargamos jQuery y materialize js --> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/materialize.min.js"></script> <script> $(document).ready(function () { //Menú responsivo $(".button-collapse").sideNav(); }); </script> |
Sección Portfolio
Habrás observado que las secciones Porfolio, Sobre mí, etc están contenidas en la etiqueta <main></main>, una etiqueta precisa de HTML5 que describe el contenido principal de la página.
En la sección portfolio mostramos nuestros proyectos realizados o trabajos, usaremos material boxes añadiendo la clase .materialboxed a cada etiqueta <img>. En los estilos custom.css que son nuestros estilos personalizados, he optado por mostrar las imágenes a tres columnas y flotando:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<section id="portfolio" class="portfolio teal lighten-3"> <div class="container"> <h4 class="teal-text">portfolio</h4> <hr class="teal-text"> <div class="row"> <div class="col s12 m12 l12 portfolio-holder"> <div><img class="materialboxed" src="img/sample.jpg" alt=""></div> <div><img class="materialboxed" src="img/sample.jpg" alt=""></div> <div><img class="materialboxed" src="img/sample.jpg" alt=""></div> <div><img class="materialboxed" src="img/sample.jpg" alt=""></div> <div><img class="materialboxed" src="img/sample.jpg" alt=""></div> <div><img class="materialboxed" src="img/sample.jpg" alt=""></div> </div> </div> </div> </section> |
Sección «Sobre mí»
Para darle un toque dinámico al background de esta sección usamos un Parallax. 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.
Sencillamente añadimos este código nada más empezar el contenido de nuestro section#sobremi:
|
1 2 3 |
<div class="parallax"> <img src="img/parallax.jpg" alt=""> </div> |
Y vamos a los scripts que tenemos abajo y llamamos a la función de Materialize que lo activa:
|
1 2 |
//Parallax $('.parallax').parallax(); |
Vamos a usar el componente Card, tarjeta, que básicamente es una forma recomendada e interactiva de mostrar contenido. En concreto la clase .card-reveal nos muestra el contenido de la tarjeta y añadiendo la clase .activator a un elemento lo convertimos en un botón que despliega u oculta esta tarjeta.
Bloque de código completo de esta sección:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<section id="sobremi" class="sobremi parallax-container"> <div class="parallax"><img src="img/parallax.jpg" alt=""> </div> <div class="container"> <h4 class="deep-orange-text text-darken-4">sobre mí</h4> <hr class="deep-orange-text text-darken-4"> <div class="row"> <div class="col s12 center"> <div class="card small blue-grey darken-1"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="img/sobremi.jpg"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Mr. 8-Bits <i class="mdi-navigation-more-vert right"></i></span> <p> <a href="#">twitter</a> <a href="#">facebook</a> </p> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title <i class="mdi-navigation-close right"></i></span> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div> </div> </div> </div> </section> |
Habilidades
Aprovechamos los iconos que tiene Materialize y los sacamos a relucir un poco en esta sección, para pantallas grandes lo mostramos a 3 columnas y en móviles lo ponemos a 12 columnas:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<section id="habilidades" class="habilidades pink lighten-3"> <div class="container"> <h4 class="pink-text">habilidades</h4> <hr class="pink-text"> <div class="row"> <ul> <li> <div class="col s12 m4"> <div class="center"> <i class="pink-text mdi-image-flash-on"></i> <h5>Lorem</h5> <p class="light center"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </p> </div> </div> </li> <li> <div class="col s12 m4"> <div class="center"> <i class="pink-text mdi-action-settings-ethernet"></i> <h5>Ipsum</h5> <p class="light center"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </li> <li> <div class="col s12 m4"> <div class="center"> <i class="pink-text mdi-hardware-gamepad"></i> <h5>Dolor</h5> <p class="light center"> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> </div> </div> </li> </ul> </div> </div> </section> |
Contacto
Código muy sencillo que nos deja un formulario de contacto visualmente atractivo usando las clases para formularios de Materialize:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<section id="contacto" class="contacto"> <div class="container"> <h4>contacto</h4> <hr> <div class="row"> <div class="col s12 m7"> <div class="row"> <form class="col s12"> <div class="row"> <div class="input-field col s6"> <i class="mdi-action-account-circle prefix"></i> <input id="first_name" type="text" class="validate"> <label for="first_name">Nombre</label> </div> <div class="input-field col s6"> <input id="last_name" type="text" class="validate"> <label for="last_name">Apellido</label> </div> </div> <div class="row"> <div class="input-field col s12"> <i class="mdi-communication-email prefix"></i> <input id="email" type="email" class="validate"> <label for="email">E-Mail</label> </div> </div> <div class="row"> <div class="input-field col s12"> <i class="mdi-communication-comment prefix"></i> <textarea id="mensaje" class="materialize-textarea" required></textarea> <label for="mensaje">Mensaje</label> </div> </div> <button class="btn waves-effect waves-light" type="submit" name="action">Enviar <i class="mdi-content-send right"></i> </button> </form> </div> </div> <div class="col s12 m4 offset-m1 contact-holder"> <h6 class="mdi-action-home">Dirección</h6> <p>C/Megadrive, Nº7</p> <h6 class="mdi-hardware-phone-android">Móvil</h6> <p>999 999 999</p> <h6 class="mdi-action-open-in-browser">Web</h6> <p>funnyfrontend.com</p> </div> </div> </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:
|
1 2 3 4 5 6 7 8 |
<footer class="page-footer orange lighten-2"> <div class="footer-copyright"> <div class="container"> © 2015 Funny Frontend <a class="grey-text text-lighten-4 right" href="https://funnyfrontend.com/">Web</a> </div> </div> </footer> |
Animaciones en la página
Recuerda que abajo situamos ciertos scrips como el de Parallax, en este mismo sitio usaremos el plugin que incorpora Materialize, ScrollFire que realiza animaciones según vamos haciendo scroll en la web. Simplemente pasamos como parámetros el selector del bloque div que queremos animar, 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.
También hemos animado el portfolio con el fadeInImage y las habilidades con el showStaggeredList, ambas animaciones de Materialize CSS:
|
1 2 3 4 5 6 7 8 9 10 11 |
//Animaciones var options = [{ selector: '.portfolio-holder img', offset: 0, callback: 'fadeInImage(".portfolio-holder img")' }, { selector: '.habilidades li', offset: 0, callback: 'showStaggeredList(".habilidades ul")' }]; scrollFire(options); |
Por último, cuando nos desplazamos por el menú lateral los saltos de los href del menú a nuestras section#id es muy brusco, llamaremos también a la función ScrollSpy para solucionar este detalle:
|
1 2 |
//Scroll $('section').scrollSpy(); |
Conclusiones finales
Hemos visto algunas de las características y componentes de este Material Design framework, que cada vez está cobrando más fuerza sobre el Flat Design.
Si estás pensando en crear una web con este estilo con el framework frontend Materialize CSS tienes más que suficiente, tu diseño destacará sin duda sobre el resto, ya que hay muy pocas webs que estén usando este estilo por ahora.
También se puede usar este framework para crear aplicaciones móviles híbridas, por ejemplo en PhoneGap.
Deja un comentario dando tu opinión sobre este lenguaje de diseño y si te ha gustado el artículo, ¡compártelo! 😀
Muchas gracias por los ejemplos, de verdad que me ayudaron muchísimo.
Y yo que me alegro oye 😀
Hola Buenas Tardes Como hago para ponerne al slider un tamaño mas grande gracias 😀
Pues el slider es responsive así que se te debe adaptar dentro del div class=»container» donde lo incluyas. Métele al div que contiene tu slider un width: 100%;
Te dejo por aquí la documentación: http://materializecss.com/media.html
Wow, increible artículo, ahora a estudiarselo un poco para ponerlo en práctica.
Muchas gracias
Gracias! excelente Publicación. estoy agradecido y te motivo a seguir compartiendo…
Gracias a vosotros por comentar y hacer que crezca cada día este blog.
esta muy chingon el tuto, pásate a ver mi pagina la hice sacando unas cosas de tu tuto, muchas gracias. quieromivisa.com
Está muy bien, yo quizás añadiría una sección de «Quiénes somos» para crear confianza al usuario 😉
nooooooooooooooooooooooooooooo
Ya llevo un gran avance de mi pagina en bootstrap y hasta ahorita descubro este framework T_T
No pasa nada, Materialize css se parece mucho a Boostrap en cuanto a sistema de maquetación.
Por otro lado, si te apetece seguir con los conocimientos de Boostrap pero te gusta el estilo gráfico de material design, puedes usar Boostrap Material Design 😀 —> https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html
Me ah ocurrido lo mismo, estoy a medias de un desarrollo con bootstrap y ahora no puedo continuar, no después de ver materialize…. y bootstrap material design no es lo mismo 😉
felicidades por tus tutoriales, son muy buenos.
Disculpen,
Alguno sabe como puedo usar los iconos como fuente, pero descargando los formatos «.eot, .woff y woff2» directametne en mi proyecto, (O en mi PC, o en mi servidor local), es decir sin usar «»
Gracias de antemano por su respuesta y tiempo.
Buenísimo, me está flipando tu web, muchísimas gracias por todos los consejos, tutoriales, recursos…
Eres grande!
Excelente muchas gracias