Création de thèmes pour Drupal 8

Un cours de

OSInet

Objectifs

Être en mesure de créer un thème responsive pour Drupal 8 à partir d'une maquette graphique et d'un greybox / fil de fer (wireframe)
Réaliser un thème respectant les contraintes d'accessibilité et compatible aussi bien avec les langues orientales qu'occidentales
Développer des templates et extensions Twig sans introduire de failles de sécurité
Organiser son markup et ses classes CSS pour faciliter la maintenance future avec les standards SMACSS/BEM et les compilateurs CSS Less/SASS/Stylus

Contenu

Qu’est-ce qu’un thème ?
- Thèmes, templates, moteurs et hooks : Twig, Nyan
- Place des framework CSS
- Autres composants : CSS, JS, images, styles d’image, breakpoints…
- Prétraitements
- Thèmes de front et de back
- Régions et blocs
- De la maquette au thème
Le modèle d’héritage des thèmes
- Thème de base et sous-thèmes
- Les thèmes D8 Core : Stark, Stable, Classy, Seven, Bartik
- Les thèmes de base contrib : Bootstrap, Zurb Foundation, Omega
Le contenu d’un thème
- (theme).info.yml
- configuration: styles d’image
- la hiérarchie des templates
- dossiers
- ajouter du CSS – libraries
- ajouter du JS – libraries
- Exercice : créer un thème affichant un texte fixe
Twig 1 : mécanismes de base
- Le format Twig
- Variables
- Littéraux, interpolation de chaînes
- Expressions
- Fonctions et arguments (nommés)
- Opérateurs mathématiques, logiques, binaires, et comparateurs
- Structures de contrôle
- Commentaires
- Exercice : afficher le nom de l’utilisateur connecté
- Twig 2 : intégration Twig/D8
- Développer avec Twig :
  - development.services.yml
  - debug mode
  - Caching vs refresh
- Filtres Twig D8
  - traduction
  - localisation
  - échappement
  - traitement des tableaux d’affichage
- Fonctions Twig D8 : URLs de contenu, assets, bibliothèques
- Ajout de code JS
- Show/hide() pour la hiérarchie des tableaux d’affichage
- Exercice long: construire un thème utilisable
-- Fin de la première journée --
Twig 3 : mécanisme évolués
- Contrôle de l’espacement
- Liens entre templates : include
- Aparté : block/extends, use, embed
- Sécurité : échappement
- Macros
- Quiz
Création du markup et styling
- HTML5 et D8 : éléments sémantiques
- Accessibilité et web sémantique : RDF, rôles ARIA
- Accessibilité : annonces ARIA
- Accessibilité : gérer le clavier avec le tabbing manager, devel_ally
- CSS : gestion i18n LTR/RTL
- Conventions de nommage BEM, SMACSS et D8
- Compilation CSS : LESS, SASS, Stylus
- Impact de l’agrégation Drupal sur les styles
- Quiz
Conception de thèmes responsive
- Media queries
- Déboguage des queries avec les outils de développement Chrome
- D8 : breakpoints, groupes de breakpoints et multiplicateurs
- Intégration aux modules spécifiques
- Exercice : thémer une vue Views responsive sur 2 formats
Theming D8 Avancé
- Theming Javascript : Drupal.theme()
- Définir des réglages pour son thème
- Définir un moteur de thème : exemple Nyan cat
- Définir de nouvelles fonctionnalités Twig: filtres, tags, fonctions, tests
- Exercice : définir un paramètre pour son thème
Exercice final long : thème responsive basé sur Bootstrap