> Manuales > Taller de CSS

Guía y primeros pasos para usar Materialize CSS, el framework CSS que permite aplicar fácilmente las guías de diseño de Material Design en sitios web.

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:

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

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.

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.

Nota: Debemos llevar en consideración que el código generalmente los servidores lo entregan comprimido, por lo que realmente la transferencia de real de descarga puede estar en torno de los 80 KB, contando ambos archivos, JS y CSS.

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>
Nota: Los botones de Materialize, tal como indican las guías de diseño de Material Design de Google, tienen un efecto muy atractivo cuando se pulsan. Se crea una onda que lo recorre desde el punto donde se hizo clic. Muchos otros componentes de Materialize sensibles al clic, tienen este mismo efecto de ola.

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);
});
Nota: Este componente tiene una serie de opciones para personalización, que podemos ver en la documentación. Al menos le tendrás que dar los datos de las opciones de autocompletado. En el anterior código se ven las opciones entregadas por medio de un objeto escrito de manera literal, pero obviamente, podrías recuperar ese objeto por medio de una solicitud Ajax al servidor.

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 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.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual