Hoy vamos a explicar un framework CSS que permite a los desarrolladores acelerar nuestro trabajo, a la vez de implementar una guía de diseño de estética cuidada. Se trata de Materialize CSS, una herramienta que se guía por las líneas de diseño de Material Design de Google. Te gustará mucho si tu perfil es más bien técnico y no tanto orientado al diseño, o simplemente si estimas tu tiempo.

Materialize CSS te ofrece una base de CSS sobre la cual implementar cualquier proyecto, ya sea un sitio web o aplicación basada en estándares web. Esa base de código contiene una cantidad enorme de interfaces ya diseñadas, que puedes incorporar a tu proyecto a base de aplicar clases (class CSS). Además tiene una serie de código Javascript asociado, ya que muchas de las interfaces de usuario requieren código de programación para funcionar.

Entre las cosas que te ofrece Materialize encuentras todo tipo de interfaces, como colores, transiciones, tipografías, botones, navegadores, cabeceras, base de datos de iconos, elementos de formulario, tarjetas, tooltips, acordeones, menús desplegables, botones flotantes, migas de pan, menús con pestañas, sistemas de paginación, listas, así como un sistema de rejilla y mucho más. Por supuesto, todos los componentes y las utilidades de layout son responsive y a se adaptan a todo tipo de pantallas, grandes y pequeñas. Por todo, este framework de diseño web es un auténtico regalo para el desarrollador.

En este artículo conocerás más de cerca cuáles son las ventajas e inconvenientes de Materialize CSS y cuáles son los primeros pasos para comenzar a usarlo.

Por qué Materialize CSS

Comenzamos por explicar cuáles son las ventajas de esta herramienta y por qué usarla en vez de otras similares y quizás más conocidas como Bootstrap.

Primero aclarar de modo general que las ventajas e inconvenientes de Materialize CSS son más o menos las mismas que las de cualquier otro framework CSS, pues todos ofrecen más o menos lo mismo.

En la parte positiva, de los frameworks CSS en general, podemos destacar:

• Capacidad de ahorrar mucho tiempo en la etapa de desarrollo, ya que no escribiremos tanto código CSS y Javascript, en comparación con lo que tendríamos que escribir si partimos de cero.
• Aplicando un framework CSS conseguimos una estética atractiva para nuestros desarrollos, y lo podemos conseguir aunque no tengamos especialmente mucha mano con el diseño.
• Nuestros diseños serán más consistentes, ya que iremos aplicando una serie de estilos definidos de antemano, lo que ayudará a que el resultado final tenga un aspecto homogéneo.

Con respecto a las desventajas de los frameworks CSS, que también las hay:

• Muchas veces incorporas al proyecto una cantidad de código que realmente llegas a usar sólo en un porcentaje bajo. Esto quiere decir que, al aplicar todos los estilos CSS y el código Javascript, estarás incluyendo a tu desarrollo más peso del que realmente irás a usar, porque es difícil que llegues a necesitar de todas las interfaces de usuario que el framework te ofrece. Bien es cierto que Materialize CSS se entrega si se desea con su código en Sass, por lo que, si tenemos un conocimiento razonable de este preprocesador, podríamos quitar de manera relativamente fácil las partes de código que no interesan.
• A veces sentirás que desarrollas para el framework, creando código que tiene muchas clases aplicadas a los elementos, que resultarán un verdadero lío si tienes que cambiar de framework o simplemente eliminarlo del proyecto.
• Tu diseño se puede parecer en su base similar al de otros proyectos que usen el mismo framework.

Eres tú como desarrollador el que decide si las ventajas superan a las desventajas, pero lo cierto es que en líneas generales sí resulta interesante, ya que todos apreciamos en el fondo obtener mejores resultados con menos trabajo.

Materialize vs Bootstrap vs Fundation

Materialize CSS es un framework más nuevo que otras alternativas muy conocidas como Bootstrap o Fundation. Esto es interesante porque ha sido capaz de mejorar algunas cosas de herramientas más antiguas. Gracias a ello, Materialize gana la partida por varias razones, pues entre las que podemos destacar.

• Materialize CSS no requiere jQuery para funcionar, aunque si lo tienes lo puedes usar perfectamente en el proyecto y beneficiarte también de la librería Javascript para inicializar más cómodamente los componentes que requiran JS.
• Usa desde el principio recomendaciones CSS que otros frameworks aún no implementan, o han tardado bastante tiempo en incorporar.
• Aplica unas guías de diseño depuradas, Material Design de Google, a las cuales los usuarios están acostumbrados. Esto quiere decir que tus aplicaciones pueden ser más sencillas de usar y resultar más familiares a simple vista. Sobre todo los usuarios de Android estarán muy familiarizados con las guías de diseño "Material", ya que son las usadas de las aplicaciones modernas de Android.

En relación a su peso en Bytes son todos más o menos similares. Materialize ocupa unos 140 KB con su CSS más 180 KB con el JS. Es prácticamente el mismo peso de Bootstrap.

El siguiente vídeo cubre la parte de presentación de Materialize CSS, y ofrece mucha más información para cualquier persona interesada.

Primeros pasos con Materialize CSS

Para incorporar Materialize CSS a un proyecto simplemente tenemos que colocar los enlaces con la hoja de estilos y el Javascript. Si lo hacemos mediante el CDN será solamente incluir un par de líneas de código en tu página.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

La ventaja principal del CDN es que el código de Materialize puede ya estar cacheado en el navegador, por haber visitado anteriormente otras webs que lo usan. El CDN nos libera la descarga de los archivos desde nuestro propio servidor y suele responder muy rápido.

Pero obviamente si lo preferimos podemos descargar el archivo de código de Materialize y colocarlo en nuestro propio servidor. Ya para los desarrolladores más avanzados, se puede instalar desde npm e incorporarlo al sistema de creación de bundles que estemos usando en nuestro flujo de trabajo.

Una vez instalado, aplicar el diseño Material Design en un proyecto es muy sencillo. Simplemente tenemos que sabernos las clases necesarias para cada elementos o cada componente, algo que podemos consultar directamente en la documentación.

Por ejemplo, para hacer un botón estilizado, en lugar de la etiqueta "button" de toda la vida, podremos usar una etiqueta "a", con unas clases CSS determinadas.

<a class="waves-effect waves-light btn">button</a>

Por ejemplo, para hacer un icono usaremos un código como este:

<i class="material-icons prefix">add_a_photo</i>

Pero a medida que el componente sea un poco más complejo, necesitaremos código que dependa de varios elementos HTML. Por ejemplo, para hacer una "card", como esta:

La puedes conseguir con el siguiente HTML, en el que se han aplicado una serie de clases CSS incorporadas por el framework.

<div class="row">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
        <img src="escuelait-backend.png">
        <span class="card-title">Visita EscuelaIT</span>
      </div>
      <div class="card-content">
        <p>Con EscuelaIT puedes aprender de manera fácil a desarrollar y diseñar con cursos completos, intensivos y actualizados.</p>
      </div>
      <div class="card-action">
        <a href="#">EscuelaIT</a>
      </div>
    </div>
  </div>
</div>

Puede parecer complejo el HTML, pero en la documentación de Materialize CSS encontramos el código para copiar y pegar, de modo que usarlo para nuestro sitio web es bastante rápido.

A continuación tienes un vídeo en el que podrás ver los primeros pasos con Materialize CSS.

Algunos componentes de Materialize requieren Javascript

Interfaces más complejas, como podría ser un campo de texto "autocomplete", requiere además un poco de Javascript para funcionar.

Este es el aspecto que tendría un campo de autocompletado con el diseño Material.

Y para conseguirlo tenemos que incorporar dos bloques de código por separado. La parte del HTML la colocaremos en el lugar de la página donde deba aparecer el campo de autocompletado:

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <i class="material-icons prefix">add</i>
        <input type="text" id="autocomplete-input" class="autocomplete">
        <label for="autocomplete-input">Indica tu lenguaje preferido</label>
      </div>
    </div>
  </div>
</div>

Y además en esta ocasión, al tratarse de un componente con un comportamiento especial, necesitamos inicializarlo con Javascript para que funcione. El código de Javascript se coloca por separado, con el resto de scripts de la página. Muchas veces además los componentes tienen un objeto de opciones con los que podemos personalizar el comportamiento, como es el caso de nuestra interfaz de autocompletado.

var options = {
  data: {
    "Java": null,
    "Javascript": null,
    "CSS": null,
    "HTML": null,
    "NodeJS": null,
    "PHP": "logo-php.png"
  },
}
document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.autocomplete');
  var instances = M.Autocomplete.init(elems, options);
});

El objeto de opciones para el autocompletado puede indicar de manera opcional una imagen de un icono, para acompañar el ítem en listado de opciones propuesto.

En la documentación encontrarás los códigos para inicializar los componentes que lo requieren, junto con las opciones de configuración que podemos usar para personalizarlos. El Javascript necesario lo encontrarás en dos versiones:

• El código Javascript nativo
• El código usando jQuery

El código de alternativa jQuery requiere que tengas cargada esa librería en tu página, incluyendo el correspondiente script. Es más sencillo siempre el código de jQuery, pero recuerda que solo debes cargar jQuery en el caso que realmente lo necesites, pues si no, sería un peso innecesario para tu web.

Siguientes pasos para obtener el máximo partido de Materialize CSS

Como has visto, usar componentes sencillos de Materialize no tiene muchos misterios. Simplemente es prestar atención a la documentación y tener un conocimiento general de qué cosas nos ofrece el framework y cómo configurarlas.

La parte un poco más compleja de aplicar es la de la maquetación CSS, el sistema de layout, que si no estamos acostumbrados al modo de trabajar de otros frameworks de diseño, seguramente nos marearán tantas clases y sus posibilidades, saltos de mediaquieries que el framework realiza, etc.

Otra cosa que nos puede resultar más difícil es la parte del "responsive", para que la web se comporte como nosotros necesitamos en las distintas dimensiones de pantallas, configuradas a nuestro antojo. También en algún momento tendrás que ahondar en la personalización del framework para nuestra web, de modo que consigamos una singularidad especial para nuestro diseño.

Sin duda, todo lo irás sacando con el tiempo y bastante práctica, pero si deseas obtener una ayuda más detallada, te recomendamos el curso de Materialize CSS de EscuelaIT, del que hemos extraido los cortes de video que encuentras en este artículo. En él podrás ver cómo se construye un sitio web, usando las guías de Material Design gracias a Materialize y cómo personalizar y extender el framework para conseguir cualquier resultado que nos propongamos.