Introducción a Materialize
Materialize es un framework de diseño enfocado en el material y responsive design. Veamos una introducción y un ejemplo.
Materialize es muy similar a Bootstrap pero con un diseño diferente y algunas diferencias en sus componentes.
Para empezar con materialize vamos a descargarlo de la pagina oficial https://materializecss.com/
Materialize consta de archivos CSS y JS, solo requiere de jquery para hacer funcionar los dropdowns, modales, entre otras funciones.
Codigo HTML
Primero vamos a empezar con la plantilla básica, aquí vamos a agregar las etiquetas html básicas e incluir los archivos CSS y JS necesarios.
El resto del código lo escribiremos en el cuerpo o BODY de la pagina.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/> | |
| <title>MaterializeCSS – Ejemplo</title> | |
| <!– CSS –> | |
| <link href="materialize/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/> | |
| <script src="jquery.min.js"></script> | |
| </head> | |
| <body> | |
| <!– El resto del codigo va aqui –> | |
| <!– Scripts–> | |
| <script src="materialize/js/materialize.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| $('.sidenav').sidenav(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Tenemos que notar el script de la linea 17 sirve para activar el “sidenav” o menu para dispositivos móviles.
Navbar
Ahora el segundo paso para crear nuestra pagina de ejemplo es agregar un navbar o barra de navegacion.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="light-blue lighten-1" role="navigation"> | |
| <div class="nav-wrapper container"><a id="logo-container" href="./" class="brand-logo">MATERIALIZE</a> | |
| <ul class="right hide-on-med-and-down"> | |
| <li><a href="./">INICIO</a></li> | |
| <li><a href="#">LINK 1</a></li> | |
| <li><a href="#">LINK 2</a></li> | |
| <li><a href="#">LINK 3</a></li> | |
| </ul> | |
| <ul id="nav-mobile" class="sidenav"> | |
| <li><a href="./">INICIO</a></li> | |
| <li><a href="#">LINK 1</a></li> | |
| <li><a href="#">LINK 2</a></li> | |
| <li><a href="#">LINK 3</a></li> | |
| </ul> | |
| <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a> | |
| </div> | |
| </nav> |
Para este código tenemos una etiqueta nav con las clases “light-blue lighten-1” que es el color de la barra de navegacion, mas información en la documentacion de colores de materialize.
Despues tenemos 2 listas, la primera con las clases “right hide-on-med-and-down” que significa “a la derecha” y “ocultar en pantallas medianas y mas chicas”.
La segunda lista es para la navegacion en dispositivos móviles y tiene la clase “sidenav” la cual activamos en la sección anterior.
Sección tipo Jumbotron
Esta sección sirve para resaltar un titulo y un subtitulo.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="section no-pad-bot" id="index-banner"> | |
| <div class="container"> | |
| <br><br> | |
| <h1 class="header center blue-text">MATERIALIZE CSS</h1> | |
| <div class="center"> | |
| <h5 class="header light">Bienvenido a este ejemplo con Materialize CSS.</h5> | |
| </div> | |
| <br><br> | |
| </div> | |
| </div> |
Esta es una sección y un contenedor, dentro están las etiquetas h1 y h5 para el titulo y subtitulo respectivamente.
Sección con 3 divisiones + imágenes
En esta sección ejemplificaremos el uso de filas y columnas en Materialize.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <div class="section"> | |
| <div class="row"> | |
| <div class="col s12 m4"> | |
| <h3 class="center">EJEMPLO 1</h3> | |
| <img class="responsive-img" src="images/image1.jpg"> | |
| <p>Este es un texto de ejemplo ;)</p> | |
| <div class="center"> | |
| <a class="waves-effect waves-light btn">Button</a> | |
| </div> | |
| </div> | |
| <div class="col s12 m4"> | |
| <h3 class="center">EJEMPLO 1</h3> | |
| <img class="responsive-img" src="images/image2.jpg"> | |
| <p>Este es un texto de ejemplo ;)</p> | |
| <div class="center"> | |
| <a class="waves-effect waves-light btn">Button</a> | |
| </div> | |
| </div> | |
| <div class="col s12 m4"> | |
| <h3 class="center">EJEMPLO 1</h3> | |
| <img class="responsive-img" src="images/image3.jpg"> | |
| <p>Este es un texto de ejemplo ;)</p> | |
| <div class="center"> | |
| <a class="waves-effect waves-light btn">Button</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Voy a explicar el código en la siguiente lista.
- Primero tenemos un div con clase container , es decir un contenedor.
- Segundo, dentro del contenedor, hay un div con clase section, es decir una sección
- Tercero, dentro de la sección, hay un row, una fila.
- Cuarto, dentro de la fila hay 3 columnas con la clase “col s12 m4”, col significa que es una columna, s12 significa que para pantallas chicas o small la columna ocupara 12 unidades es decir todas, y m4 significa que en pantallas mediana la columna ocupara 4 unidades.
- Dentro de las columnas ya podemos agregar cualquier tipo de contenido, texto, imágenes, etc.
- Podemos usar h1-h6, parrafos
- Para las imagenes usamos la etiqueta img y la clase “responsive-img”
- Para los botones podemos usar enlaces o “button”, les debemos agregar la clase “btn” y “waves-effect” para que se muestre el efecto de ondas al presionar el botón.
Resultado
El resultado del código es el siguiente.
Descargar
Aquí les dejo un enlace de descarga con todos los archivos que use, incluyendo materialize, jquery y las imágenes.
Link: https://drive.google.com/file/d/1fRqrl-NAOYoBuhory2qc20PfirWrWH2p/view?usp=sharing
Si tienen dudas no olviden dejar sus comentarios 😉
Excelente ejemplo para iniciar los pininos con materialize, gracias.