Theming — 2. Content Island y theming

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• 1. Intro
• 2. Content Island y theming
• 3. Integración con Astro

Definiendo un tema en Content Island

En esta lección vamos a ver cómo pasar de un tema CSS estático a uno dinámico, y que sea configurable directamente desde Content Island 🏝️.

Explorando el sitio web

Si echamos un vistazo al ejemplo del blog, vemos que los estilos principales se basan en unos pocos valores clave (y la mayoría de derivados se calcula a partir de ellos):

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

  /*background colors*/
  --background-footer-color: var(--grey-700);

  /*hover colors*/
  --title-hover-color: hsl(from var(--primary-color) h calc(s + 20) calc(l + 10));
  --menu-hover-color: hsl(from var(--primary-color) h calc(s + 20) calc(l + 63));

  /*border colors*/
  --border-color: var(--grey-700);

Vamos a poner atención a estas tres variables:

--primary-color: #1d3353;
--font-name-body: 'IBM Plex Sans';
--font-name-title: 'IBM Plex Sans Condensed';

Controlando el color primario y las fuentes usadas para los títulos y el cuerpo del texto, ya podemos modificar gran parte del aspecto visual del sitio.

Así que vamos a modelar esos valores en nuestro CMS.

Según el proyecto, podrías querer añadir otros atributos como un color secundario, tamaños de fuente, espaciado, etc. Todo esto también se puede incluir como parte del modelo de tema, todo depende de como esté implementado tu proyecto.

Modelando en Content Island

En el modelo actual de nuestro proyecto de blog ya existen entidades como About y Post, que representan el contenido visible del sitio.

Ahora vamos a crear una nueva entidad llamada Theme, que será la encargada de definir la imagen visual.

• Color → de tipo Color (ya disponible en Content Island).

• FontTitle → de tipo Font (lo definiremos ahora), de momento lo ponemos como texto

• FontBody → también de tipo Font, aunque de momento lo ponemos como texto.

Content Island incluye un tipo de dato para color, y también puedes usar tipos numéricos si quieres añadir más control (por ejemplo, tamaños o espaciado).

Para las fuentes, en nuestro caso, vamos a definir un tipo que incluya el nombre y también la URL al CDN donde se aloja la fuente.

Creamos una entidad llamada Font, con estos campos:

• Name → tipo texto, nombre de la fuente.

• Url → tipo URL, enlace al CDN de la fuente.

Vamos a introducir algunas fuentes de ejemplo, estos datos los he sacado de:

https://fonts.google.com/

Para el ejemplo introduzco dos, el resto le doy a la pausa para no aburrirte:

• Name: IBM Plex Sans

• Url: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap

• Name: IBM Plex Sans Condensed

• Url: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap

• Name: DM Serif Text

• Url: https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap

• Name: Manrope

• Url: https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap

• Name: Orbitron

• Url: https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap

• Name: Inter

• Url: https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap

• Name: Quicksand

• https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap

• Name: Monserrat

• Url: https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap

• Name: Roboto.

• Url: https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap

• Name: Poppins

• Url: https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap

Una vez definido este tipo, volvemos a la entidad Theme y añadimos los dos campos:

• fontTitle → de tipo Font, para los títulos.
• fontBody → de tipo Font, para el texto del cuerpo.

Ahora ya podemos crear nuestro primer tema.

Vamos a definir:

• Color: #205D0A
• fontTitle: Orbitron
• fontBody: Inter

En el siguiente paso, vamos a ver cómo podemos utilizar este tema en nuestro sitio web.