Construire un agencement de page (layout) avec Omega 4

Présentation du thème Omega 4 pour Drupal

Omega est un thème de base pour Drupal qui permet, entre autres, de concevoir des sites Internet responsives de très bonne facture. Omega 4 est disponible depuis peu dans une nouvelle version majeure (4.x) et peut commencer à être utilisé dès maintenant pour des sites en production. La seule raison qui explique qu'il reste encore en version bêta provient du fait que la documentation de cette nouvelle version majeure doit encore être complétée.

Cette nouvelle version d'Omega apporte son lot de nouveautés. Citons le respect des conventions de codage CSS de Drupal 8, l'intégration de librairies très populaires pour la compatibilité de CSS3 (Selectivizr, Respond, CSS3 Pie, HTML5 Shiv), l'utilisation de SMACSS pour l'organisation des feuilles de styles .scss, la gestion fine des fichiers javascript ou css, l'intégration à Panels (suivez ce ticket pour une intégration complète avec Panels everywhere), et non des moindres l'utilisation du framework Susy, de Sass et Compass, ainsi qu'une intégration complète avec Drush (voire même indispensable), etc.

Tandis que la version 3 de Omega fournit une interface pour modifier et structurer l'agencement des pages à volonté, et permet avec les modules Delta et Context de cibler très précisement quel agencement utiliser selon les pages du site internet, Omega 4 se destine plutôt à des thémeurs intermédiaires ou avancés qui souhaient gérer par le code les différents agencements possibles d'un site web. La rupture entre les deux versions est assez franche du fait des nouvelles technologies utilisées (Susy, Sass). Aussi la création d'agencements de page avec Omega 4 semble plus ardue qu'avec Omega 3 (tout du moins, ne serait-ce que par la simple absence d'une interface graphique), mais elle bénéficie de toute la puissance du framework Susy pour réaliser des agencements (layouts) complexes et responsives en toute simplicité que vous pourrez toujours injecter sur des pages ciblées avec les modules Context et Contexte Omega.

Afin d'utiliser toute la puissance d'Omega 4, il est nécessaire d'installer Ruby, Ruby Gems, Sass, Compass sur son serveur (une explication et un guide pas à pas pour installer ces outils est aussi disponible dans cet article). Vous pouvez vous référer à la documentation d'Omega pour procéder à l'installation de toutes les dépendances nécessaires. Il est néanmoins possible d'utiliser Omega 4 sans ces outils, mais ce serait rééllement un gachis, tant vous récupérerez le temps investi à maîtriser ces nouveaux outils au centuple.

Pour installer ruby en quelques lignes, vous pouvez exécuter ces commandes

Découvrons le nouveau système de layout de Omega 4.

Omega 4 dispose d'un sous-thème intitulé OHM disponible dès son installation. OHM a pour vocation de donner par l'exemple toutes les bonnes pratiques à mettre en oeuvre avec Omega 4. N'hésitez pas à le consulter régulièrement. Créons tout d'abord un sous-thème que nous allons appeler Omega Exemple (nom système : omega_ex). Cela est fait en quelques lignes avec Drush.

Une fois votre thème créé, on distingue dans le contenu de son répertoire les dossiers suivants

Pour construire un nouvel agencement (ou layout), deux répertoires vont plus particulièrement nous intéresser : le répertoire layouts contient les fichiers de déclaration des layouts ainsi que les templates (.tpl.php) de ces layouts tandis que le répertoire sass (dans son sous-dossier layouts) contient les fichiers de styles .scss des layouts. Le répertoire css contient quant à lui les fichiers de style .css du thème qui seront compilés et générés automatiquement avec compass. Vous pouvez consulter ici une vue détaillé d'un répertoire d'un thème Omega 4.

Plutôt que de réinventer la roue, copions le layout fourni avec le thème de base (simple) au sein de notre thème Omega Exemple selon la même structure. Copions ces trois fichiers

• sass/layouts/simple/simple.layout.scss
• layouts/simple/simple-layout.tpl.php
• layouts/simple/simple.layout.inc

Nous allons appeler notre propre layout Exemple. Changeons toutes les occurrences du nom du précédent layout (simple) par notre nom de layout pour obtenir cette structure et ces trois fichiers

• sass/layouts/exemple/exemple.layout.scss
• layouts/exemple/exemple-layout.tpl.php
• layouts/exemple/exemple.layout.inc

Note : Dès que vous aurez créé/renommé le fichier exemple.layout.scss, si vous avez exécuté la commande compass watch au niveau de votre thème (qui compile automatiquement les fichiers .scss dès qu'une modification est faite), le fichier exemple.layout.css est créé automatiquement. Sinon vous pouvez exécuter la commande compass compile pour générer les fichiers css à partir des fichiers scss.

Il faut également changer toutes les occurences du nom du layout au sein du fichier exemple.layout.inc pour obtenir le fichier suivant

exemple.layout.inc

 name = Exemple
description = My custom layout.
preview = preview.png
template = exemple-layout
; Regions
regions[header]         = Header
regions[navigation]     = Navigation bar
regions[highlighted]    = Highlighted
regions[help]           = Help
regions[content]        = Content
regions[sidebar_first]  = First sidebar
regions[sidebar_second] = Second sidebar
regions[footer]         = Footer
; Stylesheets
stylesheets[all][] = css/layouts/exemple/exemple.layout.css 

Après avoir vidé le cache, nous pouvons sélectionner notre nouvel agencement dans les paramètres de notre thème.

Et notre nouvel agencement (le mode debug permet d'afficher toutes les régions) est disponible.

Personnalisons notre agencement

Nous allons rajouter quatre zones Postscript de largeur égale juste au-dessus du footer, ainsi qu'une région Banner juste en-dessous de la région Navigation.

Afin de rajouter des régions dans notre layout, il suffit de les déclarer dans le fichier exemple.layout.inc  ET dans le fichier .info du thème, c'est à dire le fichier omega_ex.info.

Notre fichier exemple.layout.inc inclue donc cinq nouvelles régions (ne pas oublier de les déclarer également dans le fichier omega_ex.info)

 name = Exemple
description = My custom layout.
preview = preview.png
template = exemple-layout
; Regions
regions[header]            = Header
regions[navigation]        = Navigation bar
regions[banner]            = Banner
regions[highlighted]       = Highlighted
regions[help]              = Help
regions[content]           = Content
regions[sidebar_first]     = First sidebar
regions[sidebar_second]    = Second sidebar
regions[postscript_first]  = Postscript First
regions[postscript_second] = Postscript Second
regions[postscript_third]  = Postscript Third
regions[postscript_fourth] = Postscript Fourth
regions[footer]            = Footer
; Stylesheets
stylesheets[all][] = css/layouts/exemple/exemple.layout.css 

Il faut désormais rajouter ces 5 régions dans le fichier exemple-layout.tpl.php

Insérez ces lignes pour rendre la région Banner (juste en-dessous de la balise header)

  <div class="l-banner">
    <?php print render($page['banner']); ?>
 </div>

et ces lignes pour rendre les régions Postscript (juste au-dessous de la balise footer)

  <div class="l-postscript">
    <?php print render($page['postscript_first']); ?>
    <?php print render($page['postscript_second']); ?>
    <?php print render($page['postscript_third']); ?>
    <?php print render($page['postscript_fourth']); ?>
  </div>

Notre site intègre désormais nos cinq nouvelles régions.

Comme nous pouvons le voir, il ne reste désormais plus qu'à déclarer nos régions au niveau du fichier de style  exemple.layout.scss afin de les intégrer correctement dans notre template basé sur Susy et leur appliquer les styles adéquats.

Nous disposons, avec cette feuille de style copiée du layout simple, de trois modes de vue qui s'appuient sur deux points de rupture (breakpoint) basés sur 44em ($tab) et 70em ($desk) : le mode mobile (4 colonnes), le mode tablette (qui s'appuie sur 12 colonnes) et le mode desktop (qui s'appuie sur 16 colonnes).

 // Susy Media Layouts @see http://susy.oddbird.net/guides/reference/#ref-media-layouts
$tab: 44em 12; // At 44em use 12 columns.
$desk: 70em 16; // At 70em use 16 columns. 

Nous allons donc rajouter dans un premier temps l'enveloppe (l-banner) de notre région Banner ainsi que l'enveloppe (l-postscript) des quatre régions Postscript, et ceci pour les trois modes de vue possibles définis dans la feuille de style par @include at-breakpoint($xxx). Nous déclarons ces deux enveloppes comme constituant un conteneur principal.

 .l-header,
 .l-main,
 .l-banner,
 .l-postscript,
 .l-footer {
   @include container; // Define these elements as the grid containers.
   // @include susy-grid-background; // Show the columns for debugging.
   margin-bottom: $vert-spacing-unit;
 } 

Nous déclarons les quatre régions Postscript pour le mode tablette ($tab) en leur affectant 3 colonnes sur 12. Pour la dernière région, nous spécifions qu'il s'agit de la dernière région de l'enveloppe avec l'instruction omega.

 .l-region--postscript-first,
 .l-region--postscript-second,
 .l-region--postscript-third {
   @include span-columns(3, 12); // Span 3 columns of 12.
 }
  .l-region--postscript-fourth {
   @include span-columns(3 omega, 12); // Span the last (omega) 3 columns of 12.
 } 

et pour le mode desktop ($desk) en leur affectant 4 colonnes sur 16

 .l-region--postscript-first,
 .l-region--postscript-second,
 .l-region--postscript-third {
   @include span-columns(4, 16); // Span 4 columns of 16.
 }
  .l-region--postscript-fourth {
   @include span-columns(4 omega, 16); // Span the last (omega) 4 columns of 12.
 } 

Note: les classes l-region--postcript-first,  l-region--postcript-second, etc. sont ajoutées automatiquement par le thème de base Omega à l'ensemble des régions du thème.

Nous disposons d'un agencement personnalisé responsive (custom layout) pour Omega 4 que nous pouvons utiliser sur l'ensemble des pages du site Internet, ou seulement quelques unes si besoin. Grâce au framework Susy, nous avons pu réaliser un agencement complexe, sur mesure et responsive en quelques lignes de code. N'hésitez pas à consulter la documentation de Susy pour en savoir plus sur toutes les possiblités offertes. Vous serez étonné de la puissance de ce framework.

Pour utiliser différents agencement de page sur votre site, vous pouvez utiliser ce hook dans votre fichier template.php de votre thème, ou encore le module Context Omega.

 function THEME_omega_layout_alter(&$layout) {
  if (arg(0) == 'node' && is_numeric(arg(1))) {
    $nid = arg(1);
    $node = node_load($nid);
    if (isset($node) && $node->type == 'page') {
      $layout = 'exemple';
  }   
}  

Un point obscur ? N'hésitez pas à demander un éclaircissement dans les commentaires.