Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

BlueprintCSS

Alors que je musardais sur le Net, à la recherche de je ne sais plus quoi, je suis tombé sur quelques pages parlant du framework Blueprint CSS.

Ce framework est destiné à vous faire gagner énormément de temps dans la conception de vos règles et mises en pages à base de CSS. Ce qui est, somme toute, assez appréciable si comme moi vous ne touchez aux CSS qu’une ou deux fois par an...

Pour avoir un aperçu de ce qu’un framework CSS est censé vous apporter, voir les quatre premières parties de l’article de Bruno Bichet, traduction d’un article de Smashing magazine.

Pour vous mettre l’eau à la bouche concernant la facilité de mise en page avec BlueprintCSS, voir ce mini-tuto BluePrintCSS de la Ferme du Web, et aussi le site ConstructYourCSS.org qui propose une façon interactive de construire ses gabarits BlueprintCSS.

Mais le plus beau reste à venir : Blueprint est aussi un thème de Drupal, qui intègre le framework BlueprintCSS. On peut donc construire et mettre en œuvre ses gabarits Drupal avec, très simplement.

En me basant sur les liens précédents, j’allais écrire un tuto expliquant comment faire et c’est alors que je suis tombé sur l’article Getting started with the Blueprint theme de Michael Anello.

Eh bien... Plus la peine d’écrire l’article ! Je n’aurais pas été aussi clair que lui :-)

J’ai donc demandé à Michael Anello si je pouvais traduire son tuto pour le publier ici, et il m’a gentiment répondu que oui.

Le voici.

Démarrer avec le thème Blueprint

Quand on parle des thèmes Drupal, il y a deux noms qui se positionnent en tête de liste : Zen et Blueprint. Cet article vous parlera du second et vous dira comment travailler avec.

Alors, pourquoi Blueprint est-il un bon thème de démarrage ? D'abord, et avant tout,  parce qu'il intègre le Framework Blueprint CSS, un projet open-source indépendant. Ce framework a été conçu pour accélérer le développement des CSS - en particulier le cas des mises en page CSS dans lesquelles plusieurs éléments HTML sont positionnés sur la page. Il fournit également des éléments de typographie conséquents, une feuille de style pour l'impression et quelques autres caractéristiques. 

L'aspect « mise en page » de Blueprint repose sur un système de grille qui divise la page en plusieurs colonnes, accessibles depuis les CSS. C'est là que réside la vraie puissance de Blueprint.

Quels bénéfices vous apporte-t-il en tant que concepteur de thèmes Drupal ? 

D'abord, et surtout, il réduit sensiblement vos temps de développement en vous garantissant que pratiquement tous les problèmes de compatibilité de navigateurs avec les CSS flottants appartiendront au passé (à condition que vous utilisiez Blueprint CSS tel qu'il a été conçu). 

Vous avez besoin d'une maquette qui divise la page en un nombre donné de blocs ? Pas besoin du module Panels pour cela, c'est facile à faire avec Blueprint. Vous pouvez « panéliser » vos pages sans Panels.

Téléchargez, téléchargez encore, installez, activez-le

Le thème Blueprint pour Drupal que vous téléchargerez de Drupal.org ne fera que la moitié du chemin. A l'inverse de la plupart des thèmes Drupal, Blueprint intègre un projet open-source séparé - le framework Blueprint CSS. Aussi, vous devez d'abord télécharger le thème Blueprint sur Drupal.org

Puis allez sur BlueprintCSS.org pour télécharger le framework :

Comme pour tout thème Drupal, décompressez l'archive puis placez-là dans votre dossier sites/all/themes

Ensuite, prenez l'archive du framework BlueprintCSS - dont le nom ressemble à quelque chose comme joshuaclayton-blueprint-css-... - décompressez-là, renommez-là en Blueprint tout court et placez-là dans le dossier Blueprint de votre dossier de thèmes. 

Une fois que cela sera fait vous devriez avoir un dossier blueprint (celui du framework) dans un dossier blueprint (celui du thème) (attention à la casse : tous les noms en minuscules). Est-ce assez biscornu ?

A ce stade, vous êtes prêt à activer le thème. Connectez-vous en tant qu'administrateur, allez dans le menu Administrer » Construction du site » Thèmes puis cochez la case Activé et le bouton radio Par défaut du thème Blueprint.

Après avoir enregistré la configuration, allez en haut de la page d'accueil de votre site. En supposant que vous utilisiez une installation récente de Drupal 6, elle devrait ressembler à quelque chose comme ceci :

N'est-ce pas magique ? 

En fait, pas trop. Mais le but du thème Blueprint n'est pas d'être opérationnel dès l'installation, il est prévu pour servir de fondations solides sur lesquelles vous construirez votre thème. Mission accomplie.

Le plan

Bien, maintenant que vous avez le thème Blueprint prêt à travailler,  qu'allez-vous faire avec ? Pourquoi ne pas créer une une page d'accueil avec ses nombreuses régions qui accueilleront différents blocs ? 

Peut-être quelque chose comme ceci...

Ne faites pas attention à l’aspect rudimentaire de cette maquette, je n’ai pas eu le temps de la faire à l’échelle ni de la décorer.

Pour réaliser cette maquette, il nous faut un plan d'attaque :

  1. Créer un sous-thème de Blueprint
  2. Mentionner les nouvelles régions dans le fichier .info
  3. Créer un gabarit de page spécifique pour la page d'accueil
  4. Ajouter à ce gabarit la magie du framework Blueprint CSS
  5. Être épaté
  6. Richesse et célébrité
Pas trop compliqué ? Alors allons-y !

Créer un sous-thème

Bien que la création d'un thème dérivé ne soit pas une obligation, le faire évitera bien des tracas si on doit un jour actualiser le site. En créant un sous-thème, vous dissociez réellement vos modifications du thème de base. C'est une bonne chose.

Créer un sous-thème est assez simple, voici le topo :

  1. Dans votre dossier sites/all/themes, créez un nouveau dossier, vide,
  2. Créez un fichier .info

Plutôt que de rentrer dans des détails qui semblent effrayants mais qui ne le sont pas tant que ça, allez jeter un œil sur cette page de Drupal.org, (ici la traduction en français) qui expose une méthode rapide de création de thème. A la fin de cet article, vous pourrez aussi télécharger le sous-thème réalisé dans cet article.

J'ai appelé ce sous-thème « sdhft » (Super Duper Happy Fun Theme), aussi j'ai crée un dossier sdhft qui contient un fichier sdhft.info. Le fichier sdhft.css est vide, il n'a pas encore de contenu.

Une fois que cela sera fait, retournez dans le menu Administrer » Construction du site » Thèmes et cochez la case Activé et le bouton radio Par défaut du nouveau sous-thème.

Créer les régions

Conformément à la maquette ci-dessus, nous allons devoir ajouter un certain nombre de régions à notre gabarit. Ces régions pourront contenir tout type de contenu via le menu Administrer » Construction du site » Blocs, ce seront des régions pleinement opérationnelles.

L'ajout des régions à un thème se fait en deux temps : 

  1. on les déclare dans le fichier .info du thème 
  2. puis on les crée dans un gabarit de page (page template).

Nous allons faire la première étape maintenant, la deuxième sera effectuée plus bas, dans la section « La magie de Blueprint ».

Pour déclarer une région dans le fichier .info d'un thème, ajoutez simplement une ligne de ce format :

regions[nom_de_la_variable] = libellé

« nom_de_la_variable » est le nom de la variable PHP dans laquelle nous appellerons le contenu dans la région du gabarit. « Libellé » sera le nom de la région tel qu'il apparaîtra dans la page Administrer » Construction du site » Blocs.

N'oubliez pas que nom_de_la_variable ne doit pas comporter d'espaces ni de caractères exotiques dans son nom.

Pour la maquette ci-dessus, j'ajouterai les lignes suivantes dans le fichier sdhft.info, il ressemblera donc à ceci :

name = sdhft
description = SuperDuperHappyFunTheme
core = 6.x
base theme = blueprint
stylesheets[screen,projection][] = sdhft.css

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

regions[content_header] = Content Header
regions[content_left] = Content Left
regions[content_right] = Content Right
regions[f1] = Footer 1
regions[f2] = Footer 2
regions[f3] = Footer 3

Le premier groupe de régions est issu du fichier blueprint.info, le deuxième groupe est basé sur la maquette.

Créer le gabarit de la page d'accueil

Ensuite, je veux créer un gabarit de page qui sera seulement utilisé pour la page d'accueil du site. Heureusement, Drupal dispose de quelques astuces intégrées pour le faire: je n'ai qu'à copier-coller le fichier page.tpl.php du dossier /sites/all/themes/blueprint vers mon dossier /sites/all/themes/sdhft et le renommer en page-front.tpl.php.

Le -front a un sens, il indique à Drupal d'utiliser ce fichier gabarit pour la page d'accueil, comme indiqué dans la page Administrer » Configuration du site » Informations.

Il y a d'autres façons de nommer les gabarits pour leur utilisation dans d'autres contextes. Plus d'informations disponibles ici (et la traduction en français par kolossaldrupal est ici).

Maintenant, voici une astuce : à ce stade, votre gabarit ne sera jamais utilisé. Quand vous créez un sous-thème et surchargez un gabarit (c'est ce que vous êtes en trains de faire en créant un fichier page-front.tpl.php), le nouveau gabarit ne sera jamais vu par Drupal, à moins que le gabarit de base ne soit également présent dans le même dossier. Dans le cas qui nous occupe, le gabarit de base est le fichier page.tpl.php original du thème Blueprint. Vous devez donc copier le page.tpl.php du thème Blueprint dans le dossier de votre sous-thème - sans le renommer.

Quand ce sera fait, vous aurez deux gabarits (un page.tpl.php et un page-front.tpl.php) dans le dossier de votre sous-thème. A ce stade vous pouvez les tester en éditant le fichier page-front.tpl.php et en y mettant un texte quelconque après la balise <body> :

<body class="<?php print $body_classes; ?>">
SuperDuperHappyFunTheme Home Page!!!!
<div class="container">
  <div id="header">

Ensuite, sur votre site, reconstruisez le registre de thème (en cliquant sur le bouton Supprimer les données du cache, en bas de la page Administrer » Configuration du site » Performances) puis rendez-vous sur votre page d'accueil. Vous devriez voir quelque chose comme ceci :

Notez que j'ai l'excellent module Administration Menu. Vous pouvez aussi vider le registre de thème via l'icône Drupal du menu.

Ceci prouve que Drupal utilise le fichier page-front.tpl.php pour la page d'accueil. Super. Vous pouvez effacer le texte temporaire maintenant.

La magie Blueprint

Il est temps de blueprint-ifier les choses. La première chose sera d'en apprendre un peu plus sur la façon de travailler du framework Blueprint CSS.

Par défaut, Blueprint dispose d'une largeur de mise en page fixe de 960 pixels. Comme la mise en page est basée sur une grille, ces 960 pixels sont divisés en colonnes de 24 à 40 pixels de large (en fait, ce sont des colonnes de 30 pixels de large, avec des gouttières de 10 pixels). Pour afficher ces colonnes, il suffit d'ajouter la classe showgrid aux éléments container. Blueprint utilise la classe container pour regrouper ses colonnes.

Dans votre cas, éditez le fichier page-front.tpl.php et ajoutez la classe showgrid comme ce qui suit :

<body class="<?php print $body_classes; ?>">

<div class="container showgrid">
  <div id="header">
    <h1 id="logo">
      <a title="<?php print $site_name; ?><?php if ($site_slogan != '') print ' &ndash; '. $site_slogan; ?>" href="<?php print url(); ?>"><?php print $site_name; ?><?php if ($site_slogan != '') print ' &ndash; '. $site_slogan; ?></a>
    </h1>

Rafraichissez votre page et régalez-vous devant votre toute nouvelle grille d'arrière-plan :

Pour cet exemple, il n'y a que trois types de classes Blueprint CSS à connaître : container, span-## et last. Vous savez déjà tout ce qu'il y a à savoir sur ma classe container

Les classes span-## sont utilisées pour déclarer la largeur des différents éléments de votre page, en colonnes. Par exemple, en utilisant le navigateur Firefox et l'extension Firebug, je peux explorer la colonne HTML de gauche et voir ce qui suit :

On peut y voir que deux classes ont été appliquées à la colonne de gauche : col-left et span-6.

La classe span-6 est une classe Blueprint qui indique que cette colonne fait 240 pixels de large (chaque colonne Blueprint faisant 40 pixels, multipliés par 6 colonnes cela fait 240 pixels [La vache ! Prix Nobel d'arithmétique !]). 

Vous pouvez changer la valeur span-6 par une autre via Firebug et voir les changement immédiatement. Essayez de la changer pour span-2 (2 colonnes, 80 pixels), ou span-16 (16 colonnes, 640 pixels) pour avoir une idée de comment ça marche.

La dernière classe que vous devrez connaître est last. Elle est assez facile à comprendre - vous devez appliquer cette classe à la dernière colonne d'une rangée (voyez comme les auteurs ont été intelligents pour les conventions de nommage). D'après notre maquette, la classe last devra être appliquée aux régions content_header, content_right, f3 et content_footer.

En utilisant ces trois classes et quelques div imbriqués, vous pouvez maintenant vous adonner joyeusement à la construction de la page et créer le balisage requis. 

La maquette utilise les régions existantes header, footer et left sidebars du thème de base, aussi, tout ce que vous aurez à faire sera d'ajouter les nouvelles régions à la zone de contenu principale. En ayant cela à l'esprit, le code HTML est facile à structurer :

<div class="col-content_header span-18 last">
</div>

<div class="span-18">
<div class="col-content_left span-9">
</div>

<div class="col-content_right span-9 last">
</div>
</div>

<div class="span-18">
<div class="col-f1 span-6">
</div>

<div class="col-f2 span-6">
</div>

<div class="col-f3 span-6 last">
</div>
</div>

<div class="col-content_footer span-24 last">
</div>

Comme vous le voyez, chaque rangée de la maquette est contenue dans un div dont la largeur total (span-18) correspond à la zone de contenu principale. Ensuite, à l'intérieur de chaque rangée, j'ai disposé les différentes régions avec des div ayant leurs propres largeurs (span-9, span-6).

J'ai également pris un peu d'avance en ajoutant des classes supplémentaires à chaque région (col-content_header, col_content_left, etc), elles pourront ainsi être facilement ciblées par les CSS si besoin.

Ayez à l'esprit que puisque nous avons affaire avec une disposition de largeur fixe, nous avons un nombre limité de colonne (24). Il est important que, dans chaque rangée, la somme des div soit égale à 24 colonnes. 

Dans le code ci-dessus chaque rangée fait 18 colonnes, comme la barre de gauche fait 6 colonnes de large, cela nous donne les 24 colonnes.

Le thème Blueprint déclare les largeurs des barres latérales et des zones de contenu dans la fonction phptemplate_preprocess_page() du fichier template.php. Modifier ces valeurs est un exercice qui sera laissé au lecteur (j'ai toujours voulu dire ça...)

Dans l'étape suivante on ajoutera ce code HTML au fichier page-front.tpl.php avec les instructions print qui afficheront les contenus souhaités dans les nouvelles régions. Par exemple, pour que le contenu attribué à la région Footer 1 s'affiche dans la nouvelle région, vous devrez ajouter ceci :

<div class="col-f1 span-6">
<?php print $f1; ?>
</div>

Vous vous souvenez du topo sur les variable_name du fchier .info ? La variable $f1 ci-dessus est la même, juste avec un signe $ en préfixe.

Pour compléter le gabarit, vous pourriez vouloir déplacer certaines autres variables vers les nouvelles régions, enlevez la variable $content et déplacez le div footer actuel en dehors de la zone de contenu principale (il apparaîtra ainsi après les autres éléments, y compris après la barre de gauche). Plutôt que de montrer tout ce code ici, je l'ai inclus comme élément de mon sous-thème sdhft, disponible au téléchargement.

Comme élément du sous-thème, j'ai ajouté une déclaration CSS pour aider à l'identification des différentes régions que j'ai créé :

.col-content_header .block,
.col-content_left .block,
.col-content_right .block,
.col-f1 .block,
.col-f2 .block,
.col-f3 .block,
.col-content_footer .block {
 border: 1px solid red;
}

Cette déclaration CSS ajoute simplement une bordure rouge à chacune des nouvelles régions. N'hésitez pas à l'effacer (ainsi que la classe showgrid dans page.tpl.php) une fois que vous serez à l'aise avec cette mise en page.

A ce stade, votre nouveau gabarit est prêt à l'emploi ! Allez dans la page Administrer » Construction du site » Blocs et ajoutez du contenu aux nouvelles régions de votre page d'accueil. Voici un aperçu de la mienne après l'ajout de contenu :

Avec cette méthode, il est facile de créer des pages qui ressemblent beaucoup à celles de Panels, mais sans son environnement. Cette méthode est toute indiquée si vous avez affaire à des gabarits qui n'ont pas besoin des fonctionnalités avancées de Panels (telles que context, arguments ou relations).

Dans cet article, je m'en suis tenu aux fonctions de base, mais vous pouvez faire bien plus de choses avec Blueprint. Je vous recommande chaudement la cheetsheat Blueprint pour en avoir un résumé et un mini-guide de référence.

Michael Anello.

DrupalEasy - DrupalEasy.com

Fichier attachéTailleAccèsLast download
sdhft.zip4.71 Ko0Not yet downloaded