Tutorial de Démarrage rapide

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 trois 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 utilisé.

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 : Ce fichier remet à zéro les valeurs CSS des navigateurs, pour vous.
• blueprint/src/grid.css : Ce fichier met en place les grilles. Ce fichier comporte de nombreuses classes appliquées au divs, pour mettre en place toute sorte de grille / colonnes.
• blueprint/src/typography.css : Ce fichier mets par 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’imprimante, pour que votre site lorsqu’il est imprimé soit mis en page pour ce type de périphérique. Il devrait être inclue sur chaque page.
• blueprint/src/ie.css : Inclue tous les hack pour notre bien-aimé Internet Explorer.

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 BluePrint est utilisé, est de regarder dans les fichiers CSS commentés, ou dans le code source de la page d'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 avoir 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.

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>Ceci est mon 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é toute création se passe très vite. Le but est de faire un code comme celui-ci. Cependant il ne faut pas oublier la classe last, pour que tout se passe bien.

Grid.css peut faire beaucoup plus que ce qui est montré ici.

Vous pouvez ajouter des colonnes vides, tirer ou pousser des images à travers les colonnes, ajouter des bords / espaces entre les colonnes, et utiliser plusieurs conteneurs pour créer à peu près toute les mises en page. Consultez les commentaires présents dans grid.css et les pages d'exemples.