materialize css

¿Qué es Materialize?

Materialize es una biblioteca de interfaz para la web. En concreto, te da una hoja de estilos con rejilla, tipografía, colores y botones, y un archivo JavaScript con componentes interactivos. Así, puedes montar menús, ventanas modales o selectores de fecha sin escribir todo el CSS desde cero.

Su sello es el aspecto de Material Design, el sistema visual que Google usa en Android y en sus aplicaciones. Por eso las páginas hechas con Materialize recuerdan a Gmail o a Google Drive: tarjetas con sombra, botones planos y un color principal. Si quieres repasar esas pautas, lee nuestra guía sobre los principios básicos de Material Design.

Un equipo de estudiantes de la Universidad Carnegie Mellon creó Materialize en 2014, según la página del equipo original. Hoy lo mantiene una comunidad independiente bajo licencia MIT. En otras palabras, es gratis y puedes usarlo en proyectos comerciales.

Qué significa «framework CSS» en este caso

Un framework CSS es un conjunto de estilos y convenciones ya resueltos. Tú escribes HTML y le añades clases como btn, card o col s12 m6. Después, la hoja de estilos se encarga del aspecto y de la adaptación a cada pantalla. Materialize suma, además, un JavaScript propio para las piezas que reaccionan al usuario.

¿Sigue mantenido Materialize en 2026?

Sí, aunque con matices. Hay dos repositorios con el mismo nombre y conviene distinguirlos antes de instalar nada.

El proyecto original, Dogfalo/materialize, publicó su última versión, la 1.0.0, el 9 de septiembre de 2018. Su último cambio en el código data del 1 de junio de 2020, según la API de GitHub consultada el 17 de octubre de 2026. Aun así, conserva unas 38.800 estrellas y su web, materializecss.com, sigue en línea con la documentación de la 1.0.

La continuación es el fork comunitario materializecss/materialize. Su equipo lanzó la 2.4.0 el 24 de septiembre de 2026 y la 2.3.3 en abril del mismo año. Tiene menos estrellas, unas 990, pero recibe correcciones de forma regular. Su documentación está en materializeweb.com.

Un detalle práctico: el 17 de octubre de 2026, la portada de materializeweb.com todavía mostraba la 2.2.2 como última versión. En cambio, npm y GitHub ya ofrecían la 2.4.0. Por lo tanto, comprueba siempre la versión en el listado de versiones de GitHub.

Cómo instalar Materialize

Tienes tres caminos. El más rápido es el CDN, ideal para prototipos. Para un proyecto con herramientas de compilación, conviene npm. Y si trabajas sin conexión, puedes descargar los archivos desde GitHub.

Instalar Materialize con CDN

1. Abre tu archivo HTML y añade la etiqueta de la hoja de estilos dentro de <head>.
2. Coloca el script justo antes de cerrar </body>.
3. Incluye la metaetiqueta viewport para que la rejilla se adapte al móvil.
4. Inicializa los componentes con M.AutoInit() cuando cargue la página.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mi página con Materialize</title>
  <!-- CSS de Materialize 2.4.0 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.4.0/dist/css/materialize.min.css">
</head>
<body>
  <!-- Tu contenido -->
  <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2.4.0/dist/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      M.AutoInit();
    });
  </script>
</body>
</html>

Ambas direcciones de jsDelivr respondieron correctamente el 17 de octubre de 2026. Fija siempre el número de versión en la URL. Así evitas que una actualización cambie tu diseño sin avisar.

Instalar Materialize con npm

Primero instala el paquete en tu proyecto. Después importa el CSS y el JavaScript desde tu archivo de entrada. El paquete ofrece versiones para import y para require, según su archivo package.json.

npm install @materializecss/materialize

// main.js
import '@materializecss/materialize/dist/css/materialize.min.css';
import * as M from '@materializecss/materialize';

document.addEventListener('DOMContentLoaded', () => {
  M.AutoInit();
});

Cuidado con el nombre: materialize-css instala la vieja 1.0.0. El paquete actual es @materializecss/materialize.

Descargar Materialize desde GitHub

En la página de versiones del fork encontrarás los archivos compilados y el código fuente en Sass. Esta opción sirve, por ejemplo, si quieres cambiar las variables de color antes de compilar.

Ejemplo de Materialize: una tarjeta con rejilla y botones

Este ejemplo crea dos tarjetas que ocupan toda la pantalla en el móvil y la mitad en una tableta. Además, añade un botón principal, uno tonal y uno contorneado, tres estilos que la versión 2 incluye.

<div class="container">
  <div class="row">
    <div class="col s12 m6">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Plan básico</span>
          <p>Diseño web adaptable con componentes de Material Design.</p>
        </div>
        <div class="card-action">
          <a class="btn" href="#contacto">Contratar</a>
          <a class="btn tonal" href="#detalles">Ver detalles</a>
        </div>
      </div>
    </div>
    <div class="col s12 m6">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Plan avanzado</span>
          <p>Incluye formularios, menú lateral y ventanas modales.</p>
        </div>
        <div class="card-action">
          <a class="btn outlined" href="#comparar">Comparar planes</a>
        </div>
      </div>
    </div>
  </div>
</div>

Fíjate en las clases de la rejilla. s12 ocupa las 12 columnas en pantallas pequeñas, mientras que m6 ocupa 6 en pantallas medianas. En la versión 2, la rejilla usa CSS Grid por dentro, aunque las clases son las mismas que en la 1.0.

Componentes principales de Materialize

Materialize agrupa sus piezas en estilos, componentes y formularios. La tabla resume los más usados de la 2.4.0. Hemos tomado la lista de la función M.AutoInit() del propio archivo compilado.

Cómo inicializar los componentes con JavaScript

Desde la versión 1.0, Materialize no activa los componentes por sí solo. Tienes dos opciones. La primera es M.AutoInit(), que busca todas las clases conocidas y las activa a la vez. Otra vía es iniciar cada componente con opciones propias.

// Opción 1: activar todo lo que encuentre en la página
M.AutoInit();

// Opción 2: activar solo el menú lateral, con opciones
document.addEventListener('DOMContentLoaded', () => {
  const menus = document.querySelectorAll('.sidenav');
  M.Sidenav.init(menus, { edge: 'right' });
});

Esta segunda vía es más eficiente en páginas grandes, porque solo activas lo que usas.

Ventajas de usar Materialize

• Aspecto coherente desde el primer minuto. Las pautas de Material Design ya están aplicadas, así que no necesitas un diseñador para empezar.
• Componentes completos. Incluye piezas que otros frameworks dejan fuera, como el selector de hora o el botón flotante.
• Sin jQuery. Desde la 1.0 no depende de jQuery. Por su parte, la 2.x está escrita en TypeScript y solo declara una dependencia, un polyfill de fechas.
• Curva de aprendizaje suave. Si conoces HTML, entiendes las clases en una tarde.
• Modo oscuro y temas. La 2.x usa variables de color al estilo Material 3, de modo que cambiar la paleta es más sencillo que en la 1.0.

Límites y desventajas de Materialize

• Comunidad pequeña. El fork tiene unas 990 estrellas en GitHub, frente a las decenas de miles de Bootstrap o Tailwind. Por eso encontrarás menos tutoriales y respuestas.
• Documentación desfasada. Muchos tutoriales en español explican la 1.0, cuyas clases no siempre funcionan en la 2.x.
• Cambios al migrar. Por ejemplo, la hoja de estilos de la 2.4.0 ya no incluye las clases de color de la 1.0, como red, teal o lighten-2, porque usa variables de color. Antes de migrar, revisa tu HTML.
• Peso. En la 2.4.0, el CSS minificado ocupa unos 126 KB y el JavaScript unos 138 KB, sin compresión. Si solo usas tres componentes, compila tu propia versión con Sass.
• Aspecto reconocible. Una web con Materialize se parece a una app de Google. Para una marca con identidad propia, tendrás que personalizar bastante.

Materialize frente a Bootstrap, Tailwind y otras alternativas

La elección depende de tu proyecto. Bootstrap es la opción más segura por comunidad. Tailwind da más libertad de diseño, aunque exige escribir más clases. Mientras tanto, Materialize brilla cuando quieres el aspecto de Material Design sin usar React ni Angular.

Un dato curioso: la biblioteca oficial de Google, Material Web, avisa en su repositorio de que está en modo de mantenimiento a la espera de nuevos responsables. Así que Materialize no es la única opción de Material Design con un futuro incierto.

¿Cuándo conviene usar Materialize hoy?

Úsalo si haces un prototipo rápido, un panel interno o una web pequeña con la estética de Google. También encaja en proyectos que ya usan la 1.0 y pueden migrar a la 2.x con calma.

En cambio, evítalo si tu equipo trabaja con React, Vue o Angular, porque allí hay bibliotecas nativas mejor mantenidas. Tampoco es la mejor base para una web corporativa con identidad visual fuerte. En ese caso, Tailwind o un tema a medida te darán más control.

Por último, piensa en el rendimiento. Cada kilobyte de CSS y JavaScript que no usas retrasa la carga en el móvil y empeora métricas como el LCP. Te lo contamos en nuestra guía de Core Web Vitals y en cómo optimizar una página web para móviles.

Materialize, WordPress y posicionamiento en buscadores

Materialize no mejora tu posición en Google por sí mismo. Lo que importa es que la página cargue rápido, se lea bien en el móvil y tenga un HTML limpio. Por ejemplo, si cargas el framework completo y además un tema pesado, sumas código que Google tendrá que procesar.

Si usas WordPress, ten cuidado con los temas que mezclan varios frameworks a la vez. Explicamos ese problema en los problemas de usar temas gratuitos de WordPress. Y si necesitas que tu web gane visibilidad, revisa nuestro servicio de posicionamiento web en buscadores.

La entrada Materialize: qué es, cómo instalarlo y si sigue mantenido se publicó primero en Centria Group.