Materialize: Qué es, ventajas y primeros pasos

Un framework CSS es un conjunto de herramientas open source con hojas de estilos y buenas prácticas de diseño, que permiten al desarrollador web generar entornos UI dinámicos, escalables y adaptables a las necesidades del usuario. También permite olvidarse de las tareas repetitivas y centrarse en los elementos únicos de cada diseño que puede aportar valor a un sistema determinado.

Por supuesto no todo framework es tan sutil en su implementación, aun así, el objetivo de todos es imitar el movimiento real de las cosas en un mundo virtual, lograr un entorno UI simplificado e intuitivo para el usuario y al mismo tiempo equilibrar la carga de los elementos visuales en su entorno.

A pesar del gran abanico de opciones frameworks CSS para desarrollo Frontend en el mercado, uno de ellos es Materialize, una herramienta lanzada en septiembre de 2011 y basada en Material Design de Google. Según dev.to y su artículo titulado “Best CSS Frameworks in 2022“, Materialize es considerado como el tercer framework CSS para este 2022, después de Tailwind y Bootstrap.

En el mercado actualmente existen otros Frameworks que manifiestan mejor desempeño dentro del mercado dedicado al desarrollo Web, pero veamos por qué Materialize se ha adentrado en los estándares del diseño web actual y como lo ha hecho.

Qué es Materialize

Como muchas otras herramientas para hojas de estilos en cascada, es un framework CSS responsivo, robusto y adaptable; cuyas bases de diseño las hereda de Google y su estándar de desarrollo Material Design, que es el lenguaje visual que concentra los principio clásicos del buen diseño con la innovación de la “tecnología y la ciencia moderna” para entornos móviles (Android, iOS y Flutter) y para Internet.

Materialize permite estilos predeterminados que aceleran los tiempos de desarrollo a través de la incorporación de componentes personalizados. Al mismo tiempo que las animaciones y transiciones estilizadas propias de Google, brindan una experiencia más fluida en el proceso de desarrollo para diseñadores y su implementación en sus proyectos. Por otro lado, la UX (Experiencia de Usuario) se beneficia, ya que se crea un marco referencial, que incorpora componentes y animaciones que brindan entornos más intuitivos así como sistemas receptivos subyacentes u ocultos en todas las plataformas, creando un GUI (Interfaz Gráfica del Usuario) más homogéneo en la web.

En general y como bien indica la página oficial de Materialize, la creatividad y la innovación son los pilares que han motivado a gestionar este framework CSS. Los componentes como cuadrículas, tipografía, color e imágenes buscan generar una sensación de jerarquía, significado y enfoque; otorgando una guía visual para los usuarios. Y el movimiento o animaciones ofrece al usuario establecer un paralelismo entre lo que ve en la pantalla y en la vida real. Al proporcionar retroalimentación y familiaridad, esto le permite que se sumerja completamente en la tecnología. Materialize posee consistencia y continuidad además de brindar información subconsciente adicional sobre objetos y transformaciones.

Todo esto documentado de manera detallada junto con códigos específicos, listos para ser implementados en proyectos Web para comenzar a adoptar estos estándares de diseño, los cuales están muy extendidos gracias a Google. El siguiente enlace te permite acceder a los componentes de Materialize.

Ventajas de usar Materialize

Como todo framework CSS, Materialize, posee ventajas que se ajustan no solo a su implementación sino también a la estética y a su arquitectura:

• Es similar a otros frameworks CSS al adaptarlo a tu proyecto: descargando directamente desde su página oficial, a través de un procesador CSS (por ejemplo, Sass), añadiendo su cdnjs al HEAD del código HTML y a través de la instalación de dependencias npm. Esto facilita su acceso y se vuelve un parámetro particular en comparación a sus similares.

• La estética que propone Materialize ya esta implementada a través de interfaces de Google, lo que la vuelve más intuitiva que cualquier otro framework. Esto encierra una UX mucho más sensible a los cambios y determinada por parámetros y métricas de usabilidad más estables y familiares para el usuario.

• No depende de JQuery para incorporar componentes al diseño del proyecto (lo maneja como una alternativa de implementación).

• Su estrategia de implementación es fácil de concebir, inclusive para desarrolladores poco experimentados.

• Permite una rápida implementación de entornos UI.

• Alta tasa de adaptabilidad y compatibilidad hacia diversos navegadores.

• Ayuda a establecer buenos hábitos de diseño.

• No nos olvidemos de su filosofía “mobile first”, lo que significa que es adaptable siempre para dispositivos móviles.

• La amplia gama de componentes para cualquier necesidad está marcada por ciertas peculiaridades dentro de su diseño, por ejemplo:

  • Cards: muestran un diseño mucho más estético y particular que sobresalen de los otros modelos.
  • Chips: relacionados con la representación de etiquetas informativas o contactos en sus elementos.
  • FeatureDiscovery: muestran información relevante de manera muy sofisticada usando las zonas esquineras de la pantalla.
  • Pushpin: genera una sobre posición de diferentes contenidos en la misma plataforma visual.
  • Sidenav: permite implementar un menú vertical a un lado de la pantalla.
  • Range: formato de rápida implementación para su uso.
  • Datepicker: la IU para escoger fechas es muy intuitivo y agradable.
  • Text Inputs: los placeholders están animados y pasan a ser un mensaje visual animado.
  • Icons: su repositorio de 932 iconos personalizados permite 4 tamaños para implementar.
  • Buttons: 3 presentaciones que se mezclan con iconos, efectos (wave), y tamaños: Raised, Floating y Flat.
  • Autocomplete: con la que puedes gestionar un input text con sugerencias para completar la palabra a escribir.

Primeros pasos con Materialize

Si eres de los que prefiere mantener el código CSS de tu framework CSS en tu disco, no hay problema, Materialize permite descargar por completo su librería bajo el siguiente directorio:

​ |MyWebsiteFolder

​ |—-./css/materialize.css

​ |—-./css/materialize.min.css

​ |—-./js/materialize.js

​ |—-./js/materialize.min.js

​ |—-./fonts/roboto

​ |—-./index.html

El o los documentos que van a ser relacionados con este framework, deberán tener en su sección de HEAD y del BODY del código HTML los siguientes vínculos o “links”:

  <!DOCTYPE html>
  <html>
    <head>
      <!--Importamos Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Importamos materialize.css-->
      <link type="text/css" rel="stylesheet" href="./css/materialize.css" media="screen,projection"/>
      <!--Permitimos que el navegador se optimice para dispositivos móviles-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

      <!--JavaScript ira al final del body para optimizar su implementación-->
      <script type="text/javascript" src="./js/materialize.js"></script>
    </body>
  </html>

Vale la pena destacar que Materialize te descarga dos versiones de cada archivo: el normal y uno con extensión .min.css. Los archivos .min.css están comprimidos para reducir tiempos de carga del código, pero su contenido sigue siendo el mismo. En ese caso el código a implementar para arrancar Materialize dentro de un archivo HTML con archivos .min.css, seria:

  <!DOCTYPE html>
  <html>
    <head>
      <!--Importamos Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Importamos materialize.css-->
      <link type="text/css" rel="stylesheet" href="./css/materialize.min.css" media="screen,projection"/>
      <!--Permitimos que el navegador  se optimice para dispositivos móviles-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

      <!--JavaScript ira al final del body para optimizar su implementación-->
      <script type="text/javascript" src="./js/materialize.min.js"></script>
    </body>
  </html>

Ahora, si prefieres utilizar servicios de cdnjs para vincular a los archivos HTML, pues el código a implementar seria el siguiente:

  <!DOCTYPE html>
  <html>
    <head>
      <!--Importamos Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Importamos materialize.css desde su cdnjs-->
     <link rel="stylesheet"       
     ref="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <!--Permitimos que el navegador  se optimice para dispsitivos moviles-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>

      <!--JavaScript ira al final del body para optimizar su implementacion desde cdnjs-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
  </html>

Y listo, estamos preparados para añadir elementos o componentes que nos proporciona Materialize, según lo que necesitemos implementar en el diseño de nuestro proyecto. Solo necesitamos escoger el elemento o componente web más idóneo y copiar su código en el lugar solicitado de tu HTML.

Por ejemplo, si deseáramos incorporar una barra de navegación para nuestro proyecto, copiaríamos el código referente al componente navbar (barra de navegación) de Materialize y personalizarlo. El código resultante sería:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <title>Materialize</title>
    </head>

  <body>
    <div class="container">
    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
        <li><a href="#!">uno</a></li>
        <li><a href="#!">dos</a></li>
        <li class="divider"></li>
        <li><a href="#!">tres</a></li>
    </ul>
        <nav class="">
            <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logotipo</a>
            <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Inicio</a></li>
                <li><a href="badges.html">Componentes</a></li>
                <!-- Dropdown Trigger -->
                <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">
                    Menu<i class="material-icons right">arrow_drop_down</i></a></li>
            </ul>
            </div>
        </nav>
    </div>

    <!--JavaScript ira al final del body para optimizar su implementación desde cdnjs-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

Luego de implementar este código el renderizado por el navegador seria el siguiente:

Ahora, si necesitamos cambiar el color de este navbar asistimos a la paleta de colores que posee Materialize y añadimos el color excogido a traves de una clase en el nav declarado en el codigo HTML. Según el ejemplo anterior, lo haríamos aumentando en la etiqueta nav la exprecion “ class=”amber” “ (en este caso hemos escogido amber como color). El resultado sería el siguiente:

Ahora si necesitamos una tabla, el modelo propuesto por Materialize, viene ya con un formato definido y que se ajusta al estándar genérico de HTML. Para este ejemplo hemos cambiado los colores tanto de la cabecera de la tabla o THEAD aumentando la clase class=”lime-text” y también del contenido de la tabla con la clase class=”green-text”:

    <div class="container">
        <table class="highlight centered responsive-table">
            <!--Código con configuración para la cabecera de la tabla-->
            <thead class="lime-text"> <!--Se define el color de la letra aumentando terminación -text-->
            <tr>
                <th>Name</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
            </thead>
            <!--Código para el cuerpo de la tabla-->
            <tbody class="green-text"> <!--Se define el color de la letra aumentando terminación -text-->
            <tr>
                <td>Alvin</td>
                <td>Eclair</td>
                <td>$0.87</td>
            </tr>
            <tr>
                <td>Alan</td>
                <td>Jellybean</td>
                <td>$3.76</td>
            </tr>
            <tr>
                <td>Jonathan</td>
                <td>Lollipop</td>
                <td>$7.00</td>
            </tr>
            <tr>
                <td>Jonathan</td>
                <td>Lollipop</td>
                <td>$7.00</td>
            </tr>
            <tr>
                <td>Jonathan</td>
                <td>Lollipop</td>
                <td>$7.00</td>
            </tr>
            </tbody>
        </table>
    </div>

Observamos que aumentando al color la terminación -text, el color se aplica directamente en el texto, caso contrario lo considera como el fondo o background. Del código propuesto obtenemos el siguiente resultado:

Al retirar la terminación -text al color incorporado, dejando únicamente el color, obtenemos el siguiente resultado (en este caso lo haremos con la cabecera de la tabla):

   <div class="container">
        <table class="highlight centered responsive-table">
            <!--Código con configuración para la cabecera de la tabla-->
            <thead class="lime"> <!--Se define el color del background-->
            <tr>
                <th>Name</th>
                <th>Item Name</th>
                <th>Item Price</th>
            </tr>
            </thead> 
            ...
   <div>

Finalmente veamos cómo trabajan los botones en Materialize y la declaración de iconos. En el siguiente código, mostramos como se declaran botones tanto con el tag button como con el tag a. En este caso hemos incorporado colores de fondo y de texto. También el tag i permite añadir iconos declarando la clase class=”material-icons” junto a su posición o ubicación en el botón (right o left) y el nombre del icono (send y cloud-upload). Por ultimo, el nombre que se mostrara en el botón.

    <div class="container center">

        <button class="btn waves-effect waves-light lime green-text" type="submit" name="action">Enviar
            <i class="material-icons right">send</i>
          </button>

        <a class="waves-effect waves-light btn orange lime-text"><i class="material-icons 
        left">cloud_upload</i>Cargar</a>

    </div>

El resultado del código previo seria el siguiente:

Hemos alterado el código anterior, mostrando las opciones de tamaño que permite Materialize, y mostrando los botones solo con iconos.

    <div class="container center">

        <button class="btn waves-effect waves-light lime green-text btn-large" type="submit" name="action">
            <i class="material-icons">send</i>
          </button>

        <a class="waves-effect waves-light btn orange lime-text btn-small"><i class="material-icons">cloud_upload</i></a>

    </div>

Conclusión

Objetivamente, todo framework CSS posee una similitud, el mejorar y disminuir tiempos de desarrollo e implementación del diseño de interfaces dentro de un proyecto web (Apps o WebApps, Web Site, E-commerce, etc.). La diferencia radica en las tendencias que deseas plasmar a través de tu diseño.

En este caso Materialize permite alcanzar una estética muy familiar y robusta y un estándar de gama alta ya probado en el mercado actual. Te animo a que lo pruebes dentro de tus procesos de desarrollo y diseño.