Twig

Le Twig est un format de modélisation d'HTML à partir de données dynamiques.
Sa documentation technique est accessible sur ce lien : https://twig.symfony.com/doc/2.x/templates.html.

Les pages web dynamiques, qui peuvent être créées au format Twig dans yoprocess, sont en réalité en cumul de diveres technologies pré-packagées ensemble : le moteur Twig pour le traitement de la donnée dynamique, du HTML pour la structure de la page, des class CSS pré-définies sur YoProcess (mais pas chez YoLab par contre) etc.

Penses-bête

Voici quelques explications sur les classes CSS élémentaires qui peuvent être utilisées lors de la création d'une page web dynamique.

La grille

La grille HTML permet de placer les éléments les uns à côté des autres (ligne et colonne) de façon à construire la structure de la page en prenant en compte une adaptabilité automatique selon la taille de la fenêtre du navigateur ou l'appareil (mobile, tablette etc.). La grille est définie par une classe `grid` sur un élément HTML (ex : <div class="grid">).

À l'intérieur de cet élément, il est possible de définir des rangées, et chacune d'elle peut contenir une ou plusieurs colonnes. Une rangée est définie par la classe row (ex : <div class="row">).

À l'intérieur de l'élément correspondant à une rangée, une colonne est définie par un élément HTML cell-? ou le ? est un nombre de 1 à 12 inclus. Chaque rangée est constituée de 12 unités de largeur.

Exemple de deux colonnes de mêmes tailles :

<div class="row">
   <div class="cell-6">Ma colonne 1</div>
   <div class="cell-6">Ma colonne 2</div>
</div>

Nb : la somme des éléments cell- d'une rangée doit toujours valoir 12 unités.

Le responsive : la grille permet de gérer automatiquement la "responsiveness" des éléments de la page. Par exemple, un bloc `cell-6` occupera la moitié (6/12) de l'espace sur un écran normal, mais sera extrapolé pour utiliser 100% de l'espace sur un écran plus petit, faisant passer les blocs suivants en dessous. Il est possible d'utiliser les classes d'ordination de Material Web Components Layout, de la forme layout-grid__cell--order-<INDEX> pour indiquer l'ordre d'un élément par rapport à un autre lors des réorganisations automatiques dûes à la taille de l'écran (ex : des colonnes qui passent les unes en dessous des autres).