Tutorial: Theming en Content Island

00:00 / 00:00

Theming y Content Island

Cuando desarrollamos para un cliente, es muy común que tenga una imagen corporativa definida: colores, tipografías, estilos…

Y también es habitual que estos elementos cambien con el tiempo, o que varíen si se trata de un grupo de empresas o diferentes marcas dentro de una misma organización.

A primera vista, podríamos pensar que esto es responsabilidad exclusiva del CSS y de la capa de UI, y que un Headless CMS no debería preocuparse de ello.

Pero ¿y si pudiéramos definir esta imagen corporativa desde el HCMS, y aplicarla de forma coherente a todo el contenido que generamos?

Caso simple

Veamos un caso sencillo: un blog con un diseño bien definido.

Los colores y tipografías principales están aislados en variables CSS, lo que nos permite gestionar fácilmente el aspecto del sitio desde un único punto.

./styles/global.css

:root {
  /*theme variables*/
  --primary-color: #1d3353;
  --font-name-body: 'IBM Plex Sans';
  --font-name-title: 'IBM Plex Sans Condensed';

  /*font family*/
  --ff-title: var(--font-name-title), sans-serif;
  --ff-body: var(--font-name-body), sans-serif;

  /*color palette*/
  --pure-white: #fff;
  --grey-700: #333;
  --primary-light-color: hsl(from var(--primary-color) h calc(s + 20) calc(l + 10));

  /*text colors*/
  --text-color: var(--grey-700);
  --text-color-light: var(--pure-white);

Pero... no es óptimo ya que si queremos actualizar un color primario o una tipografía, tenemos que tocar el código fuente, ¿No sería buena idea que esos tokens de diseño estuvieran en un lugar accesible para el cliente?

Integración con Content Island

¿Qué podemos hacer desde Content Island?

Podemos definir la estructura de la imagen corporativa en un objeto de configuración, alimentar su contenido en la propia interfaz del HCMS, para que luego pueda ser utilizado por los distintos componentes de la aplicación.

Content Island ficha de un theme

Gracias a esto, con unas pocas modificaciones, podemos aplicar cambios globales a todo el contenido desde Content Island, sin tocar ni una sola línea de código.

Vamos a ver paso a paso cómo podemos implementar esto.