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.
  • 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.