¿Qué nos aporta Materialize CSS en Desarrollo Web?

Comenzamos año en este blog analizando un recurso para desarrolladores web que está dando mucho de qué hablar: Materialize CSS. Concebido especialmente para proyectos que hagan del  Material Design su bandera, este framework CSS nos permite ahorrar mucho tiempo y esfuerzo al implementar y optimizar nuestros proyectos web. No sólo contiene multitud de clases CSS ya configuradas,  además incorpora código JavaScript para añadir a nuestras interfaces. En este artículo analizamos sus ventajas e inconvenientes, lo comparamos con otras alternativas, como Bootstrap o Fundation y damos nuestros primeros pasos prácticos con Materialize CSS.

Por un lado, las ventajas de Materialize CSS:

• El tiempo de desarrollo es menor, pues la mayor parte del código nos lo encontramos ya escrito.
• Si no somos muy hábiles en el diseño podemos aplicar un framework CSS para conseguir una bonita estética en nuestros proyectos.
• Los diseños son más robustos y la estética final es más homogénea.
• Materialize sólo ocupa aproximadamente unos 140 KB con su CSS, a lo que hay que añadirle 180 KB con el JS.

Y, como todo tiene su lado negativo, algunos de sus inconvenientes:

• Tal vez se cuela más código del que vas a utilizar, aunque siempre podrás quitar lo que no te interese.
• Si alguna vez quieres cambiar de framework su adaptación será más liosa.
• El diseño que realizas no es del todo exclusivo y podrás ver, casi con seguridad, algo parecido en otros sitios.

Materialize vs otros frameworks

Otras alternativas bastante conocidas a Materialize CSS son Bootstrap o Fundation pero ¿por qué Materialize CSS es mejor? En pocas palabras:

• No requiere jQuery para funcionar.
• Usa desde el principio recomendaciones CSS que otros frameworks aún no implementan (o que han tardado bastante tiempo en incorporar).
• Al usar Material Design de Google, los usuarios están más familiarizados.

Primeros pasos con Materialize CSS

Hemos de incluir los archivos con la hoja de estilos y el JavaScript. En caso de hacerlo mediante el CDN incluiremos un par de líneas de código en nuestra 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>

Si lo hacemos con CDN tenemos la ventaja de que nos ahorra la descarga de los archivos desde nuestro servidor y la respuesta suele ser más rápida.

Para hacer un botón estilizado, usaremos una etiqueta a, con unas clases CSS determinadas.

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

Y si queremos hacer un icono, podremos usar el siguiente código:

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

Para algo más complejo, como por ejemplo hacer una tarjeta, podemos aplicar algunas clases CSS.

<div class="row">
   <div class="col s12 m7">
     <div class="card">
       <div class="card-image">
         <img src="arsys-backend.png">
         <span class="card-title">Visita Arsys</span>
       </div>
       <div class="card-content">
         <p>Con Arsys, podrás aprender a cómo iniciarte en Materalize CSS.</p>
       </div>
       <div class="card-action">
         <a href="#">Arsys</a>
       </div>
     </div>
   </div>
 </div>

Si queremos interfaces más complejas será necesario algo de JavaScript para hacerlo funcionar. En el siguiente ejemplo, vemos cómo aplicar esto a un campo de texto autocomplete.

Por un lado, tendríamos la parte HTML:

<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">Cuál es tu lenguaje favorito </label>
       </div>
     </div>
   </div>
 </div>

Y, por otro, el  JavaScript:

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);
 });

Seguramente,  la parte más engorrosa de Materialize sea aplicar la maquetación CSS, el sistema de layout. Si no tenemos la costumbre de trabajar con otros frameworks de diseño, nos puede abrumar ver tantas clases y saltos de media queries. También tendremos que acostumbrarnos a sus características de Responsive Design, para lo que conviene profundizar en su personalización.