Renueva el aspecto de tus páginas web con Material Design Lite


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.

Anuncio: Tus propias PCBs a media en PCBWAY

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.

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,

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.

Anuncio:

Previous Librería de Arduino TriangleSolver
Next Abrir una consola de comandos remota a Raspberry Pi con SSH

¡Deja un comentario!...

1000