Comment ça marche, un framework CSS ?

Le positionnement des blocs avec un framework CSS s’effectue grosso modo en attribuant une classe CSS pour spécifier les propriétés width et margin aux blocs avec une ou plusieurs techniques pour rétablir le flux HTML après les éléments possédant la propriété float.

Dans une grille en 16 colonnes, pour placer une image sur 4 colonnes et du texte sur les 12 restantes, on pourra utiliser le marquage HTML suivant (je vous fais grâce des CSS, le code HTML est assez explicite) :

<div id="header" class="grid_16 clear">
    <div class="grid_4"><img src="/img/logo.png" /></div>
    <div class="grid_12 last">Mon texte sur 12 colonnes</div>
</div>

Attention, pas forcément du tout fait en 950px ou 960px mais en déterminant le «pas» de la grille selon mes besoins. Je laisse ensuite  les fastidieux calculs à un générateur de grille, qu’il s’agisse de boks pour Blueprint ou encore de 960 Layout System pour 960.gs.

Un peu (ou pas) de sémantique

Les classes .span-4 ou .grid_4 ne sont pas sémantiques dans le sens où — pour certains — elles véhiculent une notion d’apparence et non pas d’utilité, de sens. Ainsi, une classe .warning est préférable à une classe .rouge même si la couleur de .warning est rouge ; si on change d’avis, on aura l’air fin avec notre classe .rouge affichant du texte orange. L’idée, c’est d’être à la fois très précis et suffisamment générique pour s’adapter à toutes les situations.

Pour revenir aux classes spécifiant la largeur des colonnes, j’ai toujours pensé qu’elles apportaient du sens, un peu à l’image de la presse quotidienne où l’on met un titre sur 8 colonnes, signifiant ainsi son importance par rapport aux autres contenus (à supposer que la maquette comporte un maximum de 8 colonnes).

Le côté sémantique de la chose est surtout à mettre en regard des contenus à maquetter : s’ils n’ont pas de sens en eux-mêmes, toute la sémantique du monde n’y pourra rien changer :D

Pour finir avec cette question de sémantique, il reste la possibilité de renommer les classes .span-x ou .grid_x. En fonction de votre projet, vous pourrez utiliser des termes plus en accord avec vos contenus comme .a-la-une pour .span-16, .breves pour .span-4 ou encore .entrefilet pour .span-2, etc. On peut donc considérer que des contenus auxquels on applique un .span-16 sont plus importants que ceux auxquels ont attribut la classe .span-4 et ainsi de suite.

Comme j’ai déjà eu l’occasion de le dire dans Framework CSS sémantique ? Comment je vois les choses (et au risque de me répéter) :

[...] la suite des .span-x peut se comprendre comme l’importance accordées à chaque bloc : du moins important (.span-1) au plus important (.span-24), à l’image de la presse écrite où un article surmonté d’un titre en «8 colonnes à Une» mérite plus d’attention qu’un entrefilet sur 2 colonnes.

Les avantages des frameworks CSS

Standardiser les méthodes de travail

Quand plusieurs personnes interviennent sur le code HTML pour placer ou déplacer des éléments (ex. supprimer ou ajouter une sidebar, un bloc de contenu, etc.) il vaut mieux avoir un jeu de classes CSS (issus d’un framework ou non, d’ailleurs) pour éviter que chaque intervenant bidouille le fichier CSS avec sa «méthode» : certains sont adeptes des position: absolute, d’autres raffolent des float: left, d’autres des table, etc. Avec des classes standardisées comme span-x, last et les clearfix qui vont avec, tout devient plus simple et cohérent.

Des maquettes dynamiques côté serveur ou client grâce aux grilles

Autre argument qui milite en faveur de la mise en place d’une grille avec un framework, c’est qu’en travaillant de cette manière, il devient possible de modifier dynamiquement la mise en page côté serveur avec PHP ou côté client avec Javascript.

Pour distribuer votre contenu sur 4 colonnes au lieu de 8, il suffira de modifier tout ou partie du nom de la classe utilisée (le «4» de col_4 par «8», par exemple) sans être obligé d’intervenir sur la feuille de style ou d’en charger une autre à la volée.

Frameworks PHP, Javascript et pourquoi pas CSS ?

Les critiques concernant les frameworks CSS sont souvent les mêmes que celles qui ont été faites contre les frameworks PHP ou Javascript avant que leur utilisation se généralise. Pour illustrer mon propos, voici un extrait de l’intervention de Didier Galland sur WebDevFr à propos de l’industrialisation de l’intégration web :

On a tenu exactement le même discours à propos de PHP, puis à propos de javascript. Les frameworks dans ces deux domaines ont largement prouvé qu’ils permettaient des améliorations. Je ne vois pas pourquoi l’intégration (css/html + javascript) ne pourrait pas bénéficier des mêmes améliorations. On a le droit d’utiliser son framework personnel dans son coin, mais pour le bien de mon agence, je ne peux pas bloquer mes futures évolutions (en personne ou en techniques) à cause de cette attitude, j’aurais donc forcément tendance à privilégier un professionnel au courant de ces techniques dans mes recrutements ou mes contracteurs freelances.

Aller au bout de la logique du reset CSS

Tout le monde connait le reset CSS d’Eric Meyer que l’on trouve dans de nombreux framework. Quand on y réfléchit cinq minutes, la suite logique de ce reset, c’est le frameworks. Il faut bien voir que la plupart d’entre eux ne sont pas spécialement très lourds et quand on fait le compte des déclarations redondantes qui se trouvent dans une feuille de style un peu touffue (parce qu’évidement, si votre projet tient en 20 lignes de CSS, c’est peut-être pas la peine de se poser la question), on se rend compte que les frameworks ne sont pas si gourmands.

Remplacer les styles par défaut des navigateurs

J’ai toujours trouvé que les styles par défaut appliqués par les navigateurs manquait d’originalité et de peps. Il suffit de mettre un soupçon de Boilerplate ou de Typogridfy pour que de très banal, la mise en page par défaut prenne un coup de jeune et de modernité !

Comment déterminer le «pas de la grille»

Un argument récurrent qui va à l’encontre de l’utilisation des grilles concerne la partie conception graphique. Les grilles entraveraient la créativité. Pourquoi pas. Mais je mets au défi quiconque de proposer un design de site web qui ne rentrerait pas dans une grille. Une grille n’est pas forcément synonyme de 12, 16 ou 24 colonnes. Il peut s’agir de 2, 4, 6 ou 8 colonnes et pourquoi pas d’un nombre impair de colonnes comme 1 colonne (un peu le degré zéro de la grille, mais bon…), 3 ou 5 colonnes pour bénéficier d’une asymétrie créative ? Tout est possible.

Pour aller au plus simple, si l’on veut un site avec un bloc de contenu et une barre latérale, on pourra diviser la page en 3 parties pour obtenir les ratios 2/3 pour le contenu principal et 1/3 pour la sidebar ou en 4 parties, soit 3/4 pour le contenu principal et 1/4 pour la barre latérale. On pourra se baser sur les proportions 1/3 ou 1/4 pour la largeur des images accompagnant les textes.

Ensuite, rien n’empêche de diviser chaque colonne en plusieurs parties pour granulariser l’information selon les besoins : affichage de miniatures, etc. Celà permet d’obtenir une mise en page très simple tout en bénéficiant d’une système de grille souple et efficace.

Quelques liens à propos des frameworks et des reset CSS

• 24 frameworks CSS — Mettez une grille (ou pas) dans votre site web
• Frameworks CSS + Reset CSS : design from scratch
• Quelques notes sur les grilles de mise en page
• Grid Design — Quelques notes sur l’intérêt des grilles de mise en page
• Framework CSS sémantique ? Comment je vois les choses
• Framework CSS — mettez vos grilles au pas !
• Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web
• Styles CSS par défaut : après Reset Reloaded, Eric Meyer fait encore risette avec Resetting Again
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs

Pas de conclusion hâtive !

Je pense que j’aurais l’occasion de revenir sur ces questions (oui encore) notamment sur la partie grille et créativité qui semble passionner beaucoup de monde à juste titre. N’hésitez pas à partager vos expériences en la matière. A bientôt !

Pour assurer une compatibilité maximum, il faut utiliser plein de déclarations CSS redondantes et c’est fastidieux. Heureusement, jacob bijani (Directeur de la création de Tumblr et à l’origine de start.io) a développé un générateur de coins arrondis qui s’appelle… border-radius.com ;)

Des coins arrondis différents à chaque angle

Il est possible de spécifier les coins arrondis pour Webkit, Gecko et CSS3 en cochant les cases appropriées

Un générateur de coins arrondis en CSS3

Exemple de coins arrondis en haut mais pas en bas

.roundies-top {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -webkit-border-top-left-radius: 5px; /* pour Chrome /
    -webkit-border-top-right-radius: 5px; / pour Chrome */
    border-radius: 5px 5px 0 0;
}

Google Chrome n’accepte pas les raccourcis : il faut ajouter explicitement chaque coins arrondis.

Exemple de coins arrondis identiques

Le générateur n’utilise pas la syntaxe raccourcie qui permet de gagner quelques lignes. Pour avoir des coins arrondis identiques pour les 4 angles avec une écriture plus concise on peut utiliser :

.rounded-all {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Pour terminer

Je vous conseille la lecture de Créer des coins arrondis en CSS et sans images pour plus d’informations, notamment en ce qui concerne Internet Explorer avec du Javascript et du composant .htc en veux-tu en voilà !

La fonction wp_list_bookmarks()

La fonction wp_list_bookmarks() possède plusieurs arguments intéressants dont l’identifiant de la catégorie à afficher category=386 et before et after qui permettent de spécifier les balises HTML que vous voulez avant et après chaque élément de liste. Par défaut, il s’agit de la balise li. Toutefois, pour une bonne gestion des coins arrondis, j’ai ajouté une balise p (oui, un p dans le li, ça manque d’élégance… ), ce qui oblige à préciser explicitement les balises li.

<div id="featured-posts" class="wrapper">
    <ul>
        <?php echo wp_list_bookmarks('title_li=&categorize=0&category=386&before=<li><p>&after=</p></li>'); ?>
    </ul>
</div>

Une pincée de CSS3 pour épicer le menu

#featured-posts ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#featured-posts li {
    float: left;
    width: 102px;
    margin-right: 18px;
}
#featured-posts li:hover {
    background: #2F0615;
    color: #fff;
/*
* Coins arrondis
/
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 0 5px 0;
    border-radius: 5px 0 5px 0;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 5px;
/
* Ombres portées
*/
    -webkit-box-shadow: #aaa 3px 3px 3px;
    -moz-box-shadow: #aaa 3px 3px 3px;
    box-shadow: #aaa 3px 3px 3px;
}

Note : si vous aviez déjà utilisé le Widget Liens dans votre barre latérale, cette catégorie est affichée deux fois. Pour la supprimer de votre blogroll faites glisser le Widget Liens, sélectionnez la catégorie dans le menu déroulant et répétez l’opération autant de fois que nécessaire.

Pour finir

Oui,  toutes ces opérations sont un peu fastidieuses, mais je n’ai pas encore trouvé mieux à part attendre la sortie prochaine de Wordpress 3.0. D’ailleurs, à ce propos, je vous propose de lire l’article Les menus, l’intégration de MU, et une course aux correctifs ! de Xavier Borderie sur Wordpress Francophone qui parle notamment de l’intégration prochaine d’une fonctionnalités permettant de faire des menus en veux-tu en voilà !

52Framework

Ce framework est résoluement tourné vers l’avenir en utilisant HTML5 avec header, nav, section, article, footer et CSS3 avec le sélecteur ::selection, les coins arrondis, les ombres portées pour le texte ou les blocs. La grille est composée de 16 colonnes de 52 pixels chacune séparées par une gouttière de 8 pixels. Les fichiers CSS de 52Framework vont à l’essentiel et si je préfère le système de grille de Blueprint, ça vaut le coup de de s’inspirer de reset.css (avec les nouvelles balises HTML5) et de general.css pour avoir des éléments de formulaires avec des coins arrondis et des ombres portées.

Element CSS Framework

Ce framework propose un environement global pour créer un site web avec un ensemble de dossiers prêts à être remplis : /clientFiles, /concepts, /copy, /js,  etc. et d’autres contenant les éléments de base du framework comme /css (qui contient les fichiers du framework proprement dit) et /elementsImages qui contient les icônes qui accompagnent externalLinks.css. Ces deux derniers éléments faisant tout le charme de ce framework en fournissant des classes CSS et des icônes pour représenter les liens externes.

Baseline CSS

Aligner des lignes comportant des textes de tailless différentes n’est pas toujours facile et c’est l’objectif de ce framework moderne (oui, ça veut dire qu’il y a un soupçon de HTML5et de CSS3 dedans). Notez que la compatibilité avec IE6 n’est pas garantie. Au menu : un reset CSS avec certaines des nouvelles balises HTML5 (mais curieusement avec des balises HTML dépréciées également), un système de grille, des styles de formulaires et un peu de  typographie pour terminer.

960.gs

Ce système de grille est conçu pour fluidifier votre chaine de production avec des dimensions communément utilisées à partir d’une largeur de 960 pixels. Existe en deux parfums : 12, 16 ou 24 colonnes. Des classes comme push_XX ou pull_XX permettent de réarranger les blocs indépendamment de leur ordre d’apparition dans le code HTML. Un générateur de grille personnalisée permet de spécifier la largeur et le nombre des colonnes et la taille de la gouttière. Il existe même un générateur de blocs permettant de définir votre mise en page .

tripoli

Redéfinit une feuille de style par défaut pour les balises HTML de manière à assurer un rendu identique sur les navigateurs présents sur le marché. Propose de nombreux fichiers additionnels comme layout.css pour la grille ou negative.css pour inverses les contrastes, etc.

yaml

Yet Another Multicolumn Layout est un framework (x)html/css pour la création de maquettes robustes et flexibles centré sur la légèreté et l’accessibilité. Propose un générateur WYSIWYG YAML Builder pour construire votre mise en page.

bluetrip

Le meilleur de Blueprint et de Tripoli avec un zeste de Hartija pour la feuille de style à l’impression, la simplicité de 960 Grid System. Le fichier screen.css regroupe le reset CSS d’Eric Meyer, le système de grille, la gestion des liens externes (icône selon l’extension ou la destination) et de l’inversion des contraste, plus des styles pratiques pour la gestion des textes.

typogridphy

Basé sur 960 Grid System, ce framework permet de créer des grilles flexibles d’une grande beauté typographique.

yui grids

Offre un jeu prédéfinit de largeur de page comprenant six templates avec la possibilité de subdiviser les blocs. Au total c’est plus de 1 000 combinaisons de maquettes pour seulement 4kb.

elasticss

Basé sur des techniques de colonnage traditionnel en 4 colonnes, ce framework permet de multiples combinaisons et subdivisions. Il se distingue des autres par sa capacité à produire facilement des design fixes, liquides ou élastiques.

sencss

Un frameword zen qui ne vous obligera pas à adopter un système de grille particulier mais qui fournit plutôt un ensemble de styles pour les parties les plus répétitives de votre travail sans trop s’éloigner du style par défaut des navigateurs. Grille verticale en 18 pixels. Fournit des jeux de polices de caractères spécifiques pour Windows, Mac et Linux.

the golden grid

Ce système de grille est le fruit d’une recherche constante de la grille parfaite : rien de tel que le nombre d’Or pour se rapprocher des dieux !

css-boilerplate

Par l’un des créateurs de Blueprint qui a décidé de se remettre à l’ouvrage pour aboutir à un framework qui ne vous obligera plus à choisir entre sémantique et efficacité : c’est vous qui décidez d’utiliser float: left; width: 240px; margin-right: 110px ou class="column span-2 append-1" !

BIC

De bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). Cf. BIC, un framework orienté couleur et typographie.

bungee

Propose une grille de 12 colonnes dont la plus petite subdivision vaut 4em. Pour les nostalgiques des pixels, ça fait environ 64px. Avec un niveau de zoom par défaut, un site construit avec Bungee mesure 768px de large, et s’affiche donc parfaitement sur un écran de faible résolution.w

sparkl

Combine un marquage HTML CHIC (Code HTML Intrinsèquement Classe — POSH en anglais) et du javascript non-intrusif pour créer des sites web à l’épreuve des balles et conformes aux Standards. Ce framework CSS très modulaire vous permettra de vous concentrer sur vos besoins.

hartija

Regroupe les meilleures pratiques en matière de feuille de style destinées à l’impression.

The 1Kb CSS Grid

Une grille minimaliste qui tient en une quinzaine de déclarations CSS idéale pour les débutant qui veulent comprendre le principe général des frameworks et pour les intégrateurs aguerris qui verront là un moyen économique de donner un rythme horizontal à leur mise en page. Choix du nombre de colonnes, de la gouttière et de la largeur totale avant le téléchargement.

1 line CSS Grid Framework

Vous avez bien lu, il s’agit d’un framework qui tient en une seule déclaration .dp50 {width:50%; float:left; display: inline; *margin-right:-1px; } Etonnant, non ?

emastic

Très complète, cette bibliothèque CSS s’utilise aussi bien avec des em qu’avec des % et s’accommode de largeur fixes ou fluides pour un poids de 4Kb pour la version compressée. Nombreuses démonstrations disponibles pour voir ce qu’il est possible de faire.

malo

Petit frère de emastic, malo se distingue par sa légèreté au service d’une grille en pourcentage.

logicss

basé sur le principe d’un rendu homogène entre les navigateurs sans reset CSS. Travail sur la typographie avec des jeux de polices de caractères harmonieux, des possibilités de redimensionnements de texte et un rythme vertical. Trois systèmes de grilles très souples personnalisables à l’aide d’une boite à outils. Design élastique avec l’unité em, liquide via les pourcentages % ou fixe avec les px.

MyCSS Grid System

Système de grille en 960px avec une utilisation du nombre d’or pour obtenir des proportions harmonieuses. Assez verbeux dans le nombre de classes pour placer des éléments.

A CSS Framework

Cet ensemble de fichiers CSS propose des maquettes prêtes à l’emploi en 1, 2 ou 3 colonnes avec un header, footer, sidebar et navigation horizontale ou verticale. Un fichier framework.html est disponible pour commencer.

Conclusion

Avec le temps, j’ai tendance à me passer du « tout framework » en production : ils sont très pratiques lors de la phase de prototypage, mais il faut savoir s’en passer quand le site web est calé. Je prends le temps de supprimer les classes requises par le framework pour les remplacer par les déclarations CSS adéquates :

#content {
    width: 160px;
    float: left;
    margin-right: 18px;
}

au lieu de :

<div id="content" class="span-2"></div>

PS : Cette liste est une version réactualisée de celle que j’ai déjà publiée en juin 2009 à la fin de l’article Frameworks CSS, mettez vos grilles au pas !. Toute ressemblance avec des listes de frameworks CSS publiées ces derniers temps, bla bla bla…

Référence

a:
    &:hover:
      color: red
    &:visited:
      color: blue

Attributs

#main p:
    font->
      family: Verdana, sans-serif
      size: 1.1em
      style: italic

Constantes

background_color = #ccc


#main:
  background-color: $background_color

Calcul sur les valeurs

#fff - #ccc            -> #333333
cornflowerblue - coral   -> #00169d
crimson - 20             -> #c80028
10px * 2                 -> 20px

Faudrait pas que le python étouffe l’éléphant ;)

cleverCSS est très séduisant et la seule chose que l’on peut lui reprocher est d’être un script Python et non PHP !

Notes : il existe des scripts dans d’autres langages comme Ruby ou PHP :

• CSS Cacheer (PHP)
• LESS (Ruby)
• ALAMANO ;) (PHP)

Rappels sur les CSS à l’impression

C’est la valeur print de l’attribut media de la balise link qui déclenche l’application des styles lorsque l’utilisateur lance l’impression d’une page. Cette feuille de style est appellée de la manière suivante :

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Les 10 astuces

1. Supprimer la navigation

#nav, #sidebar {
    display: none;
}

2. Augmenter la largeur du texte à lire

#content {
    width: 100%;
    margin: 0;
    float: none;
}

3. Remettre les backgrounds aux valeurs par défaut

body {
    background: white;
}
#content {
    background: transparent;
}

4. Remettre la couleur des textes par défaut

#author {
    color: #111;
}

5. Afficher la destination des liens

a:link:after {
    content: " (" attr(href) ") ";
}

6. Faites ressortir des liens présents dans le texte

a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #06c;
}

7. Utiliser des tailles de polices cohérentes avec une imprimante

p {
    font-size: 12pt;
}

8. Modifier les polices de caractère

body {
    font-family: Georgia, 'Times New Roman', serif;
}

9. Penser à gérer l’affichage des commentaires s’ils sont nombreux

#comments {
    page-break-before: always;
}

10. Afficher un message à l’impression uniquement

#printMsg {
    display: block;
}

D’après l’article 10 Tips for Better Print Style Sheets de Pieter Beulque paru sur Webdesigner Depot qui contient de nombreuses explications et des exemples visuels « avant après » l’application d’une CSS destinée à l’impression.

• The weird and wonderful world of Internet Explorer
• How To Attack An Internet Explorer (Win) Display Bug
• The IE/Win Disappearing List-Background Bug
• IE6 Duplicate Characters Bug
• How to resolve browser compatibility issues while working with JavaScript, AJAX and XML
• Double-Margin Bug, Float-Width Bug, Pixel Gap Bug
• CSS Min-Height Bug
• IE White-Space Bug
• Cross Browser Compatible CSS Opacity
• Clearing floated images in body text
• Firefox CSS Magic

L’arrivée des frameworks CSS a popularisé le placement des blocs en se basant sur une grille et le monde du webdesign découvre peu à peu que le design graphique est une pratique plusieurs fois millénaire qui a forgé ses propres règles pour faire en sorte que le contenu devienne message grâce au contenant (la forme au service du fond et vice-versa).

Si les grilles s’imposent rapidement c’est qu’on les trouve dans les meilleures productions graphiques (sur le web ou ailleurs). Leur absence n’est pas synonyme de travail de moindre qualité (loin de là), mais il est indéniable qu’elles permettent de donner un aspect professionnel à un design banal.

Ces grilles sont une habitude pour celles et ceux qui viennent du monde de l’imprimé où des logiciels comme XPress ou InDesign encouragent la mise en place de gabarits à partir de marges, de colonnes et de gouttières. C’est d’ailleurs une pratique courante dans les logiciels professionnels de permettre le réglage des paramètres initiaux dès la création d’un nouveau document.

Or, sur les web, les professionnels ont tendance à se servir d’éditeurs plus ou moins sophistiqués pour saisir le code des différents langages nécessaires pour l’intégration d’une charte graphique. Un logiciel comme Dreamweaver peut passer pour un logiciel professionnel pour la création de site web, mais le code produit en mode Création ne m’a pas encore convaincu.

Cette idée de réglages initiaux à la création d’un nouveau document m’a fait penser aux options proposées par la petite application Boks qui permet en quelques clics de générer l’ensemble des fichiers du framework CSS Blueprint après avoir déterminé la largeur de l’empagement et de la gouttière ainsi que le nombre de colonnes.

Le seul problème de Boks c’est qu’il ne propose rien d’autre que Blueprint que je trouve assez verbeux. Je préfère par exemple un framework comme Boilerplate qui n’impose pas de système de grille et qui est plus léger.

Pour tout savoir ou presque sur les grilles de mise en page, voici l’excellent The Grid System qui propose des tonnes de ressources sur le sujet : sélection d’articles, outils, livres, modèles de grilles, etc. Profitez-en pour afficher la grille du site et admirer comment l’auteur la faire vivre en fonction des rubriques.

Voici le code à ajouter dans votre template Wordpress si vous voulez afficher ou masquer la grille en production. Si vous travaillez en local (ou si vous n’utilisez pas Wordpress), supprimez le code PHP :

<?php if ( is_user_logged_in() ) : ?>
    <a id="displayGrid" href="#displayGrid">Afficher/masquer la grille</a>
<?php endif; ?>

// Affichage de la grille si connecte
$("#displayGrid").click(function() {
    $("html").toggleClass("display-grid");
});

.display-grid #container {
    background: url(pix/grid.png);
}

#displayGrid {
    position: fixed;
}

Mise en page alternative

Avec un peu d’astuce et d’espièglerie vous trouverez rapidement de nombreuses applications à cette astuce. Je pense notamment à la possibilité de proposer une mise en page CSS alternative aux visiteurs.

L’interface de Boks

Fenêtre principale de Boks pour placer les blocs de votre design après avoir déterminé votre grille de mise en page.

Paramétrez finement votre grille

Exporter les fichiers CSS et HTML

Lors de l’export, les fichiers CSS sont compatibles avec Blueprint en version 0.9.1 mais rien ne vous empêche de vous en servir de la grille ainsi générée pour d’autres frameworks, voire juste pour avoir les width et autres margin-left, etc. dont vous avez besoin, comme je l’ai fait ici pour la mise en place de mon nouveau thème Wordpress !

Il est possible d’obtenir les fichiers CSS screen.css, print.css et ie.css ou de les rassembler automatiquement dans un seul fichier pour optimiser le nombre de requêtes HTTP