Вы находитесь на странице: 1из 10

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.
Mens, headers, botones, iconos, etc, as como una retcula o rejilla
para maquetar y construir nuestra pgina web o aplicacin.

Vamos a ver estos componentes uno a uno.

ESTRUCTURA DEL
PROYECTO MATERIALIZE CSS
Descrgate Materialize directamente desde su pgina y
descomprime los archivos, o si tienes instalado NodeJS bjatelo
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.
Tambin usaremos las fuentes por defecto de materialize y sus
iconos.
Crea una carpeta y llmala 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 quedara 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, tambin debemos cargar jQuery ya que materialize
funciona con l. Crgalo 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">
<!-- Le decimos al navegador que nuestra web esta optimizada para moviles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
6 scale=1.0, user-scalable=no"/>
7
8
<!-- Cargamos el CSS -->
9
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"
10
media="screen,projection"/>
11
<link type="text/css" rel="stylesheet" href="css/custom.css" />
12
</head>
13
14
15 <body>
16
17 <!-- Cargamos jQuery y materialize js -->
18 <script type="text/javascript" src="https://code.jquery.com/jquery-
19 2.1.1.min.js"></script>
20 <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 adems
evitamos que el usuario haga zoom en el mvil con el dedo, para
qu?, si ya vamos a mostrarle todo adaptado a su pantalla.
Debajo del css de materialize aadimos 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 saturacin. La segunda clase
puede ser .lighten o .darken y con ella sacamos esa intensidad del
color, aclarndolo u oscurecindolo. Un color muy saturado se ver
puro y rico:

GRID O CUADRCULA
En MaterializeCSS se usa el sistema estndar de cuadrculas de 12
columnas. Las cuadrculas te ayudan a maquetar y disear las
pginas de tus webs o aplicacin de forma ordenada, sencilla y
elegante.

Tenemos una clase .container que no necesariamente forma parte de


la cuadrcula 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.
Despus 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
pequeas (small), medianas (medium) o grandes (large). 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, M:6, L:3</div>
4 <div class="teal lighten-4 col s12 m2 l3">Columna (2)-> S:12, M:2, L:3</div>
5 <div class="teal lighten-3 col s12 m2 l3">Columna (3)-> S:12, M:2, L:3</div>
6 <div class="teal lighten-2 col s12 m2 l3">Columna (4)-> S:12, M:2, L:3</div>
7 </div>
8 </div>
Todo consiste en ir jugando con la retcula 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 tamaos medianos me
encapricho en repartirle 6 columnas al primero (m6) y dos columnas a
los tres div restantes (m2), y ya en tamao pequeo decido mostrar
los 4 divs a 12 columnas, es decir, ocuparn toda la retcula:

Ahora vers 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 podra ser la pantalla de un mvil, observars como cambia el
tamao de los divs y se ponen en s12, ocupando as el container
completo.

AADIENDO 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
pgina est por encima de los otros. Esto se logra aadiendo la
clase .z-depth-1, 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:
1. Raised button (botn en relieve), que es un botn estndar que
sugiere acciones y trata de dar profundidad a una pgina en su
mayora plana (flat).
2. Floating button (botn circular flotante), usado para funciones
muy importantes y situado jerrquicamente por encima de los otros.
3. Flat Buttons (botones planos), que se usan dentro de elementos
que ya tienen profundidad, como las ventanas modales.
<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.

FORMULARIOS
Los formularios con material design gozan de transiciones muy
amigables para el usuario. Aadiendo la clase .input-field animamos
el <label>:

ICONOS
Materialize incluye 740 de Material Design, cortesa 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 tamao de los iconos cambiando el font-size o
usando las clases predefinidas .tiny, .small, .medium o .large.

MATERIAL BOX
Material Box es una implementacin del plugin Lightbox, para que
cuando el usuario haga click se ample el tamao 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 animacin.
Con solo hacer scroll, hacer click de nuevo o pulsar ESC el usuario
sale del zoom de la imagen.

Con solo aadir la clase .materialboxed a una etiqueta <img> creas el


efecto:

TABS / PESTAAS
Si ya tienes experiencia con las tabs sabrs 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 hacindolo visible cuando
pulsamos en su correspondiente tab:

CREANDO NUESTRO PORTFOLIO CON


MATERIALIZE CSS
Vamos a coger algunos de los elementos explicados ms arriba y
crear un portfolio one page, en el ejemplo he usado la temtica 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 clonndolo o con descarga directa pulsando
en Download ZIP.
CABECERA / HEADER
Creamos el men y una pequea introduccin sobre de qu va
nuestro portfolio (situar el h1 para posicionamiento y dems).
Jugamos con las clases de Materialize dando el color de fondo y su
matiz correspondiente. Dejamos el correspondiente botn del men
desplegable y hacemos que active el men pasndole al atributo
personalizado de Materialize llamado data-activates, el id del men
que vamos a desplegar en dispositivos tablets y mviles:

<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.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>
En el cdigo, 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 funcin sideNav() de Materialize


CSS, que vuelve nuestro men responsivo:
<!-- Cargamos jQuery y materialize js -->
1 <script type="text/javascript" src="https://code.jquery.com/jquery-
2 2.1.1.min.js"></script>
3 <script type="text/javascript" src="js/materialize.min.js"></script>
4 <script>
5 $(document).ready(function () {
6
7
//Men responsivo
8
$(".button-collapse").sideNav();
9
10
11
12 });
</script>
SECCIN PORTFOLIO
Habrs observado que las secciones Porfolio, Sobre m, etc estn
contenidas en la etiqueta <main></main>, una etiqueta precisa de
HTML5 que describe el contenido principal de la pgina.

En la seccin portfolio mostramos nuestros proyectos realizados o


trabajos, usaremos material boxes aadiendo la clase .materialboxed a
cada etiqueta <img>. En los estilos custom.css que son nuestros
estilos personalizados, he optado por mostrar las imgenes 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.jpg" alt=""></div>
8 <div><img class="materialboxed" src="img/sample.jpg" alt=""></div>
9 <div><img class="materialboxed" src="img/sample.jpg" alt=""></div>
10 <div><img class="materialboxed" src="img/sample.jpg" alt=""></div>
11 <div><img class="materialboxed" src="img/sample.jpg" alt=""></div>
12 <div><img class="materialboxed" src="img/sample.jpg" alt=""></div>
13 </div>
14 </div>
15 </div>
16 </section>
SECCIN SOBRE M
Para darle un toque dinmico al background de esta seccin usamos
un Parallax. Es un efecto en el background de la seccin que mueve
este fondo a una velocidad diferente que el contenido de frente
cuando hacemos scroll.
Sencillamente aadimos este cdigo nada ms empezar el contenido
de nuestro section#sobremi:
1 <div class="parallax">
2 <img src="img/parallax.jpg" alt="">
3 </div>
Y vamos a los scripts que tenemos abajo y llamamos a la funcin de
Materialize que lo activa:

1 //Parallax
2 $('.parallax').parallax();
Vamos a usar el componente Card, tarjeta, que bsicamente es una
forma recomendada e interactiva de mostrar contenido. En concreto
la clase .card-reveal nos muestra el contenido de la tarjeta y
aadiendo la clase .activator a un elemento lo convertimos en un
botn que despliega u oculta esta tarjeta.
Bloque de cdigo completo de esta seccin:

<section id="sobremi" class="sobremi parallax-container">


<div class="parallax"><img src="img/parallax.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.jpg">
9
</div>
10
<div class="card-content">
11
<span class="card-title activator grey-text text-darken-4">Mr. 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, consectetur adipiscing elit, sed do eiusmod
23
tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet,
24
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
25
aliqua.
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 seccin, para pantallas grandes lo mostramos
a 3 columnas y en mviles lo ponemos a 12 columnas:
1 <section id="habilidades" class="habilidades pink lighten-3">
<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, 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, 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
Cdigo 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">
<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">Direccin</h6>
44 <p>C/Megadrive, N7</p>
45 <h6 class="mdi-hardware-phone-android">Mvil</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 algn 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>
ANIMACIONES EN LA PGINA
Recuerda que abajo situamos ciertos scrips como el de Parallax, en
este mismo sitio usaremos el plugin que incorpora
Materialize, ScrollFire que realiza animaciones segn vamos haciendo
scroll en la web. Simplemente pasamos como parmetros el selector
del bloque div que queremos animar, el offset (cantidad de pxeles
del scroll) y callback que ejecuta una funcin cuando el usuario llega
al punto especificado en el offset haciendo scroll.
Tambin hemos animado el portfolio con el fadeInImage y las
habilidades con el showStaggeredList, ambas animaciones
de Materialize CSS:
1 //Animaciones
2 var options = [{
3 selector: '.portfolio-holder img',
4 offset: 0,
5 callback: 'fadeInImage(".portfolio-holder img")'
6 }, {
7 selector: '.habilidades li',
8 offset: 0,
9 callback: 'showStaggeredList(".habilidades ul")'
10 }];
11 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
tambin a la funcin ScrollSpy para solucionar este detalle:
1 //Scroll
2 $('section').scrollSpy();

CONCLUSIONES FINALES
Hemos visto algunas de las caractersticas y componentes de
este Material Design framework, que cada vez est cobrando ms
fuerza sobre el Flat Design.
Si ests pensando en crear una web con este estilo con
el framework frontend Materialize CSS tienes ms que suficiente,
tu diseo destacar sin duda sobre el resto, ya que hay muy pocas
webs que estn usando este estilo por ahora.
Tambin se puede usar este framework para crear aplicaciones
mviles hbridas, por ejemplo en PhoneGap.