Les templates permettent d’homogénéiser la présentation des pages. On peut également les utiliser pour changer la présentation de toutes les pages modélisées très rapidement (comme le font les styles CSS).
Les templates permettent de couvrir des fonctionnalités qui n’existent pas (ou pas encore) en CSS, mais ils ne représentent pas un standard du web. C’est une solution maison. En ce sens, il est toujours préférable de donner la priorité aux CSS (et à Bootstrap dans notre cas) avant de songer à créer ou à modifier un template .
Utilisation #
Pour utiliser un template, il faut placer un div#template juste après le div#front-end, comme ceci :
Dans cet exemple, tout ce qui se trouve dans <div id= »template »> sera placé dans un cadre ombré ayant un entête sur fond primary (de Bootstrap). Le «Lorem Ipsum» de cet exemple apparaîtra donc dans ce cadre, comme ceci :
Migration #
Toutes les pages qui doivent être présentées dans un cadre peuvent être modifiées. Il suffit d’insérer div#template dans chaque fichier html de l’application, en veillant à supprimer toutes les autres balises encadrantes qui s’y trouvent (pour ne pas faire double-emploi et se retrouver avec un cadre dans un cadre).
Classes additionnelles #
Les classes additionnelles s’utilisent comme toutes les autres classes. C’est du CSS standard.
4 classes ont été créées spécialement pour dimensionner la largeur des cadres. Elles sont nommées :
- ms-sm-template : petite largeur (correspondant à celles de smartphones)
- ms-md-template : largeur moyenne (correspondant à celles des tablettes en mode portrait)
- ms-xl-template : couvre toute la largeur (y compris si on dimensionne la fenêtre sur deux écrans).
- ms-lg-template : largeur moyenne (pour tablettes en mode paysage ou les petits écrans)
Important : les 3 premières classes correspondent strictement à la charte définie lors de notre travail commun.
ms-lg-template a été ajouté, car pendant les tests en cours de développement, une taille supplémentaire semblait nécessaire et ne représentait pas un grand sacrifice (4 lignes dans le fichier custom.css). Toutefois la charte établie ayant un caractère sacré, la classe ms-lg-template ne devra être utilisée qu’après validation du pape (Régis), ou sous la torture.
Création / modification des templates (très rare) #
Le fichier template.html sera le plus utilisé et n’est pas censé être modifié (il correspond à la charte établie ensemble). Toutefois deux cas peuvent amener à opérer des changements.
Une modification globale de de la charte #
Dans ce cas, on ira modifier le fichier template.html (par exemple pour supprimer l’ombre des cards)
Un développement spécifique #
Dans ce cas, on ajoutera d’autres fichiers html dans le dossier /styles. Fichiers dans lesquels on créera le design demandé par le client. Puis, grâce à l’attribut data-template-name on désignera ce fichier spécifique. Par exemple, si le fichier spécifique s’appelle «template-sebin.html» l’attribut sera utilisé ainsi :
<div id="template"
data-template-name="template-sebin"
data-title="Titre principal au-dessus de la card"
data-subTitle="Titre de la card"
class="classe-sebin">
