← Retour à la liste←
★★★★½ 4.8 / 5
Catégorie 04 — SKILLS

Drupal Theming

Twig 3, SDC stable D11, libraries, preprocess, CSS moderne — theming D8-D11 complet

Installation
Via npx (recommandé)npx skill add ThomasRoger76/drupal-theming
Via gitgit clone https://github.com/ThomasRoger76/drupal-theming.git ~/.claude/skills/drupal-theming
Vérifier dans Claude Code/skills
VersionD8-D11 (Twig 3, SDC stable)
PrixGratuit
Plateformes
Drupal 10Drupal 11
Commandes10
Exemples3
SKL
À propos

Skill de connaissance pure qui transforme Claude en expert theming Drupal 8-11+ — couvre l'intégralité du theming front-end Drupal, des composants natifs aux pipelines de build. Contenu injecté : Single Directory Components stables D11 (component.yml avec props typés JSON Schema, slots nommés, CSS scoped auto-chargé), Twig 3 complet (filtres Drupal |t |render |without |raw, arrow functions, apply blocks), suggestions de templates et debug, preprocess hooks avec PHP 8.3 strict (match, null safe operators), CSS moderne (Container Queries @container, Cascade Layers @layer, dark mode prefers-color-scheme, Logical Properties), pipeline Vite + Docker Node.js, BEM + Storybook. Pas d'agents — skill de connaissance pure. Gain mesuré : SDC D11 générés sans erreur du premier essai, 70% de réduction des erreurs Twig communes (attributes.addClass vs class=, core/once vs jQuery, base theme stable9 vs classy).

Fonctionnalités clés
SDC D11 — composants natifs avec props typés et slotsGénère des Single Directory Components stables D11 avec card.component.yml (props JSON Schema, slots nommés), card.html.twig et card.css auto-chargé. Validation npx @drupal/sdc-validator intégrée.
Twig 3 complet — filtres, arrow functions, apply blocksConnait tous les filtres Drupal (|t, |render, |clean_class, |without, |raw), les arrow functions (nodes|map(n => n.title.value)), les blocs apply. Génère des templates sans logique complexe.
CSS moderne — Container Queries, Cascade Layers, dark mode@container pour le responsive au conteneur (pas la viewport), @layer pour les priorités explicites (reset/base/components/utilities), CSS Variables + prefers-color-scheme pour le dark mode automatique.
Preprocess hooks avec typage strict PHP 8.3hook_preprocess_HOOK() dans .theme avec match() expressions, null safe operators, variables contextuelles typées. Jamais de logique complexe dans les templates Twig — tout reste en PHP.
Responsive Images WebP D10+breakpoints.yml, Image Styles par résolution, Responsive Image Styles combinant plusieurs styles. WebP automatique D10+, srcset et sizes générés par Drupal, loading=lazy via preprocess.
Build pipeline Vite + Docker Node.js + StorybookConfiguration Vite 6 (entrées multiples CSS+JS, manifest.json pour versioning), service Docker node:22-alpine pour le build isolé, Storybook pour documenter les composants BEM en isolation.
Commandes
CommandeDescription
drush crRebuild cache après toute modification .theme, .libraries.yml ou .info.yml
drush twig:debug --enableActiver les commentaires HTML avec les suggestions de templates dans le source
drush generate themeScaffold interactif d'un thème custom (info.yml, régions, libraries.yml)
drush config:set system.theme default mon_themeActiver un thème custom comme thème par défaut du site
npm run buildCompiler et minifier les assets CSS/JS en production
npm run watchLancer le watcher Vite/Gulp avec hot reload pour le développement
docker compose run --rm webpack_theming npm run watchLancer le build pipeline dans un container Docker Node.js isolé
npx storybook dev -p 6006Visualiser les composants BEM en isolation sur localhost:6006
npx @drupal/sdc-validator validate web/themes/custom/mon_theme/components/Valider la structure des SDC (component.yml, slots, props) avant commit
drush php:eval "\Drupal::service('library.discovery')->getLibrariesByExtension('mon_theme');"Inspecter toutes les librairies CSS/JS déclarées par le thème actif
Exemples
Single Directory Component — Card D11 (component.yml + twig + css)CODE
# components/card/card.component.yml
name: Card
props:
  type: object
  properties:
    title:       { type: string }
    url:         { type: string, format: uri }
    is_featured: { type: boolean, default: false }
slots:
  body:  { title: Contenu principal }
  image: { title: Image }

{# components/card/card.html.twig #}
<article class="card{{ props.is_featured ? ' card--featured' : '' }}" style="container-type: inline-size">
  {{ slots.image }}
  <div class="card__body">
    <h3 class="card__title"><a href="{{ props.url }}">{{ props.title }}</a></h3>
    {{ slots.body }}
  </div>
</article>

/* components/card/card.css */
@container (min-width: 400px) { .card { display: grid; grid-template-columns: 40% 1fr; } }
.card--featured { border-inline-start: 3px solid var(--color-primary); }
Preprocess hook — variables contextuelles nœud EventCODE
<?php
// mon_theme.theme
function mon_theme_preprocess_node(array &$variables): void {
  $node = $variables['node'];
  if ($node->bundle() !== 'event' || $variables['view_mode'] !== 'teaser') return;

  $now   = \Drupal::time()->getRequestTime();
  $end   = $node->get('field_date_fin')->value;
  $endTs = strtotime((string) $end);

  $variables['is_past']      = $endTs < $now;
  $variables['days_remaining'] = $variables['is_past'] ? 0 : (int) ceil(($endTs - $now) / 86400);
  $variables['event_status'] = match(true) {
    $endTs < $now             => 'past',
    date('Y-m-d', $endTs) === date('Y-m-d', $now) => 'today',
    default                   => 'upcoming',
  };
  $variables['attributes']->addClass('node--event--' . $variables['event_status']);
}
libraries.yml — structure complète avec niveaux CSS correctsCODE
# mon_theme.libraries.yml
global:
  css:
    base:      { css/base/reset.css: {}, css/base/typography.css: {} }
    theme:     { css/theme/colors.css: {}, css/theme/layout.css: {} }
  js:          { js/behaviors.js: {} }
  dependencies: [core/drupal, core/once]

article:
  css:
    component: { css/components/article.css: {} }
  dependencies: [mon_theme/global]

# Twig : {{ attach_library('mon_theme/article') }}
# Toujours core/once — jamais core/jquery en dépendance directe
Points forts & faibles
Points forts
+SDC D11 générés correctement dès le premier essai
+Twig 3 complet avec tous les filtres Drupal — zéro logique dans les templates
+CSS moderne (Container Queries, @layer) — architecture maintenable
+Preprocess hooks avec PHP 8.3 stricts et typés
Points faibles
−Build pipeline à adapter selon les choix du projet (Vite vs Gulp vs Webpack)
−SDC encore en évolution — vérifier la syntaxe à chaque version mineure
Verdict

Couvre l'intégralité du theming Drupal 11 avec les SDC natifs, Twig 3 et CSS moderne. Génère des templates propres sans logique complexe et des composants réutilisables prêts à l'emploi.

→ Développeurs frontend Drupal, intégrateurs, équipes qui construisent un design system Drupal