Tutoriel – Framework Blueprint CSS

Les frameworks CSS sont un gain de temps certain pour la réalisation d’un site web. Blueprint est une référence en la matière. Ce billet se propose d’en expliquer les atouts et le fonctionnement.
Tout d’abord les caractéristiques de ce framework :

• une documentation complète et détaillée
• une mise en page en colonne propre, accessible et personnalisable par photoshop
• une compatibilité multi-navigateur
• rapidité de prise en main
• réinitialisation des styles par défaut que certains navigateurs s’amusent à bidouiller
• une typographie vachement sympa

Bon, maintenant que tout le monde pense que j’ai été payé, passons à un rapide tuto de mise en place. Commencez par télécharger le framework blueprint.

Inclusion des feuilles de style

Dans le head de votre page HTML vous devez inclure.

<link rel="stylesheet" href="[REPERTOIRE-DES-CSS]/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="[REPERTOIRE-DES-CSS]/blueprint/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="[REPERTOIRE-DES-CSS]/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" href="[REPERTOIRE-DES-CSS]/blueprint/ie.css" media="screen, projection">
<![endif]-->

Il y a un fix pour IE, à ne pas négliger!

Construire la structure de la page

En guise de préliminaire, petite étude statistique faite par la w3school sur le pourcentages d’internautes ayant une résolution d’écran de :

• < 1027*768 : 0,6 %
• 1024 * 768 : environ 15%
• au dessus : environ 85%

Sachant cela, on ne voudra pas mettre de largeur de page supèrieure à 960px. Mais quelle coïncidence, c’est exactement la largeur qu’impose blueprint! Ces 960px sont découpés en 24 colonnes, chaque « bloc » de colonnes ayant par défaut un margin left et right de 10px. Par exemple, nous voulons créer un site avec un header, puis 3 colonnes (menu de gauche, contenu principal au centre et menu de droite) ainsi qu’un footer :

<div>
	<div class="span-24"> <!-- occupe 24 colonnes -->
		Header
	</div>
	<div class="span-5"> <!-- occupe 5 colonnes -->
		Menu de gauche
	</div>
	<div class="span-14"> <!-- occupe 14 colonnes -->
		Contenu principal
	</div>
	<div class="span-5 last"> <!-- occupe 5 colonnes -->
		Menu de droite
	</div>
	<div class="span-24"> <!-- occupe 24 colonnes -->
		Footer
	</div>
</div>

On note les classes utilisées « span-X », X représente en fait le nombre de colonnes qui doivent être occupées. Il faut également relever la seconde classe « last » appliquée au menu droite. Cela indique qu’il s’agit de la dernière colonne de la ligne et supprime la marge par défaut imposée par blueprint.
Cette structure n’est qu’un exemple, il est possible d’en faire des centaines de combinaisons. Pour les plus flemmards, il y a http://www.constructyourcss.com/
Imposer son style!
Bon, ok, les styles imposés par blueprint sont sympas, mais si je veux imposer les miens? Il suffit d’inclure sa feuille de stype après celles de blueprint :

<link rel="stylesheet" href="[REPERTOIRE-DES-CSS]/styles.css" type="text/css" media="screen, projection">

A noter deux choses :

• ne jamais modifier les css fournies par blue print
• surcharger à l’aide d’ID (les ID sont à la classe ce que la pierre est aux ciseaux : imbatable!)

Téléchargements et documentation

>>> site officiel
>>> demonstrations
Et la CheatSheet :