Création de thèmes pour Drupal 8

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
Pré-requis 

Connaissance opérationnelle de HTML, CSS.
Notions de Javascript, HTTP et PHP 5.x ou 7.x
Expérience de rédaction sur Drupal

Pré-requis OSInet recommandé 
Public concerné 
Forme pédagogique 
Référence : 
DR-821