Prise en main rapide de Blueprint CSS

Installation

Les fichiers de Blue­print doivent être placés dans le répertoire css/ de votre site. Une fois cela fait, il faut ajouter les deux lignes sui­vantes entre les balises head de vos pages. Assurez-​​vous juste que le chemin d’accès de l’attribut href est correct :

Blueprint est désormais prêt à être utilisé.

Les fichiers de Blueprint

Le fra­mework com­porte un cer­tains nombres de fichiers à connaitre. Chaque fichier dans le répertoire src/ contient pas mal (heu­reu­sement) de commentaires.

Les fichiers com­pressés (ceux qui doivent être appelés par nos fichiers HTML)

• blueprint/screen.css
• blueprint/print.css
• blueprint/ie.css

Les fichiers sources

• blueprint/src/reset.css : This file resets CSS values that browsers tend to set for you.
• blueprint/src/grid.css : ce fichier configure la grille (c’est vrai). Il com­porte de nom­breuses classes que vous appliquez sur les div pour définir une grille basée sur des colonnes.
• blueprint/src/typography.css : ce fichier définit les réfé­rences de typo­graphie par défaut. Il contient aussi quelques méthodes qui appli­queront des choses inté­res­santes à votre texte.
• blueprint/src/forms.css : Inclue quelque style mimimum pour vos for­mu­laires.
• blueprint/src/print.css : Ce fichier indique les règles par défaut de l’imprimate, pour que votre site lorsqu’il est imprimé soit mieux que d’habitude. Il devrait être inclue sur chaque page.
• blueprint/src/ie.css : ce fichier contient tous les hacks néces­saires pour notre bien-​​aimé IE6 et 7.

Scripts

• lib/compress.rb : Un script Ruby pour com­presser et cus­to­miser votre CSS. Donnez un nom, un nombre de colonne, des tailles, des chemins des sorties, des projets mul­tiples ou des noms de classe séma­na­tique. Voir les com­men­taires dans le fichier ou lancez$ruby compress.rb -h pour plus d’informations.
• lib/validate.rb : Valide les fichiers Blue­print avec le W3C CSS validator.

Autres

• blueprint/​plugins/​ : Contient des fonc­tions addi­tion­nelles. Voir les fichiers readme de chaque réper­toire des plugins pour aller plus loin.
• tests/​ : Contient des fichiers html qui testent plu­sieurs aspects de Blue­print. Ouvrez tests/index.html pour plus d’informations.

Utiliser Blueprint

La meilleure façon de voir comment Blue­print est utilisé, est de regarder dans les fichiers CSS com­mentés, ou dans le code source de la page exemple fournie avec l’archive com­pressée. Sinon, voici un démarrage basique.

La typographie

Typography.css n’a pas besoin d’être cus­tomisé. Il vous donnera des styles par défaut assez jolis.

Le fichier typography.css définit une hauteur de ligne (line-​​height) de 18px. Ce qui veut dire que chaque éléments, depuis la hauteur de ligne jusqu’à l’image doit avoir une hauteur qui est un mul­tiple de 18. Ceci peut être ennuyeux, mais le résultat tend à être bon. Pour plus d’informations, allez voir l’article A List Apart.

Dans Print.css vous pouvez ren­seigner votre nom domaine, pour que les liens qui sont entre paren­thèses montre le texte du lien sur la version imprimée. Sans ren­seigner votre nom de domaine, seul les URL dis­tantes fonctionneront.

La grille

Par défaut, la grille fait 950px de largeur, avec 24 colonnes de 30px et 10px de marge entre chaque colonne.

Si vous avez besoin de moins ou plus de colonnes, uti­lisez le com­presseur dans lib/compress.rb Ce fichier a beaucoup d’options qui sont expli­quées dans les com­men­taires de ce fichier.

Si vous pré­férez le faire manuel­lement, uti­lisez la formule sui­vante pour trouver la nou­velle largeur totale :

La première chose à faire, est de définir un conteneur :

Vous uti­li­serez alors les div avec les classes .span-​​x pour définir combien de colonnes vous voulez. Voici un exemple.

Notez la classe last, qui est requise pour pour chaque dernier élément d’un conteneur ou d’une colonne.

Vous pouvez ajouter des colonnes où vous le souhaitez.

Une fois assimilé ça devrait aller très vite pour faire un code comme celui-​​ci, n’oubliez pas cependant la classe last et tout devrait bien aller

Grid.css peut faire beaucoup plus que cela. Vous pouvez ajouter des colonnes vides, tirer ou pousser des colonnes à travers des images, ajouter des espaces entre les colonnes, et uti­liser plu­sieurs conte­neurs pour créer à peu près toute les mises en page pos­sibles et ima­gi­nables. Consultez les com­men­taires dans grid.css et l’exemple de pages pour plus d’informations.

Réfé­rences :
 http://​wiki​.github​.com/​j​o​s​h​u​a​c​layto…
 http://​blue​printcss​.org/