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