Les Frameworks CSS envahissent le web. Très pratiques, ils permettent de gagner beaucoup de temps lors pour la mise en page CSS de votre site.

Parmi les principaux frameworks CSS du moment, j'en ai sélectionné 2:

• 960 Grid System
• Blueprint CSS Framework

Dans un premier temps, j'ai pensé qu'un Framework CSS était vraiment inutile, et que je préférais faire mes mises en page à la main. Mais après avoir essayé un des framework, j'ai complètement changé d'avis !

Quelles sont les avantages à utiliser ces frameworks CSS ?

• La rapidité de développement
• Le CSS optimisé, taille et écriture.
• Bonne documentation, exemples et tutorials en ligne
• Structure mise en page propre
• Compatibilité multi navigateur
• Permet aux WebDesigner d'utiliser une grille sous photoshop puis d'intégrer leur design très rapidement.

960 Grid System

960 Grid System est un Framework permettant de mettre en forme la structure de votre site facilement.

En effet, il permet de quadriller votre page en 12 ou 16 colonnes pour aligner vos boites et éléments HTML correctement.

La largeur de la page web est fixée à 960px; taille optimisée pour la résolution d'écran la plus utilisée: 1024*768px.

Le fichier CSS pèse uniquement 3,6Ko en mode compressé.

Pratiquer avec 960 Grid System

Voici un court tutorial pour prendre en main le framework CSS:

1) Insérez les CSS dans vos pages web

<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_CSS/960/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="/VOTRE_REP_CSS/960/text.css" />

Il faut inclure les trois styles CSS du framework pour charger la grille.

Ensuite, nous pouvons ajouter 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

Comme je vous l'expliquais, il existe 2 types de quadrillages: Soit en 12 colonnes soit en 16 colonnes.

Layout utilisant 12 colonnes

Layout utilisant 16 colonnes

Voir les exemples sur le site officiel

Le choix doit se faire en fonction de la complexité de votre layout:

• Colonnes complexes, fines et multiples: choisissez 16 colonnes
• Colonnes plus basiques et larges, architecture de site plus commune: choisissez 12 colonnes.

Une fois choisi, créez la div conteneur principale avec la classe container_12 ou container_16:

<div class='container_12'>

</div>

3) Disposez vos colonnes

Le Framework met à disposition des divs de plusieurs tailles, vous n'avez donc rien a calculer, tout est fait pour vous.

Nous voulons par exemple un site avec une colonne menu à gauche et à droite, et une colonne centrale pour le contenu principal:

<div class="container_12">
    <div class="grid_3">Menu Gauche</div>
    <div class="grid_6">Contenu principal</div>
    <div class="grid_3">Menu Droite</div>
</div>

Il faut avoir en tête que votre layout est divisé en 12 colonnes. Vous n'avez plus à vous soucier de la taille, utilisez seulement les classes grid_NUM ou NUM est la largeur de votre colonne.

En additionnant la taille des grid, vous devez retomber à 12, ou 16 suivant votre conteneur.

Pratique non ?

4) Gestion des marges

Par défaut, il y'a quelques marges entre vos colonnes (10px en margin-left et 10px en margin-right).

Mais il est très facile de les retirer. Dans notre cas de 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, nous allons retirer 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é nos colonnes, nous pouvons modifier leur style, couleurs etc. à l'aide de notre feuille de styles styles.css

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 vous souhaitez 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.

Voilà pour une première prise en main du Framework CSS 960 Grid System.

Tutorial vidéo sur l'utilisation du framework CSS

Voici un tutorial réalisé par nettuts qui reprend les bases pour l'utilisation du Framework.

Nous verrons dans un prochain billet comment prendre en main l'autre framework CSS que j'ai retenu: Blueprint.

Site Officiel du framework

Démonstration