Sesión 5: personalización de estilos con CSS

Creación de temas personalizados en Drupal 10

En esta sesión, aprenderemos cómo integrar archivos CSS en un tema de Drupal y aplicar estilos personalizados para controlar el diseño visual del sitio. También veremos buenas prácticas para la organización de los estilos, de modo que el tema sea fácil de mantener y escalar.

Objetivo

El objetivo de esta sesión es integrar archivos CSS en el tema de Drupal y utilizarlos para personalizar el diseño visual. Aprenderás a configurar los archivos de estilo dentro del tema y a estructurar tus estilos de manera ordenada y escalable.

Contenido

Integración de archivos CSS en un tema de Drupal: Cómo registrar archivos CSS en el tema y asegurarse de que se carguen correctamente en el sitio.
Organización de estilos CSS: Consejos para estructurar y modularizar los estilos en tu tema, de forma que sean fáciles de entender y mantener.
Buenas prácticas para el uso de CSS en Drupal: Optimización del código CSS, uso de selectores específicos y estrategias para evitar conflictos con otros estilos.

Integración de archivos CSS en un tema de Drupal

Para agregar archivos CSS en un tema de Drupal, debes registrar estos archivos en el archivo de configuración .info.yml de tu tema. Sigamos estos pasos:

Crear la carpeta css:
- En la carpeta de tu tema (por ejemplo, themes/custom/mi_tema), crea una subcarpeta llamada css.
- Dentro de css, crea un archivo llamado styles.css. Este archivo contendrá todos los estilos personalizados que aplicaremos al tema.
Registrar el archivo CSS en el archivo .info.yml:
- Abre el archivo .info.yml de tu tema (por ejemplo, mi_tema.info.yml).
- Agrega la siguiente línea para registrar el archivo CSS y hacer que Drupal lo cargue automáticamente:
  libraries: - mi_tema/estilos
Crear la biblioteca de estilos:
- En la carpeta raíz del tema, crea un archivo llamado mi_tema.libraries.yml.
- Define una biblioteca llamada estilos y especifica el archivo CSS que has creado:
  estilos: css: theme: css/styles.css: {}
- Este código le indica a Drupal que cargue css/styles.css como parte de la biblioteca estilos y aplique los estilos a todo el tema.
Verificar la integración:
- Limpia la caché de Drupal con drush cache:rebuild o desde la interfaz de administración.
- Revisa el sitio en el navegador y asegúrate de que el archivo styles.css se esté cargando correctamente. Puedes confirmarlo inspeccionando el código fuente de la página y verificando que el archivo CSS aparece en la lista de recursos.

Organización de estilos CSS

Organizar los archivos CSS es fundamental para mantener un tema escalable y comprensible. Aquí hay algunas prácticas recomendadas:

División en múltiples archivos CSS:

En lugar de tener todos los estilos en un solo archivo styles.css, puedes dividir el CSS en varios archivos, cada uno enfocado en una sección específica del tema. Por ejemplo:
- base.css: Estilos generales como tipografía, colores y botones.
- layout.css: Estilos de disposición para elementos como encabezados, pie de página y columnas.
- components.css: Estilos específicos para componentes como menús, bloques y formularios.

Modularización del código:

Drupal permite registrar múltiples archivos CSS en mi_tema.libraries.yml. Puedes agregar cada archivo de la siguiente manera:

estilos:
  css:
    theme:
      css/base.css: {}
      css/layout.css: {}
      css/components.css: {}

De esta forma, Drupal cargará cada archivo CSS por separado, manteniendo los estilos organizados y fáciles de encontrar.

Uso de selectores específicos:

Evita el uso de selectores genéricos que puedan interferir con otros estilos en el sitio. Prefiere selectores específicos que se apliquen solo a los elementos dentro de tu tema.
Utiliza clases propias para cada elemento que personalices, evitando conflictos con otros módulos o temas que puedan cargar sus propios estilos.

Buenas prácticas para el uso de CSS en Drupal

Para que tu tema sea eficiente y fácil de mantener, considera las siguientes buenas prácticas:

Minimización y optimización del CSS:

Cuando termines el desarrollo, considera minimizar el CSS para mejorar los tiempos de carga. Existen herramientas como cssnano y uglifycss que pueden ayudarte a optimizar tus archivos CSS.

Uso de variables de CSS:

Si utilizas colores, tamaños o fuentes que se repiten en el tema, considera usar variables CSS. Esto facilitará el cambio de valores en todo el tema sin necesidad de editar múltiples líneas de código.

:root {
  --color-primario: #1a73e8;
  --font-principal: Arial, sans-serif;
}

body {
  color: var(--color-primario);
  font-family: var(--font-principal);
}

Pruebas en diferentes dispositivos:

Asegúrate de que los estilos que aplicas se vean bien en diferentes tamaños de pantalla. Utiliza @media queries para adaptar el diseño a dispositivos móviles, tablets y escritorios.

/* Estilo para dispositivos móviles */
@media (max-width: 768px) {
  .header {
    font-size: 1.2em;
  }
}

Tareas

Para poner en práctica lo aprendido en esta sesión, sigue los siguientes pasos:

Crear un archivo CSS y personalizar elementos:
- Crea el archivo styles.css en la carpeta css de tu tema e intégralo usando las instrucciones de esta sesión.
- Personaliza algunos elementos básicos, como el encabezado (header), el cuerpo del texto (body), y el pie de página (footer) para que se ajusten al diseño de tu tema.
Dividir los estilos en archivos específicos:
- Si tienes varios estilos, organiza tu CSS en múltiples archivos (base.css, layout.css, components.css, etc.) y regístralos en mi_tema.libraries.yml.
Aplicar buenas prácticas de organización:
- Define variables CSS en tu archivo de estilos para colores y tipografías recurrentes.
- Usa selectores específicos en el CSS para evitar conflictos con otros temas o módulos.
- Prueba tus estilos en diferentes dispositivos para asegurar que el diseño sea responsivo.
Verificación en el navegador:
- Limpia la caché de Drupal y visualiza el sitio en un navegador. Inspecciona el código fuente para confirmar que los archivos CSS se están cargando y aplicando correctamente.

Al finalizar esta sesión, tendrás un tema de Drupal con estilos CSS personalizados, organizados de manera modular, y optimizado para la adaptabilidad en diferentes dispositivos. Estos estilos mejorarán el aspecto visual del sitio y te permitirán aplicar cambios de diseño fácilmente en el futuro.

← Anterior Siguiente →