Démarrage rapide avec Blueprint

Vous trouverez ici un tutoriel rapide pour démarrer avec Blueprint et consulter le tutoriel original sur le site de Blueprint

Installation

Blueprint devrait être dans le répertoire CSS de votre site. Après avoir fait ça, ajoutez ces deux lignes entre les balises . Assurez-vous de vérifier l’attribut href:

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

Blueprint est prêt à être consommé.

Fichiers dans Blueprint

Le framework à quelques fichiers que vous devriez connaître. Chaque fichier dans le répertoire ‘src’ contient pas mal (heureusement) de commentaires.

Les fichiers compressés (ceux allant dans le fichier 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: This file sets up the grid (it’s true). It has a lot of classes you apply to divs to set up any sort of column-based grid.
• blueprint/src/typography.css: Ce fichier mets pa défaut la typographie. Il contient aussi quelques méthodes qui feront des choses intéressantes à votre texte.
• blueprint/src/forms.css: Inclue quelque style mimimum pour vos formulaires.
• 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: Inclue tous les hack pour notre bien-aimé IE6 et 7.

Scripts

• lib/compress.rb: Un script Ruby pour compresser et customiser votre CSS. Donnez un nom, un nombre de colonne, des tailles, des chemins des sorties, des projets multiples ou des noms de classe sémanatique. Voir les commentaires dans le fichier ou lancez$ruby compress.rb -h pour plus d’informations.
• lib/validate.rb: Valide les fichiers Blueprint avec le W3C CSS validator.

Autres

• blueprint/plugins/: Contient des fonctions additionnelles. Voir les fichiers readme de chaque répertoire des plugins pour aller plus loin.
• tests/: Contient des fichiers html qui testent plusieurs aspects de Blueprint. Ouvrez tests/index.html pour plus d’informations.

Utiliser Blueprint

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

La typographie

Typography.css n’a pas besoin d’être customisé. 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 avoit une hauteur qui est un multiple 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 renseigner votre nom domaine, pour que les liens qui sont entre parenthèses montre le texte du lien sur la version imprimée. Sans renseigner votre nom de domaine, seul les URL distantes 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, utilisez le compresseur dans lib/compress.rb Ce fichier a beaucoup d’options qui sont expliquées dans les commentaires de ce fichier.

Si vous préférez le faire manuellement, utilisez la formule suivante pour trouver la nouvelle largeur totale:


Total width = (columns * 40) - 10


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


<div class="container">
<p>Here's my site!</p>
</div>


Vous utiliserez alors les div avec les classes .span-x pour définir combien de colonnes vous voulez. Voici un exemple.


<div class="container">
<div class="span-24">
Header
</div>
<div class="span-4">
Left sidebar
</div>

<div class="span-16">
Main content
</div>
<div class="span-4 last">
Right sidebar
</div>
</div>

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.


<div class="container">
<div class="span-24">
Header
</div>
<div class="span-4">
Left sidebar
</div>

<div class="span-16">
<div class="span-8">
Box1
</div>
<div class="span-4">
Box2
</div>

<div class="span-4 last">
Box3
</div>
<div class="span-16 last">
Main content
</div>
</div>

<div class="span-4 last">
Right sidebar
</div>
<div class="span-24">
Footer
</div>
</div>

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. You can prepend and append empty columns, pull or push images across columns, add borders between columns, and use multiple containers to create almost any layout. Vous pouvez ajouter des colonnes vides, tirer ou pousser des colonnes à travers des images, ajouter des espaces entre les colonnes, et utiliser plusieurs conteneurs pour créer à peu près toute les mises en page. Consultez les commentaires dans grid.css et l’exemple de pages pour plus d’informations.