Typographisme

Un site tenu par des amoureux de la typo, sur le Web comme ailleurs.

Macro-typographie sur le Web – Une grille dynamique

« Une grille typographique est une structure à deux dimensions faite de séries d’axes verticaux et horizontaux s’intersectant utilisés pour structurer le contenu. »

Passé cette définition trouvée sur Wikipedia un peu abrupte, je retiendrai pour ma part l’explication qu’en faisait Anne-Sophie lors du dernier cycle de conférence Paris-Web : notre cerveau a besoin pour pouvoir anticiper au mieux de ne pas être distrait dans sa tâche principale. Lui proposer une structure logique et répétitive permettra donc de faciliter la lecture.

L’analogie avec les marches d’escalier m’a d’ailleurs terriblement convaincu… C’est quand même plus agréable de ne pas devoir regarder ses pieds à chaque marche !

Photographie sous licence Creative Commons par Pierre Bédat.

Après avoir passé en revue outils et techniques pour travailler correctement avec des grilles de mise en page verticales et horizontales,  il est temps de s’affranchir des défauts inhérents à la bibliothèque précédemment choisie (Blueprint) ; mais aussi y apporter une plus grande… Soup–Less–e !

Voyons ensemble les avantages à compiler les feuilles de style ! (Et c’est promis, plus de jeu de mots.)

Rappels

Nous avions identifié trois défauts importants à l’utilisation d’un framework CSS :

  • des classes non-sémantiques présentes dans le code HTML ;
  • une portabilité de la structure qui s’en retrouve compliquée ;
  • un poids de fichiers assez important.

Essayons de nous en affranchir au mieux à l’aide de Less.

Less

Less est un compilateur CSS (tout comme son « concurrent » Compass) qui permet d’ajouter des notions de programmation à vos feuilles de style. 

Sa syntaxe se veut facile à appréhender puisque basée sur une syntaxe CSS enrichie. On déclare ainsi @variables, .fonctions(){…}, et #autres{#imbrications{…}}.

C’est très simple et très rapide à comprendre mais surtout, cela permet plein de nouvelles choses… Qu’on ne soupçonne peut-être pas au premier abord !

Méthodologie

Installer Less est assez simple. Vos CSS actuelles renommées avec une nouvelle extension Less seront immédiatement compatibles. Il ne reste plus qu’à mettre en place le compilateur. Pour cela plusieurs cas de figure en fonction de votre environnement :

Less.app

Oubliez les trolls (merci d’avance), je ne souhaite que pointer du doigt la mauvaise idée qui consiste bien évidemment à laisser en production le compilateur JS. Dans ce cas, la présentation de vos pages dépendrait uniquement du support JavaScript de votre client…

N’oubliez donc pas si vous utilisez le compilateur côté client de le débrancher en fin de développement. Et de lier de manière tout à fait conventionnelle votre toute nouvelle CSS compilée par ses soins.

Il existe d’ailleurs sous Windows quelques solutions à creuser qui permettront de contourner l’obstacle.

Une grille configurable

Maintenant que notre nouvel outil est en place, il est possible d’imaginer de nouvelles choses.

Pour rappel Blueprint propose par défaut une grille verticale de 24 colonnes de 30 pixels de large séparées entre elles par des gouttières de 10 pixels.

En modifiant la bibliothèque et définissant quelques variables, on peut alors facilement composer n’importe quelle autre grille. Il suffit pour cela de configurer la largeur de colonnes, leur nombre, et la largeur de leurs gouttières.

La bibliothèque tout entière sera alors générée en fonction de ces paramètres et même #grid (l’outil bien pratique utilisé en surimpression de la page) s’adaptera aux nouvelles exigences.

Envie d’essayer 960 Grid System par exemple ? Hop :

 @column: 60px; // des colonnes confortables  ;
 @margin: 20px; // des gouttières plus larges ;
@columns: 12;   // et un nombre de colonnes divisible par 2, 3, 4 et 6.

C’est très simple et tout peut-être ainsi configuré à notre convenance : grilles, marges, bordures, couleurs, etc.

Une séparation stricte du contenu et de la présentation

On reproche aussi souvent aux bibliothèques CSS d’introduire un code non-sémantique dans les fichiers HTML. Ce qui pose bien évidemment quelques soucis lorsqu’il s’agit d’adapter la grille à différents périphériques, nous l’avons vu précédemment.

Pour illustrer mon propos, partons de ce bout code très classique (un contenu principal composé d’un titre, d’un paragraphe d’introduction et de contenu standard ; une colonne secondaire) :

<div class="clearfix" lang="la">
   <div class="span-6">
      <p>Lorem ipsum dolor…</p>
   </div>
   <div class="span-18 last">
      <h1>Sit amet !</h1>
      <p class="large">Magna aliquam erat volutpat…</p>
      <p>Consectetur adipiscing elit…</p>
   </div>
</div>

Avec Less, notre code HTML va se simplifier et devenir bien plus sémantique (plus aucune classe ne traîne, si ce n’est le first-child, présent ici pour des raisons de compatibilité avec le plus ancien des navigateurs du moment) :

<div id="page" lang="la">
   <div id="sidebar">
      <p>Lorem ipsum dolor…</p>
   </div>
   <div id="content">
      <h1>Sit amet !</h1>
      <p class="first-child">Magna aliquam erat volutpat…</p>
      <p>Consectetur adipiscing elit…</p>
   </div>
</div>

Notre feuille de style au format Less récupère alors simplement les informations de présentation :

#page
{
   .clearfix;

   #sidebar
   {
      .span(6);
   }
   #content
   {
      .span(18);
      .last;

      p.first-child
      {
         .large;
      }
   }
}

On pourra alors adapter facilement sa présentation en fonction de la taille d’écran du terminal client, notamment à l’aide des media-queries. 

Il suffira par exemple de ne plus positionner la colonne et le contenu l’un à côté de l’autre, mais l’un au dessus de l’autre, séparés visuellement par une bordure. Plus besoin ici de s’embêter avec first-child : IE 6 ne supportant pas de toute manière les media-queries.

@media (max-device-width: 480px)
   #page
   {
      #sidebar
      {
         border-bottom: 1px solid #000;
         margin-top: -1px;
         .append-bottom();
      }
      #content
      {         
         p:first-child
         {
            .large;
         }
      }
   }

Comment ça marche ?

Deux techniques sont employées ici :

  • l’héritage, qui nous permet de ne pas réécrire inutilement des portions de code ;
  • les fonctions, qui nous permettent de produire un code CSS différent en fonction de variables.

Dans Blueprint nous avons :

.large
{
   font-size: 1.2em;
   line-height: 2.5em;
   margin-bottom: 1,25em;
}

Il n’est pas besoin de copier/coller les propriétés du sélecteur : il suffit d’en hériter.

De la même manière pour les colonnages, au lieu de passer par :

.span-6
{
   width: 230px;
}
.span-6
{
   float: left;
   margin-right: 10px;
}

Il suffira de coder une petite fonction pour en automatiser la tâche :

.span(@level)
{
   float: left;
   margin-right: @margin;
   width: (@level * @column) + ((@level - 1) * @margin);
}

Ce qui revient à calculer automatiquement :

.span(6)
{
   float: left;
   margin-right: 10px;
   width: (6 * 30px) + (5 * 10px); // soit 230 pixels
}

Il sera même possible de « casser » la grille par moments en passant en paramètre un nombre à virgule et créer ainsi des demi-colonnes par exemple…

Simplifier les calculs en em

Puisqu’il est possible d’effectuer des calculs simples, cela va grandement simplifier tout ce que nous devions réaliser sur la base de règles de trois. En particulier les calculs sur les tailles de textes.

Voici une petite fonction d’exemple :

.font-size(@after)
{
   @before     : 12;    // la taille de texte par défaut (en pixels après calculs)
   @line-height: 1.5em; // la hauteur de ligne par défaut
   @ratio      : 3 / 2; // le ratio entre la hauteur de ligne et la taille de texte

       font-size: @line-height / @ratio * @after / @before;              // la nouvelle taille  de texte calculée (exprimée en em)
     line-height: @line-height * (@before * @ratio) / (@after * @ratio); // la nouvelle hauteur de ligne calculée (exprimée en em)
   margin-bottom: @line-height * (@before * @ratio) / (@after * @ratio); // la marge ajoutée en bas de l’élément égale à la nouvelle hauteur de ligne
}

Elle facilitera grandement la mise en place d’un corps de texte sur un paragraphe :

p.de-bonne-taille
{
   .font-size(15); // on demande 15 pixels mais les résultats seront bien exprimés en em
}

Le code CSS une fois compilé aura cette allure :

p.de-bonne-taille
{
   font-size: 1.25em;    // soit 15 pixels
   line-height: 1.2em;   // soit 18 pixels
   margin-bottom: 1.2em; // soit 18 pixels
}

Des fichiers optimisés

Dernier avantage à cette technique : le poids de vos fichiers CSS s’en trouve optimisé. Plus besoin de prévoir tous les cas de figure pour vos colonnages, vous n’embarquez dans vos fichiers compilés que ce qui vous est nécessaire. Exit donc ce défaut également.

Sans compter que – cerise sur le gâteau – le code CSS une fois compilé peut-être automatiquement compressé.

Blueprint passe ainsi de 13,2 Ko à 6,6 Ko par défaut !

La prudence s’impose néanmoins : mesurez bien l’impact de vos héritages et de vos imbrications car cela peut peser parfois lourd lors de la compilation.

grid.less ?

Il ne tient maintenant plus qu’à vous de produire votre bibliothèque CSS dans un format dynamique. Non seulement vous découvrirez sans doute plein de choses sur la bibliothèque elle-même, mais vous pourrez aussi produire quelque chose qui correspondra parfaitement à vos attentes.

J’ai, pour ma part, fait ce travail (déjà à améliorer, c’est certain) et je vous propose si vous le souhaitez de vous en inspirer : blueprint.less.zip. L’archive est accompagnée d’un petit fichier texte explicatif et inclut déjà quelques media-queries.

La compilation dynamique de vos framework CSS est une solution élégante pour continuer à utiliser les grilles de mise en page encore plus simplement, j’en suis convaincu, j’espère que vous le serez également !

dans Design Web Par Vincent