Hoy vamos a ver cómo aplicar una estética Material Design a nuestra página web de forma sencilla con la ayuda de Material Design Lite.
Hay diferentes formas de generar una página web con aspecto Material Design, las populares guías de diseño de Google para el desarrollo de interface de usuario. Alternativas populares como Materialize o el propio Material UI de Google.
Sin embargo, la mayoría de estos métodos requieren el uso intensivo de Javascript, frameworks, o soluciones mucho más complejas pesadas basadas en NodeJs (con transcompilado de código, Typescript, etc… ).
Como alternativa en Julio de 2015 Google publicó Material Design Lite, una librería de front-end diseñada para cambiar el aspecto de una página web, totalmente centrado en proporcionar una solución sencilla y ligera.
Material Design Lite (MDL) funciona con hojas de estilo CSS y un Javascript mínimo, sin la necesidad de pesados frameworks o librerías adicionales. Está optimizado para múltiples dispositivos y se ejecuta en cualquier prácticamente cualquier explorador de archivos.
MDL es tan ligero que incluso es una buena alternativa para páginas servidas desde dispositivos de IoT como el ESP8266 o ESP32. El peso para el procesador es mínimo, ya que el contenido se descarga desde la CDN de Google y la ejecución se realiza en el cliente, por lo que la carga para el servidor es mínima.
Ejemplo Material Design Lite
Vamos a ver un ejemplo de Material Design Lite funcionando, y lo sencillo que es integrarlo en una página web existente o una pequeña app.
En primer lugar, creamos un fichero html en cualquier carpeta de nuestro ordenador, por ejemplo ‘index.html’. Copiamos el siguiente contenido, que es un ejemplo sencillo con controles estándar.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<div>
<form action="#">
<div>
<input type="text" id="sample3">
<label for="sample3">Text...</label>
</div>
</form>
</div>
</div>
<div>
<div>
<button>
<i class="material-icons">add</i>
</button>
</div>
<div>
<button>Button</button>
</div>
</div>
<div>
<div>
<input type="range" min="0" max="100" value="25" tabindex="0">
</div>
</div>
<div >
<div>
<label or="checkbox-1">
<input type="checkbox" id="checkbox-1" checked>
<span>Checkbox</span>
</label>
<label for="checkbox-2">
<input type="checkbox" id="checkbox-2">
<span>Checkbox2</span>
</label>
<label for="checkbox-3">
<input type="checkbox" id="checkbox-3">
<span>Checkbox3</span>
</label>
</div>
</div>
<div>
<div>
<label for="option-1">
<input type="radio" id="option-1" name="options" value="1" checked>
<span>First</span>
</label>
<label for="option-2">
<input type="radio" id="option-2" name="options" value="2">
<span>Second</span>
</label>
<label for="option-3">
<input type="radio" id="option-3" name="options" value="3">
<span>Third</span>
</label>
</div>
</div>
<div>
<div>
<label or="switch-1">
<input type="checkbox" id="switch-1" checked>
<span>Switch</span>
</label>
</div>
</div>
</body>
</html>Hacemos doble click (ni siquiera necesitamos un servidor web como XAMPP) y el resultado que veremos es el siguiente.
No es precisamente espectacular. Ahora, vamos a convertir este sencillo ejemplo a estética Material Design. Para ello, copiamos el siguiente ejemplo,
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--1-col">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
<div class="mdl-cell mdl-cell--1-col">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored">Button</button>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<input class="mdl-slider mdl-js-slider" type="range" min="0" max="100" value="25" tabindex="0">
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
<span class="mdl-checkbox__label">Checkbox</span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
<input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Checkbox2</span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-3">
<input type="checkbox" id="checkbox-3" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Checkbox3</span>
</label>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked>
<span class="mdl-radio__label">First</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
<input type="radio" id="option-2" class="mdl-radio__button" name="options" value="2">
<span class="mdl-radio__label">Second</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
<input type="radio" id="option-3" class="mdl-radio__button" name="options" value="3">
<span class="mdl-radio__label">Third</span>
</label>
</div>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked>
<span class="mdl-switch__label">Switch</span>
</label>
</div>
</div>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>Donde únicamente hemos añadido las hojas de estilo para los iconos y el tema Material Design en la cabecera del body, el Javascript MDL al final del documento, y puesto las clases oportunas de MDL a los elementos del ejemplo.
Si hacemos doble click en el fichero, veremos lo siguiente.
Mucho más agradable a la vista y ¡no puede ser más sencillo!
Como vemos, la configuración de la estética es tan sencillo como asignar las clases de MDL a los elementos. Al principio puede parecer un tanto abrumador, pero son combinaciones bastante fijas para cada elemento, por lo que en realidad es bastante sencillo.
Para conocer las clases consultar la documentación en https://getmdl.io/components/. Tiene ejemplos bien organizados por categorías de todos los elementos disponibles.
En definitiva una gran alternativa para pequeños desarrollos rápidos, frente a opciones más complejas. Además, encaja perfectamente con otros frameworks como VueJS y, en general, en aplicaciones para IoT en dispositivos embebidos.
Material Design Lite es Open Source bajo licencia Apache-2, y el código está disponible en https://getmdl.io/. El equipo original ya no añade funcionalidades, pero sigue admitiendo mejoras desarrolladas por la comunidad.