6.5. Trabajo con CSS en Drupal. Puntos de interrupción y configuración responsive en el tema de Drupal.

En tutoriales anteriores, ya conectamos CSS a nuestro tema. Para hacerlo, indicamos en el archivo drupalbook.info.yml:

libraries:
  - drupalbook/global-styling

Luego, creamos el archivo drupalbook.libraries.yml, donde especificamos qué archivos CSS incluir:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

A partir de aquí, veremos en detalle cómo trabajar con CSS en nuestro tema.

Ya mencionamos anteriormente que puedes especificar el atributo media para cada archivo CSS entre llaves. Para print.css indicamos media: print, de modo que este CSS se cargue solo para impresión. También existe media: all (por defecto) para todos los modos de visualización, y media: screen para modos que no son de impresión.

Sobrescribir CSS de otras bibliotecas

Puedes usar libraries-override para sobrescribir archivos CSS del núcleo:

libraries-override:
  # Reemplazar toda la biblioteca
  core/drupal.collapse: mytheme/collapse
  
  # Reemplazar partes individuales, como un archivo CSS
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css
  
  # Eliminar parte de la biblioteca
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false
  
  # Eliminar toda la biblioteca
  core/modernizr: false

Breakpoints en Drupal

Los breakpoints (puntos de interrupción) en Drupal forman parte de la configuración del tema y permiten personalizar la apariencia del sitio según el tamaño de pantalla del dispositivo. Esto hace que el sitio sea adaptativo para dispositivos como computadoras de escritorio, tabletas, teléfonos y hasta relojes inteligentes.

El módulo Breakpoint estandariza el uso de estos puntos, detectando resoluciones de pantalla y activando los estilos apropiados. Solo necesitas definir los tamaños deseados.

Sin embargo, configurar breakpoints en el tema no tiene efecto visual inmediato. Por ejemplo, si activas el módulo del núcleo "Responsive Image", podrás usar los breakpoints para mostrar imágenes con diferentes presets según el dispositivo. Vamos a añadir breakpoints a nuestro tema.

Un breakpoint consiste en un nombre y una media query. La media query es una forma estándar de definir el punto de ruptura, como por ejemplo: (min-width: 40em).

Para agregar breakpoints, crea el archivo miTema.breakpoints.yml. En nuestro caso: drupalbook.breakpoints.yml.

Cada entrada representa un breakpoint único e incluye:

1. label: Título del breakpoint
2. mediaQuery: Condición CSS para el tamaño de pantalla
3. weight: Peso para determinar prioridad cuando hay rangos que se superponen
4. multipliers: Factor de escala, como 1x o 2x para pantallas retina

Archivo drupalbook.breakpoints.yml:

drupalbook.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
drupalbook.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
drupalbook.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

Agrega este archivo en tu tema, reemplazando "drupalbook" por el nombre de tu propio tema.

Imagen responsiva

Ahora activamos el módulo "Responsive Image":

Luego, ve a la página de estilos de imagen responsiva:

admin/config/media/responsive-image-style

Desde allí puedes editar el preset "Narrow":

admin/config/media/responsive-image-style/narrow

Y asignar que los tamaños "Narrow" usen los breakpoints de nuestro tema:

screenshot

Ahora puedes asignar presets distintos para cada breakpoint en el preset "Narrow":

screenshot

Si configuramos un campo para mostrarse con el preset Narrow, veremos imágenes distintas según el tamaño de pantalla:

screenshot