• 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 et les 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
  • Héritage des assets
    • libraries
    • libraries-extend
    • libraries-override
  • Héritage de templates
  • Héritage CSS
    • Cascade CSS
    • SMACSS 1: concepts
    • SMACSS 2: architecture CSS
  • Héritage et compilateurs CSS
• Le contenu d’un thème
  • Thème minimal
  • Exercice: thème nu
  • Ajout d'un framework CSS: Bootstrap
  • Exercice: observer Bootstrap
  • 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