Layouts

layout-base.twig

Scampi-Twig est livré avec un fichier de layout de base (layout-base.twig) réunissant la structure et le balisage minimum nécessaires à tous les projets et répondant à nos bonnes pratiques.

Entête

<html> :

  • la déclaration de la langue principale du document.
  • la class no-js qui sera enlevée par modernizr si javascript est activé dans le navigateur (voir la doc de Scampi).
  • le sens de lecture.

<head> :

  • la meta charset avec la valeur UTF-8.
  • le modèle conforme pour la balise title : "Titre de la page - Titre du site".
  • la désactivation du mode de compatibilité d'Internet Explorer.
  • l'inclusion des différentes variations de favicon.
  • l'inclusion du script modernizr (le seul nécessitant d'être dans l'entête).

Corps de page

<body> :

  • Une alerte en cas de désactivation de javascript.
  • Une alerte pour informer de l'obsolescence de la version d'Internet Explorer si besoin.
  • L'inclusion des liens d'accès rapide.
  • Les zones (landmarks) obligatoires au regard du RGAA assorties de leur attribut ARIA spécifique.
  • L'inclusion de jquery et du script concaténant tous les autres scripts javascript juste avant la fermeture du body.

layout-base-projet.twig

Plutôt qu'intervenir directement dans layout-base.twig pour l'adapter à un projet particulier on utilisera la notion d'héritage de Twig pour créer la base commune à tout le projet.

{# templates/common/layout-base-projet.twig #}

{% extends "common/layout-base.twig" %}
{# spécificités layout du projet#}

layout-index.twig

Toujours pour éviter d'ajouter des spécificités dans un layout générique, layout-index.twig permet de définir, au besoin, les caractéristiques propres du layout de la page d'index du projet.