--- url: 'https://metadrop.net/es/articulos/theme-sdc-artisan-drupal-lo-hay-saber' title: 'Theme SDC Artisan para Drupal: lo que hay que saber' author: - 'Cristian Aliaga' - 'Alejandro Cabarcos' date: '2024-11-13T08:47:00+00:00' updated: '2024-11-21T20:58:57+00:00' type: article summary: 'Artisan es un theme para Drupal basado en Boostrap y SDC (Single Directory Components) que usamos en todos nuestros nuevos proyectos.' tags: - 'Drupal Planet' - Drupal - Theming - Front-end - VLSuite - SDC - Contribution image: 'https://metadrop.net/sites/default/files/styles/full/public/2024-11/artisan-drupal-sdc-theme-screenshot.png.webp?itok=6NPNW6fI' published: true og: determiner: Automatic site_name: Metadrop 'image:url': 'https://metadrop.net/sites/default/files/styles/full/public/2024-11/artisan-drupal-sdc-theme-screenshot.png.webp?itok=6NPNW6fI' 'image:type': image/png 'image:width': '800' 'image:height': '600' 'image:alt': 'Theme SDC Artisan para Drupal: lo que hay que saber' street_address: 'Calle Manuel Luna, 12, 3 Dcha' locality: Madrid region: Madrid postal_code: '28020' country_name: España email: hola@metadrop.net phone_number: '910053180' schema: '@context': 'https://schema.org' '@graph': - '@type': Article '@id': 'https://metadrop.net/es/articulos/theme-sdc-artisan-drupal-lo-hay-saber#article' name: 'Theme SDC Artisan para Drupal: lo que hay que saber' headline: 'Theme SDC Artisan para Drupal: lo que hay que saber' description: 'Artisan es un theme para Drupal basado en Boostrap y SDC (Single Directory Components) que usamos en todos nuestros nuevos proyectos.' about: - Drupal - Theming - Front-end - VLSuite - SDC - Contribuciones image: '@type': ImageObject url: 'https://metadrop.net/sites/default/files/styles/full/public/2024-11/artisan-drupal-sdc-theme-screenshot.png.webp?itok=6NPNW6fI' width: '800' height: '600' datePublished: '2024-11-21T18:09:00+0100' dateModified: '2024-11-21T21:58:57+0100' author: '@type': Person name: - 'Cristian Aliaga' - 'Alejandro Cabarcos' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' mainEntityOfPage: 'https://metadrop.net/es/articulos/theme-sdc-artisan-drupal-lo-hay-saber' - '@type': Organization '@id': 'https://metadrop.net/#organization' url: 'https://metadrop.net/' name: Metadrop sameAs: - 'https://www.drupal.org/metadrop' - 'https://twitter.com/metadrop' - 'https://asociaciondrupal.es/partner/metadrop' - 'https://www.linkedin.com/company/metadrop' logo: '@type': ImageObject url: 'https://metadrop.net/themes/custom/mdrop_radix/logo-metadrop-500-500.jpg' width: '500' height: '500' - '@type': ItemPage '@id': 'https://metadrop.net/es/articulos/theme-sdc-artisan-drupal-lo-hay-saber' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Inicio item: 'https://metadrop.net/es' - '@type': ListItem position: 2 name: 'Artículos expertos sobre Drupal y tecnología' item: 'https://metadrop.net/es/articulos' publisher: '@type': Organization '@id': 'https://metadrop.net/#organization' --- 1. [Artículos](https://metadrop.net/es/articulos) # Theme SDC Artisan para Drupal: lo que hay que saber Jueves 21 de Noviembre de 2024 Artisan es un theme para Drupal basado en Boostrap y SDC (*Single Directory Components*) que usamos en todos nuestros nuevos proyectos. Artisan es un *theme* base para Drupal construido sobre Bootstrap 5 y Sass. Ofrece configuraciones del *theme* sencillas, *presets* (o variantes) y uso extensivo de variables CSS. ## ¿Por qué hemos desarrollado Artisan? La inspiración para Artisan proviene de Radix, un *theme* muy conocido que hemos usado durante mucho tiempo. Sin embargo, cuando dominas algo que no es exactamente lo que quieres, empiezas a pensar en cambios que podrían hacerse, primero pequeños y luego poco a poco más grandes. Por ejemplo, nos dimos cuenta de que **tendíamos a sobrescribir demasiados** ***templates*** base en nuestros proyectos Drupal. No gustaría que las plantillas del *theme* base fueran extensibles de forma que no tuviésemos que descartarlas porque no se adaptasen a las necesidades específicas de un proyecto. Así que al final decidimos crear nuestro propio tema con estas ideas en mente. El objetivo principal del *theme* Artisan es ofrecer una base que **permita reutilizar la mayoría de sus componentes** sin necesidad de sobrescribir completamente sus *templates* para cada proyecto. Para lograr esto, Artisan ofrece una **base de diseño funcional que es fácilmente extensible**, como se explica más abajo. Artisan hace un uso extensivo de las [***custom properties de CSS***](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties "Documentación de custom properties de CSS") (comúnmente conocidas como variables CSS) para aprovechar al máximo sus beneficios. Al usar estas variables, puedes **reutilizar estilos fácilmente** en el proyecto, asegurando la coherencia en el diseño. Además, **permiten la creación de** ***themes*** **dinámicos**, como el modo oscuro o temas de temporada como un theme navideño (ódialos o ámalos, pero ahí están). Seguimos pensando que **Radix es un gran** ***theme*** **base**; pero estamos en un momento el que creemos que podemos seguir **nuestro propio camino**. ## ¿Qué incluye Artisan? Veamos lo que ofrece este *theme*. ### Bootstrap 5 Dado que Artisan está construido sobre Bootstrap 5, **todas sus funcionalidades están disponibles**, incluyendo su sólido sistema de *grid*, la aproximación *mobile-first* y las muchas clases de utilidad (*utility classes*). Además, Artisan actúa como una capa de abstracción sobre Bootstrap, ofreciendo una forma fácil de configurar las variables de Bootstrap, como se comenta en la próxima sección. ### Personalizaciones con resultados inmediatos Artisan proporciona un **amplio formulario de configuración del** ***theme*** donde se pueden personalizar muchos aspectos, incluyendo la paleta de colores principal, el ancho de página y los tamaños de fuente para diferentes elementos. Artisan's settings form. Formulario de configuración de Artisan Estas personalizaciones se inyectan en el *theme* como variables CSS, por lo que **no se requiere ninguna compilación**; los resultados son visibles inmediatamente después de guardar. Aunque estas personalizaciones se basan principalmente en las variables CSS de Bootstrap, no están limitadas solo a ellas. ### Controles de formulario pensando en la UX Configurar propiedades CSS puede ser tedioso y es fácil cometer errores. Incluso quienes acumulan mucha experiencia en el *front-end* pueden pasar por alto algún valor o necesitar revisar ciertas configuraciones. Los controles ofrecidos por el formulario configuración de Artisan simplifican este proceso **mostrando solo configuraciones y valores válidos para cada** ***widget***. Por supuesto, siempre existe la opción de introducir configuraciones manualmente si fuese necesario, asegurando que no haya limitaciones. Este formulario de configuración permite centralizar y reutilizar opciones como colores, tamaños de fuente o espaciado, **eliminando ajustes repetitivos, reduciendo errores y facilitando crear una identidad visual coherente**. Seleccionando el color de los enlaces: usa un color de la paleta o uno personalizado. Selector de unidades ### Presets de personalizaciones Todos **los ajustes en el formulario de configuración del** ***theme*** **pueden conformar un** ***preset**, y* Artisan permite crear y gestionar varios de estos *presets*. Esto significa se pueden tener diferentes configuraciones del *theme* que se aplican con unos clics. Por ejemplo, **se pueden guardar variaciones del** ***theme*** **como un modo oscuro** o temas de temporada y activarlos según sea necesario. Por el momento la variante seleccionada se activa para todos los usuarios, pero nuestra idea es permitir variaciones según diferentes condiciones. Esto permitiría a los usuarios elegir entre variantes de tema oscuro y claro, pero internamente seguiría siendo el mismo *theme* de Drupal. Dado que crear una guía visual de base para un nuevo proyecto puede requerir un esfuerzo significativo, Artisan incluye varios *presets* predefinidos que pueden servir como punto de partida. Esto sirve para **acelerar la fase inicial de un proyecto** sin limitar futuros ajustes. Cambio de *preset* en Artisan ### Exportación/importación de *presets* Para facilitar la colaboración entre equipos o replicar configuraciones en diferentes proyectos, Artisan permite **exportar e importar fácilmente los** ***presets*** **personalizados** usando JSON. Aunque la configuración de Artisan es configuración estándar de Drupal, copiar y pegar JSON en un área de texto suele ser más rápido y cómodo que usar la funcionalidad de importación y exportación de configuración de Drupal. Esta función sirve para mejora el flujo de trabajo y **facilita mantener la consistencia visual entre proyectos relacionados**, como un multi-sitio con una base de diseño compartida. Detalle del interfaz para gestionar los *presets* ### Componentes SDC con un toque Artisan usa SDC en sus componentes. Dado que se centra en proporcionar componentes reutilizables, estos **SDC están diseñados en pos de la flexibilidad para minimizar la necesidad de reescribirlos**. Esta flexibilidad se logra mediante el uso de plantillas Twig y lógica específica en los SDC. Aunque algunas situaciones aún pueden requerir reescribir o sobrescribir componentes, Artisan intenta reducir estos casos a los mínimos. Creemos que este enfoque permite a quienes desarrollan **reutilizar componentes de manera eficiente, ahorrando tiempo y esfuerzo en los proyectos mientras se mantiene la consistencia del diseño**. ### Uso eficiente de variables CSS Como puede suponerse, **cada personalización de la configuración del** ***theme*** **se convierte en una variable CSS**, definida a nivel de *root* o de un elemento/selector específico, lo que permite un control fino sobre los estilos. Estas variables CSS se utilizan en todos los componentes SDC, asegurando su coherencia y consistencia. Veamos un ejemplo. Supongamos que hemos rellenado los campos del formulario de configuración para definir cómo se ve el botón principal y algunos estilos básicos como el tamaño de fuente del cuerpo y su peso. El r**esultado serían las siguientes variables CSS**: ```css :root { --theme-base-font-size:1rem; --theme-base-font-weight:400; --theme-base-font-family:Roboto; --theme-base-font-line-height:1.5; } .btn-primary { --theme-btn-primary-color: #ffffff; --theme-btn-primary-background: #be16ca; --theme-btn-primary-border-color: #be16ca; --theme-btn-primary-accent-color: #be16ca; --theme-btn-primary-accent-background: #a408af; --theme-btn-primary-accent-border-color: #9a03a5; } ``` Estas variables se aplicarán a los elementos correspondientes otorgándoles los estilos definidos. En el siguiente fragmento de código se puede observar cómo se usan valores predeterminados de Bootstrap, como `--bs-body-font-family` o `--bs-btn-color`. Si no se define un estilo específico para un elemento desde la configuración del *theme*, estos elementos tomarán los valores predeterminados de Bootstrap. ```css body { --body-font-family: var(--theme-base-font-family, var(--bs-body-font-family, Roboto)); --body-font-size: var(--theme-base-font-size, var(--bs-body-font-size, 1rem)); --body-font-weight: var(--theme-base-font-weight, var(--bs-body-font-weight, 400)); --body-line-height: var(--theme-base-line-height, var(--bs-body-line-height, 1.5)); --body-color: var(--theme-body-color, var(--bs-body-color, black)); --body-background: var(--theme-body-background, var(--bs-body-bg, white)); font-family: var(--body-font-family); font-size: var(--body-font-size); font-weight: var(--body-font-weight); line-height: var(--body-line-height); color: var(--body-color); background-color: var(--body-background); } .btn-primary { --btn-primary-color: var(--theme-btn-primary-color, var(--bs-btn-color, white)); --btn-primary-background: var(--theme-btn-primary-background, var(--bs-btn-bg, black)); --btn-primary-border-color: var(--theme-btn-primary-border-color, var(--bs-btn-border-color, black)); --btn-primary-accent-color: var(--theme-btn-primary-accent-color, var(--bs-btn-hover-color, white)); --btn-primary-accent-background: var(--theme-btn-primary-accent-background, var(--bs-btn-hover-bg, black)); --btn-primary-accent-border-color: var(--theme-btn-primary-accent-border-color, var(--bs-btn-hover-border-color, black)); color: var(--btn-primary-color); background-color: var(--btn-primary-background); border-color: var(--btn-primary-border-color); &:hover, &:focus, &:active { color: var(--btn-primary-accent-color); background-color: var(--btn-primary-accent-background); border-color: var(--btn-primary-accent-border-color); } &[disabled] { background-color: var(--btn-primary-background); } } ``` ### Artisan y VLSuite: una combinación perfecta Basado en Bootstrap 5, Artisan ofrece una **experiencia** ***plug and play*** **con VLSuite**, aprovechando su capacidad para aplicar clases *utility*. Esto permite a la **creación páginas de tipo** ***landing*** **sin necesidad de código,** apoyándose en Layout Builder y diferentes componentes, Si no conoces VLSuite puedes echar un vistazo consulta nuestro artículo : [*Usando VLSuite para copiar la portada de Drupal.org*](https://metadrop.net/es/node/346 "Artículo "Usando VLSuite para copiar la portada de Drupal.org""). **Aunque recomendamos usar VLSuite** para mejorar la experiencia de Layout Builder, **Artisan no depende de VLSuite**. ## Extendiendo Artisan: añadir opciones de personalización Como se mencionó antes, Artisan puede ser **extendido para usos avanzados**. Aprovechando los *hooks* de Drupal, se pueden **registrar nuevas opciones de personalización** en el formulario de configuración para generar variables CSS adicionales. Mediante el uso de `hook_artisan_customizations_alter()`, es posible a**ñadir campos personalizados al formulario de configuración del theme**, lo que les permite **definir nuevas variables CSS** para ser usadas como el resto. Esta flexibilidad permite que el tema se adapte fácilmente a distintos proyectos y evolucione según los requisitos específicos del sitio, todo **sin modificar directamente el** ***theme*** **base**. ```php function artisan_starterkit_artisan_customizations_alter(&$customizations) { $customizations['example'] = [ 'wrapper' => 'component', 'label' => t('Example'), 'description' => t('My cool example component'), 'selector_default' => 'div[data-component-id="artisan_starterkit:example"]', 'list' => [ 'font_size' => [ 'label' => t('Font size'), 'type' => 'textfield' 'description' => 'My example component font-size', ], 'color' => [ 'label' => t('Color'), 'type' => 'color', 'description' => 'My example component color', ], ], ]; } ``` El código de arriba generará las siguientes componentes en el formulario de personalización del *theme*. Y, después de rellenar estos campos, se definirían las siguientes variables CSS en el selector indicado, listas para su uso: ```css div[data-component-id="artisan_starterkit:example"] { --theme-example-font-size: 1rem; --theme-example-color: #003310; font-size: var(--theme-example-font-size); color: var(--theme-example-color); } ``` Este *hook* también se puede utilizar para quitar configuraciones innecesarias de personalización. Puede verse un ejemplo [aquí](https://git.drupalcode.org/project/artisan/-/blob/1.x/artisan_starterkit/includes/customizations.inc?ref_type=heads#L17). ## Futuro Artisan es un tema muy reciente, pero **ya lo estamos utilizando como base para nuestros nuevos proyectos**. Somos conscientes de la **revolución que traerán** iniciativas como Drupal Starshot, Experience Builder, Recipes y los Single Directory Components, y por ello, **planeamos integrar las mejoras y buenas prácticas que emerjan la Comunidad**. Aunque los SDC son estables, hay mucha discusión sobre cómo mejorarlos y cuales son los mejores enfoque y estrategias según los casos de uso, por lo que habrá que prestar atención a su evolución. Artisan está [disponible en drupal.org.](https://www.drupal.org/project/artisan) [Drupal](https://metadrop.net/es/articulos?text=Drupal) [Theming](https://metadrop.net/es/articulos?text=Theming) [Front-end](https://metadrop.net/es/articulos?text=Front-end) [VLSuite](https://metadrop.net/es/articulos?text=VLSuite) [SDC](https://metadrop.net/es/articulos?text=SDC) [Contribuciones](https://metadrop.net/es/articulos?text=Contribuciones) - Alejandro Cabarcos Drupal developer [Drupal UX/UI Diseño digital](https://metadrop.net/es/servicios/estrategia-digital/drupal-uxui-diseno-digital " See Drupal UX/UI Diseño digital") Metadrop diseña sistemas UX/UI accesibles y basados en datos para plataformas digitales enterprise: sistemas de diseño escalables que cumplen WCAG y mejoran la conversión. Ver más