Grid System - Tutoriel d'optimisation 960 gs

GRID SYSTEM

 

Au commencement du web, le design d’un site était uniquement assuré par des tables html, qui offraient peu de souplesse. Le format CSS (« Cascading Style Sheets » ou feuille de style) devint ensuite le nouveau standard : il permit de séparer le contenu (html, php, etc) de la forme (css). Malgré le but avoué de séduire les développeurs avec moins de code html, ce format réclame toutefois encore beaucoup de code superflu. Les éléments <div> ont remplacé les tables, mais restent imbriqués.

 

L’idée du système de grille, (le plus populaire étant 960 Grid System, 960.gs) même s’il demande de générer beaucoup d’éléments <div> et d’attributs de classe, permet une simplification du code et son adaptation aux différents systèmes de navigation.

 

Présentation du système de grille 960.gs

 

960.gs est comme son nom l’indique un système basé sur un ensemble de colonnes, écrites en CSS, dont le rôle est de rendre l’affichage d’une page web plus lisible. Pas besoin d’un nouveau programme, il suffit d’ajouter ces fichiers .css à votre site.

 

Les colonnes sont regroupées en conteneurs, « containers », généralement de 12 ou 16 colonnes, parfois 24 ou  32. Un conteneur est nommé container_x, où x désigne le nombre de colonnes, par exemple container_16 pour un ensemble de 16 colonnes dispatchées de manière régulière sur la page. Chaque colonne est séparée de la suivante par un espace appelé « gouttière ». L’ensemble du conteneur représente 970 pixels.

 

 

Une grille est un bloc de plusieurs colonnes adjacentes, on la nomme grid_x, où x représente le nombre de colonnes. Voici un conteneur de 12 colonnes découpé en 3 grilles, avec le code associé :

Modifier la taille des grilles est donc simple, il suffit de changer le nombre de colonnes par grille. La taille des gouttières permet également de modifier significativement, de manière simple, le rendu de la page.

 

Cependant, en découpant en y grilles un conteneur, on utilise y+1 div et y+1 attributs class.

C’est le principal problème posé par ce système. Comment diminuer le nombre d’occurrence des « div » et autres « class » dans le code HTML et CSS ?

 

Solutions

 

Les tables ne sont certes pas une panacée, mais utiliser plusieurs niveaux de divs imbriqués ne résout pas le problème, ce n’est qu’un changement d’étiquettes. Beaucoup de problèmes peuvent être évités avec un peu de prévoyance :

 

• Utiliser uniquement les classes dont vous avez besoin

 

960.gs inclut une bibliothèque de plus de 180 classes. Par exemple, si votre design est uniquement structuré de container_12 et de grilles grid_7 et grid_5, vous pouvez alléger le CSS en effaçant les autres.

 

• Appliquer class = « grid_x » aux éléments appropriés : entêtes, images, liens, paragraphes

 

Les éléments div ne sont pas les seuls concernés par « container_x » et « grid_x ». De manière générale, les attributs de classe peuvent être associés à la majorité des éléments du corps de la page (body), à part html, head, meta, param, script, title, style.

 

Si une balise div n’encadre qu’un seul élément, celle-ci n’est pas nécessaire.

 

Exemples :

 

Le code utilisant les éléments div suivant

<div class="grid_3">
<img src="…" alt="photo" />
</div>

peut-être remplacé par

<img src="…" alt="photo" class="grid_3" />

 

De même,

<table>
<tr>
<td><a href="#">…</a></td> <td><a href="#">…</a></td>
<td><a href="#">…</a></td> <td><a href="#">…</a></td>
</tr>
</table>

par

<a href="#" class="grid_3">…</a><a href="#" class="grid_3">…</a>
<a href="#" class="grid_3">…</a><a href="#" class="grid_3">…</a>

 

• Donner des propriétés de grille à certains éléments

 

grid_x possède des propriétés compatibles avec n’importe quel autre élément. En transférant ces propriétés directement à certains éléments, on peut supprimer les extra class.

 

Par exemple :

.examples li { (properties of .grid_4) }

<ul class="examples">

  <li>A</li>

  <li>B</li>

  <li>C</li>

</ul>

 

Avec ce simple code, tout élément inclus dans la balise <li> (liste) sera superposé à une grille de 4 colonnes :

 

Autre exemple plus complexe avec des éléments encadrés par des grilles possédant un nombre de colonnes variables :

 

.datelist { (properties of .container_12) }

.datelist h3 { (properties of .grid_3) }

.datelist p { (properties of .grid_7) }

.datelist strong { (properties of .grid_1) }

<div class="datelist">

 

  <h3>A</h3>

  <p>C</p>

  <strong>E</strong>

  <strong>G</strong>

 

  <h3>B</h3>

  <p>D</p>

  <strong>F</strong>

  <strong>H</strong>

 

</div>

 

Ici, un élément placé sous la balise datelist y { (properties of .grid_x) } sera inclus dans une grille de x colonnes, elle-même incluse dans un conteneur de 12 colonnes, comme en témoigne le rendu suivant :

 

Certes copier des propriétés de grille à certains éléments demande un certain travail préliminaire, mais le code résultant est plus lisible qu’en html pur et n’influe pas sur le système 960.gs.

 

• Utiliser les classes dans les éléments parents plutôt que dans les éléments enfants

Si la même classe d’éléments est utilisée plusieurs fois (pour les éléments enfants), il vaut mieux regrouper attribuer une classe au parent qu’à chaque enfant (<li> étant un enfant de <ul>)  :
.object { (various properties) }

<ul>
  <li class="object">…</li>
  <li class="object">…</li>
  <li class="object">…</li>
  <li class="object">…</li>    
</ul>

Ici, 4 listes d’un même bloc sont des objets de la même classe "object". Pour n’utiliser qu’une fois l’attribut de classe, il suffit de créer une classe que l’on attribuera non plus à chaque liste, mais au bloc de listes :

.group-of-object li { (various properties) }

<ul class="group-of- objects">
  <li>…</li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

Dans l’exemple précédent, il n’y a qu’un seul type d’enfant de <ul>.
 
Prenons maintenant un exemple classique structurant un corps de page web, avec plusieurs types d’enfants de <div> :

<div>
  <h1 class="title">…</h1>
  <h1 class="subhead">…</h1>
  <p class="publication-date">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
  <p class="body-text">…</p>
</div>

.title { (various properties) }
.subhead { (various properties) }
.publication-date { (various properties) }
.body-text { (various properties) }

Nous avons 4 classes et 7 fois le terme « class ». En appliquant une classe « article » au parent <div>, et en déclarant des enfants d’articles avec des propriétés particulières, nous obtenons :

<div class="article">
  <h1>…</h1>
  <h2>…</h2>
  <p class="publication-date">…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
  <p>…</p>
</div>

.article h1 { (various properties) }
.article h2 { (various properties) }
.article .publication-date { (various properties) }
.article p { (various properties) }

il ne reste plus que 2 classes et « class » n’apparaît plus que 2 fois : le code HTML et le code CSS, qui réclamera certes autant de définitions (4), seront plus lisibles.

Ainsi, il n’est pas nécessaire d’utiliser le terme « class » dans la déclaration de chaque objet du code HTML. Utilisez les classes uniquement quand elles sont nécessaires, autrement dit pour différencier des objets qui sans elles seraient de même type !
 

Conclusion

Les frameworks CSS, le 960.gs en particulier, ont pour but de simplifier la structure et l’effort nécessité pour afficher une page web. L’apport du CSS est la réduction de code HTML. Cependant, structurer ne fait qu’aider le travail de développement, l’optimisation du code, c’est-à-dire la réduction des occurrences de « class » et de « div », est toujours à la charge des développeurs et designers.