Emulsify Drupal | Generando tema base

Video de Youtube
URL de Video remoto
Texto

Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI

     IMPORTANTE: Emulsify nos permite crear un BASE THEME a partir de Emulsify NO un Subtheme     

     Si eres de l@s que estás interesad@ en aprender a implementar, las utilizar tendencias en maquetación y diseño web, este es uno de los principales módulos que deberías considerar conocer, ya que te ayudará, en caso de que quieras darle un Giro de 360º a tus proyectos en Drupal, utilizando los componentes y el conocido como Diseño Atómico. Si quieres aprender más sobre esta tendencia revolucionaria, tienes el curso Introducción a Pattern Lab y Drupal 9 usando Emulsify.

     Emulsify Drupal, según su página oficial, "es una herramienta de código abierto para crear sistemas de diseño con componentes reutilizables y pautas claras para los equipos. Emulsify ayuda a las organizaciones a escalar su diseño al tiempo que reduce los costos, agiliza los flujos de trabajo y mejora la accesibilidad".

     A diferencia de otros themes contribuidos de Drupal, su instalación supone varias diferencias con respecto al resto. Su propósito fundamental, es ofrecernos todo lo que vayamos a necesitar para crear un Base Theme para Drupal, utilizando componentes. 

     Por esta razón, he creado esta guía paso a paso, de la instalación del módulo, desde su Página oficial 

     Prerrequisitos:

   Instalación del módulo Emulsify Drupal para Drupal 9

       Ya que desde la página de Drupal han anunciado hace tiempo, que el final del soporte tanto para Druapl 7 como para Drupal 8, terminará previsiblemente, a finales de este mismo año 2021, he decidido enfocarme en la instalación para Drupal 9, pero puedes seguir la guía con los cambios para otras versiones que están en la misma página.

     Paso 1 - Descarga del módulo usando composer

        A estas alturas, ya debes estar totalmente familiarizado con la instalación de módulos y themes en Drupal, utilizando el gestor de paquetes Composer, que nos facilitará enormemente las tareas de descarga o actualización de nuestros proyetos.

        Así que, nos colocaremos en la carpeta raíz del proyecto y en este caso, el comando a utilizar será el siguiente:

composer require emulsify-ds/emulsify-drupal

     Paso 2 - Preparación para generar el Tema Base

       Aquí es donde comienzan las diferncias, con respecto a otras instalaciones, como por ejemplo la del módulo Bootstrap, en este caso, al descargar el módulo se ha creado la carpeta contrib, dentro de la carpeta themes y dentro podremos ver todos los archivos relacionados con Emulsify, a continuación, nos moveremos hacia dicha carpeta, para poder generar un base theme que heredará todas las características y funcionalidades necesarias. O sea, que escribiremos en consola lo siguiente para movernos hasta la carpeta del theme padre:

cd web/themes/contrib/emulsify-drupal

   Paso 3 - Generar el Tema base

     Una vez colocados dentro de la carpeta del Theme padre, podremos ejecutar el siguiente código, para que se autogeneren todos los archivos relacionados con nuestro nuevo Tema base o personalizado:

php emulsify.php "THEME NAME"

    Si quieres conocer alguna otras opciones puedes ejecutar también el comando:

php emulsify.php -h

   Paso 4 - Descargar las dependencias del Base Theme

     Como he mencionado al principio, esta instalación rompe con lo que estábamos acostumbrados, esto significa, que tendremos que colocarnos dentro de la carpeta de nuestro nuevo_base_theme, que acabamos de generar, para poder comenzar con la descarga del resto de dependencias que hace tan pontente este tipo de instalación:

cd ../../custom/base_theme_name/

    Paso 5 - Instalación de dependencias para el Base Theme

     Este proceso suele tardar algo más de lo habitual, ya que tendrá que descargar un considerable número de archivos, destinados a facilitarnos la vida de aquí en adelante, por lo que no deberías inmpacientarnos. En mi caso en particular, tuve que abrir una segunda pestaña en mi consola, para asegurarme de que no se había quedado bloqueada la descarga, podemos usar cualquiera de las siguientes opciones:

yarn
npm install

 

Emulsify Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Paso 6 Construcción del Tema base

     Ya que tenemos descargardo, todo lo que vamos a necesitar para comenzar con nuestra implementación, nos toca construir la estructura, antes de poder utilizarlos en nuestro proyecto, también tenemos dos opciones a elegir:

yarn build
npm run build

 

Emulsify Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Paso 7 - Habilitar el base theme y sus dependencias

     Como ya tenemos todo a punto y listo para comenzar, nos toca activar el theme y sus dependencias, para ello utilizaremos la herramienta Drush, además tendremos que movernos a la carpeta principal para poder ejecutar el comando, fíjate que en lugar de utlizar en se emplea then, que es el comando correcto a partir de las versiones de drush =>9:

drush then base_theme_name -y && drush en components emulsify_twig -y

   Paso 8 - Activación del Tema Base

     Ahora sí, ya podemos activar nuestro theme para comenzar a soltar nuestra imaginación y creatividad, para ello, volveremos a utlizar la herramienta Drush:

drush config-set system.theme default base_theme_name -y

 

Emulsify Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

  Comprobación

    Si nos vamos a la página principal de nuestro proyecto, ahora podremos ver el cambio en la estructura y diseño para comenzar con esta nueva aventura...

Emulsify Drupal | www.drupaladicto.com - Consultor especializado en drupal y symfony

   Arrancando la Guía de Estilos

     Si todo funciona correctamente, podremos arrancar nuestra guía de estilos, para comenzar a trabajar con el diseño, en paralelo con el desarrollo de nuesro proyecto Drupal, ejecutando el siguiente comando desde dentro de la carpeta de nuestro tema personalizado

npm run develop