1. Insérer les feuilles de style du framework pour charger la grille


<link rel="stylesheet" type="text/css" media="all" href="/VOTRE_REP_CSS/960/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="/VOTRE_REP_SS/960/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="/VOTRE_REP_CSS/960/text.css" />

Insérer une feuille de style perso que l'on modifiera
<link rel="stylesheet" type="text/css" media="all" href="/VOTRE_REP_CSS/styles.css" />

Seule cette feuille de style sera modifiée. Il est déconseillé de toucher à celles du framework

2. Choix du conteneur


Il existe 2 types de quadrillages: Soit en 12 colonnes soit en 16 colonnes.
Le choix doit se faire en fonction de la complexité du layout:
  • Colonnes complexes, fines et multiples: choisir 16 colonnes
  • Colonnes plus basiques et larges, architecture de site plus commune: choisir 12 colonnes.

Une fois choisi, créer la div conteneur principale avec la classe container_12 ou bien container_16
  • <div class='container_12'>
  • </div>

Il faut avoir en tête que le layout est divisé en 12 colonnes. Ne plus se soucier de la taille, utiliser seulement les classes grid_NUM dans lequel NUM est la largeur de la colonne. En additionnant la taille des grid, on doit retomber à 12, ou 16 suivant le conteneur.

4. Gestion des marges


Par défaut, il y a des marges entre les colonnes (10px en margin-left et 10px en margin-right).
Mais il est possible de les retirer. Dans le cas d'un site à 3 colonnes, les colonnes menu (droite et gauche) n'ont pas besoin de margin. Voici la solution pour les retirer:
  • <div class="container_12">
    • <div class="grid_3 alpha">Menu Gauche</div>
    • <div class="grid_6">Contenu principal</div>
    • <div class="grid_3 omega">Menu Droite</div>
  • </div>
En ajoutant la classe alpha, on retire la marge de gauche, et en utilisant la classe omega, celle de droite.

5. Personnalisation du style des colonnes


Maintenant que l'on a structuré et positionné les colonnes, on peut modifier leur style, couleurs etc. à l'aide de notre feuille de styles styles.

En CSS, les instructions associées à un id sont plus fortes que celles associées à une classe.

  • <div class="container_12">
    • <div id="menu_gauche" class="grid_3 alpha">Menu Gauche</div>
    • <div id="contenu" class="grid_6">Contenu principal</div>
    • <div id="menu_droite" class="grid_3 omega">Menu Droite</div>
  • </div>

Ainsi, si l'on souhaite modifier des marges, couleurs etc. Il est préférable d'utiliser ici les id des colonnes de manière à surpasser les styles par défaut du framework.