04
FEV

Tutorial - Prendre en main un Framework CSS. #2 Blueprint

Publié le 04/02/09 à 11h56 par DJo

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:

Frameworks CSS

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.

 

Blueprint CSS

blueprintcss - Framework CSS

 

Blueprint est un Framework CSS permettant de structurer votre site à l'aide de grilles virtuelles et propose aussi des classes avec des styles préconçus (erreur, succès, formulaires, taille de police etc...) pour un gain de temps non négligeable lors de l'intégration d'un site web !

Contrairement à 960 Grid System, blueprint opte pour une largeur de page à 950px. (Celle que j'utilise habituellement pour mes sites).

Blueprint permet également d'améliorer le rendu visuel pour impression.

 

Prise en main du framework CSS Blueprint

Voici un court tutorial pour débuter avec Blueprint:

1) Insérez les CSS dans vos pages web

Ajoutez ces lignes dans la balise de votre site.

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

Le fichier ie.css n'a besoin d'être chargé que si le navigateur est Internet Explorer (Il contient des fix pour le navigateur).

Vous pouvez aussi inclure votre feuille de styles perso dans laquelle vous ajouterez les styles propres à votre site.

<link rel="stylesheet" href="VOTRE_REP_CSS/styles.css" type="text/css" media="screen, projection"> 

Là encore, il est déconseillé de modifier les feuilles de style du framework. Utilisez votre classe pour écraser des instructions.

 

2) Le conteneur

Blueprint impose une largeur de 950px (Optimisé pour la résolution 1024 * 768px).

Le framework découpe la page en 24 colonnes, plus précis que 960 (avec 12 ou 16 colonnes).

Première chose à faire, déclarer le conteneur comme ceci:

<div class="container">
    Contenu ici
</div>

 

3) Créez la structure de votre site avec les colonnes préformatées

Comme 960 Grid System, Blueprint met en place des classes pour vos colonnes avec des tailles explicites: span-X où X est le nombre de colonnes que doit faire votre div.

Par exemple, nous voulons créer un site avec un header, 3 colonnes: Menu de gauche, contenu principal au centre et menu de droite et un footer.

Sachant que l'on a une grille décomposée en 24 colonnes, la structure donnerait ça:

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

    <div class="span-4">
        Menu de gauche
    </div>
    <div class="span-16">
        Contenu principal
    </div>
    <div class="span-4 last">
        Menu de droite
    </div> 

     <div class="span-24">
        Footer
    </div>
</div>

Pour chacune de nos lignes, nous retrouvons un total de X = 24.

A noter aussi l'ajout de la classe last pour la dernière colonne.

 

Et si vous êtes fainéant, il existe une application web en Javascript pour créer visuellement vos colonnes:

ConstructYourCss - Créez votre structure blueprint visuellement

ConstructYourCss

Ajoutez vos colonnes, conteneurs etc visuellement. Puis générez le code Blueprint !

 

4) La gestion des marges

Blueprint attribue un margin left et right de 10px par défaut à nos colonnes.

Pour la dernière colonne, il faut utiliser la classe last pour supprimer le margin right.

Si vous voulez changer les margins, il faut écraser les instructions CSS à partir de votre feuille de style perso en ajoutant des ID à vos colonnes. (ID est plus fort que class)

 

5) La typographie

La typographie par défaut de Blueprint est plutôt bien réussie. Pas besoin de modifier grand chose, les styles sont plutôt jolis.

A vous de voir !

 

Et en cadeau, pour ne jamais oublier les instructions de Blueprint, voici un CheatSheet dédié au framework:

CheatSheet BluePrint - Anti sèche Blueprint

(Cliquez dessus pour agrandir)

 

Démos et téléchargement de BluePrint

 

Quel framework choisir maintenant ? Dur de se décider !

Dans un prochain billet, je lancerai un match comparatif entre les deux frameworks !

Baraguiné par le 23/03/12 à 15h59
Bonjour,

Comment passer de votre image sous photoshop à un document html avec CSS en utilisant Blueprint notamment

je ne vois pas trop ...

je pensais qu'en créant des zones on pouvait faire un export et du coup avoir le CSS avec la page html

Vous pouvez me contacter sur pcargouet@afm.genethon.fr

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web