Ce petit coin de blog est le cadre idéal pour vous présenter quelques outils en ligne qui vous permettront de réduire le temps passé à réaliser l’intégration de vos sites web : éditeurs visuels, générateurs de colonnes, conversion des pixels en unité relative em, etc. Pas vraiment nouveaux, ils méritent quand même le détour ! 

• Construct Your CSS — Editeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya pour mettre à la disposition des intégrateurs Web une boite à outils pour faire des CSS et du HTML sémantique.
• pagecolumn — Générateur de maquettes en plusieurs colonnes avec CSS 2.0 en utilisant les `%`, les `px` ou les `em`. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets.
• drawter — Générateur de code HTML et CSS en ligne. Lire Avec drawter, dessiné, c’est gagné.
• CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !
• JotForm — Création de formulaires en ligne.
• Em Calculator — Convertit vos pixels en `em` pour faciliter la mise en place de designs CSS fluides.
• CSS Compressor — Compressez vos feuilles de style CSS. Nombreuses options disponibles.

Blueprint et 960 Grid System sont deux frameworks CSS que j’ai utilisés parmi les 25 que j’ai recensés et survolés dans Choisir un framework CSS. J’ai ainsi pu me faire une idée plus précise de leurs qualités respectives. Je ne me suis pas attardé sur les aspects typographiques — même s’ils ont leur importance : j’ai préféré faire l’analyse du système de grille de mise en page (grid.css et 960.css). Pourquoi comparer ces deux frameworks ? Tout simplement parce qu’ils proposent pratiquement les mêmes «fonctionnalités» avec quelques différences dans la mise en oeuvre. Après une rapide introduction sur Blueprint et 960 Grid System, vous trouverez dans la suite de cet article une comparaison et une explication de code.

Introduction

Les frameworks CSS ont été conçus pour accélérer le processus de prototypage d’un site web tout en étant utilisables en production. Ils proposent généralement plusieurs fichiers dédiés à une tâche spécifique : reset CSS, gestion de la typographie, système de grille, etc. Les exemples de code proposés dans cet article ont été parfois remaniés par rapport aux originaux pour garder une certaine lisibilité.

Blueprint — Raccourcir les temps de développement

Créé par Joshua Clayton, Blueprint est le plus connu. Il possède l’éco-système le plus riche : tutoriaux, implémentation dans des thèmes WordPress ou Drupal, générateurs de grilles, etc. Il propose en outre une gestion complète des éléments HTML (notamment les formulaires). A côté du fichier grid.css nous trouvons : reset.css, typography.css, ie.css et forms.css, ainsi que :

• Des «utilitaires» comme la mise en place de bordures entre les colonnes,
• Des plugins permettent d’affiner la gestion des boutons, de la typographie, des icônes de liens, ou encore de modifier le sens de lecture pour les langues qui s’écrivent de droite à gauche,
• Un modèle de page (template) au format .psd est disponible pour faciliter la mise en place des maquettes,
• Blueprint est disponible sur Github.

960 Grid System (ou 960.gs) — Fluidifier le flux de production

Créé par Nathan Smith, 960 Grid System propose également un reset.css, une gestion minimale (mais suffisante pour commencer) de la typographie avec text.css et le système de grille avec 960.css ou 960_24_col.css. Il n’y a pas de fichier ie.css.

Même si l’éco-système est un peu moins riche que Blueprint, il propose l’essentiel :

• Fichiers de démonstration,
• Le générateur de grille offre le choix entre un design liquide ou fixe (pourcentage ou fixe),
• Fichier PDF à imprimer pour dessiner des maquettes,
• Nombreux modèles de page pour Expression Engine, Fireworks, Flash, Illustrator, Indesign, Inskape, Omnigraffle, Photoshop et Visio,
• 960 Grid System est disponible sur Github.

Chacun des deux frameworks existe en plusieurs largeurs (950px, 960px) avec un nombre de colonnes allant de 12, 16 ou 24. Toutefois, les nombreux générateurs de grilles vous permettront de déterminer : largeur, nombre de colonnes et gouttière adaptés à vos besoins.

Fonctionnalités principales des frameworks CSS

Largeur et centrage du site web

Les deux frameworks proposent la même chose :

.container { width: 942px; margin: 0 auto; } // Blueprint

.container_16 { margin-left: auto; margin-right: auto;     width: 960px; } // 960.gs

En ce qui concerne le nombre de colonnes et la largeur des gouttières, je trouve Blueprint un peu radin avec ses 10px là où 960 Grid System offre généreusement le double, soit 20px d’espace entre les colonnes.

Le seul endroit où les 10px de gouttière sont intéressants, c’est dans la version en 24 colonnes, ce qui permet d’utiliser une colonne entière (30px) pour séparer des groupes de colonnes à certains endroits et garder l’espacement de 10px pour rapprocher des contenus possédant un corps de texte plus petit et/ou répartis sur un plus faible nombre de colonnes.

Dans les exemples qui suivent, j’ai utilisé la grille que j’ai conçu lors du redesign de ce blog : 16 colonnes de 42px séparées par une gouttière de 18px pour une largeur totale de 942px.

Créer des colonnes et des gouttières

La création des colonnes pour le placement des contenus est l’élément fondamental d’un système de grille. Blueprint et 960 Grid System procèdent de manières différentes :

Blueprint

.column, .span-1, .span-2, etc. {
    float: left;
    margin-right: 18px;
}
.span-1 { width: 42px; }
.last { margin-right: 0; }

960 Grid System

.grid_1,.grid_2, etc. {
    display:inline;
    float: left;
    position: relative;
    margin-left: 9px;
    margin-right: 9px;
}
.container_16 .grid_1 { width:42px; }
.alpha { margin-left: 0; }
.omega { margin-right: 0; }

.last but not .least

Dans le cas de Blueprint, il faut ajouter une classe pour le dernier bloc afin d’annuler la marge de 18px avec .last { margin-right: 0; }. Quant à 960.gs, ce n’est pas la peine puisque les marges sont réparties de chaque côté. Là où ça se corse, c’est quand on a besoin d’imbriquer des colonnes.

Chez Blueprint, seule la classe .last est nécessaire pour chaque dernier bloc, tandis que 960.gs nécessite deux classes pour annuler les deux moitiés de marges : .alpha { margin-left: 0; } et .omega { margin-right: 0; }. Ca va sans dire mais mieux en le disant : on a pratiquement toujours besoin d’imbriquer des colonnes à un moment ou un autre.

.column ?

Cette classe peut servir à placer des blocs sans être obligé de leur donner une largeur. J’avoue m’en servir assez peu.

display: inline et position: relative ?

960 Grid System ajoute deux propriétés. La première (display: inline) sert à circonvenir un bug d’IE6 qui à tendance à doubler les marges lorsque des éléments flottent du même côté qu’un margin. position:  relative sert à positionner les blocs indépendamment de leur position dans le code HTML (voir plus bas).

Créer des colonnes vides avant et/ou après le contenu

Dans une maquette web, toutes les positions ne sont pas occupées par du contenu et il est bon que le site respire. Pour cela on pourra aérer toutes ces colonnes en créant du vide avant ou après. C’est là qu’interviennent les classes .prefix_1 et suffix_1 de 960.gs ou .prepend-1 et append-1 de Blueprint. Les deux frameworks ont opté pour un padding-left pour les premiers et un padding-right pour les seconds pour « remplir » les blancs afin de conserver une largeur égale à la largeur de votre .container.

Positionner des blocs à l’écran indépendamment de leur position dans le code

La position des éléments dans le code est souvent tributaire de la manière dont on veut les afficher à l’écran. Si vous désirez modifier la position de votre sidebar par rapport au contenu sans modifier l’ordre des blocs dans votre code HTML, il suffira d’utiliser les classes suivantes :

960 Grid System

.container_16 .push_1 { left:60px; }
.container_16 .pull_1 { left:-60px; }

Blueprint

.push-1 { margin: 0 -60px 1.5em 60px; }
.push-1, .push-2, etc. { float: right; position: relative; }
.pull-1 { margin-left: -60px; }
.pull-1, .pull-1, etc. { float: left; position: relative; }

Rétablir le flux HTML après l’utilisation des flottants

Pour rétablir votre flux HTML après les float: left, il existe plusieurs techniques dont j’ai déjà longuement parler dans les articles Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire et Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?

Les deux frameworks proposent un jeu de classes CSS qui devrait vous permettre de voir venir. Pour info, voici la technique utilisée par 960.gs :

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}
/ The following zoom:1 rule is specifically for IE6 + IE7.
Move to separate stylesheet if invalid CSS is a problem./
* html .clearfix,
*:first-child+html .clearfix {
    zoom: 1;
}

.clear { clear:both; }

Conclusion

Il y a de bonnes idées dans les deux frameworks. Je ne suis pas fan de la gestion des marges de part et d’autre des colonnes de 960.gs : je préfére la simplicité de Blueprint. En revanche, je préfère les classes .push et .pull de 960 Grid System qui sont bien plus concises que celles de Blueprint. Pour finir, je trouve que le .clear de 960 Grid System mérite d’être renommé en .clear-hide pour pouvoir ajouter un clear: both simple mais toujours très pratique. Bref, il faut composer son propre framework CSS en piochant les bonnes idées à droite et à gauche.. Stay tuned!

Autres notes sur les frameworks CSS et le design par grille de mise en page

Framework CSS — Sémantique, maquette dynamique et autres notes

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. [...]

Quelques notes sur les grilles de mise en page

A mesure que les techniques des langages du web l’ont permis, des designers web talentueux ont travaillé à l’élaboration d’environnement de travail permettant de mettre en place des systèmes de grille adaptés aux contraintes de la création de pages web. Contrairement à l’imprimé où le langage de description de pagePostscript d’Abode est un standard, il n’existe pas sur le web de dispositif « officiel » pour créer des colonnes à l’épreuve des différences de rendu entre les agents utilisateurs (les navigateurs). [...]

Grid Design — Quelques notes sur l’intérêt des grilles de mise en page

La popularité des frameworks CSS s’accompagne d’une interrogation légitime sur le bien-fondé d’utiliser une grille pour le placement des éléments du design. Comme je l’ai déjà évoqué dansFramework CSS — mettez vos grilles au pas ! je m’interroge sur l’intérêt de travailler sans grille et je soupçonne leurs détracteurs de jeter le bébé avec l’eau du bain. Le problème vient sans doute du terme grille lui-même. Peu gratifiant, il évoque la prison, la clôture, la répétition, l’uniformité… Bref, tout le contraire des aspirations du créatif qui refuse de brider sa créativité sur l’autel d’une vision mécaniste du processus créatif [...]

Boks — Éditeur visuel de grilles CSS pour Blueprint, etc.

Boks est un éditeur de grille CSS développé avec Air (utilisable sur Windows, Mac et Linux) qui fournit une interface visuelle pour travailler avec le framework CSS Blueprint. Les frameworks sont souvent très utiles mais le paramétrage d’un pas de grille personnalisé peut s’avérer fastidieux. Outre la configuration du nombre de colonnes, de la largeur de la page et de la valeur de la gouttière,Boks permet de configurer la grille verticale en déterminant les valeurs des principales balises HTML [...]

Framework CSS sémantique ? Comment je vois les choses

Je reviens vers vous sur la question des frameworks CSS suite à la lecture de A Reflexion About Semantic Grids qui défend grosso modo le point de vue selon lequel les frameworks ne sont pas sémantiques et incitent à marcher sur la tête en bousculant le flux de production web. [...]

24 frameworks CSS — Mettez une grille (ou pas) dans votre site web

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint. [...]

BIC, framework CSS orienté couleur et typographie

BIC est un meta framework CSS basé d’une part sur le reset CSS d’Eric Meyer pour la remise aux valeurs par défaut des éléments HTML (clean.css) et le framework 960.gs pour la partie grille de mise en page (layout.css), et d’autre part sur de bonnes idées en ce qui concerne le traitement de la typographie et de la couleur (typography.css et color.css). [...]

Nombre d’or, suite de Fibonacci et autres grilles de mise en page pour le design web

Dans la série des thèmes WordPress minimalistes voilà The Ideal Website 1.1proposé par Information Architect (iA). L’équilibre graphique de ce thème provient essentiellement de l’application de la suite de Fibonacci — qui fournit des rapports très proches du nombre d’or — aux différentes proportions des éléments du design. Le résultat est ce que j’ai vu de mieux en matière de mise en page pour un blog. [...]

Frameworks CSS + Reset CSS : design from scratch

L’article fait ainsi le point sur la notion de framework CSS, ses avantages et ses inconvénients, décrit les frameworks les plus populaires et termine par une série de liens commentés à propos des Reset CSS et des styles de base. [...]

Framework CSS — mettez vos grilles au pas !

Grosso modo, tout le monde reconnait que oui, les frameworks c’est de la balle mais que non, ça n’est pas toujours possible car les éléments du design, du .psd, de la charte graphique, etc. n’entrent pas forcément dans une grille horizontale. [...]

CSS3, Please! – Une belle page éditable avec l’essentiel des propriétés CSS3 : border-radius, box-shadow, Gradient, RGBa(), Transition, @font-face, etc. avec les filtres Microsoft pour IE6/7 et IE8 qui vont bien (ou mal). Un bloc de contenu reflète automatiquement les changements apportés aux déclarations avec la possibilité de désactiver les effets les uns après les autres pour mieux les percevoir. CSS3, Please! est certainement l’un des meilleurs générateurs de CSS3 disponibles.

Toutes les valeurs soulignées sont éditables. Les valeurs saisies sont répercutées pour les autres navigateurs

CSS3, Please! Cliquez pour agrandir l'image.

Toute la page est prête à être copiée-collée dans votre feuille de style.

Bravo aux concepteurs Paul Irish et Jonathan Neal en association avec Boaz Sender et Zoltan Hawryluk.

Même si tous les navigateurs ne prennent pas en charge les spécifications CSS3, il est intéressant de se pencher dessus, d’autant plus de que nombreux générateurs en ligne sont là pour adoucir la courbe d’apprentissage. Au menu : des générateurs de propriétés CSS3 comme border-radius, gradient, box-shadow, text-shadow, RGBa, @font-face, Multiple Columns, etc. ; des effets de texte  et une palanquée de ressources complémentaires.

Générateurs de CSS3

• CSS3 Gradient Generator — Faire un joli dégradé n’est pas si facile et la simplicité de l’outil ne pourra rien sans un minimum de goût. Maintenant que vous êtes prévenu, vous pouvez changer la direction de votre dégradés, les couleurs et le seuil pour déterminer la position et l’intensité de l’effet de fondu entre les deux couleurs. Dans le doute, il est possible de générer un dégradé aléatoire pour se faire une idées des possibilités,
• CSS3 Generator — Ce générateur de CSS3 interactif est idéal pour faire entrer votre site web dans la modernité : border-radius, box-shadow, text-shadow, RGBa, @font-face, Multiple Columns, box-resize, box-sizing, outline,
• Border Radius — Générateur de coins arrondis,
• css3please — Une générateur de CSS3 cross-browser,
• CSS3 Sandbox — des outils à la pointe de la technologie, parce que vous le valez bien ! (CSS3n HTML5),
• Font-Face Kit Generator,
• Border Image Generator,
• Cross Browser CSS3 Rule Generator.

Miscellanées

• IE-CSS3 — Ce composant .htc vous permettra d’utiliser certaines propriétés CSS3 dans Internet Explorer 6, 7 et 8, comme border-radius, box-shadow et text-shadow : behavior: url(ie-css3.htc);
• @font-face Browser Support — Le point sur la prise ne charge de la propriété `@font-face` qui permet d’embarquer n’importe quelle police de caractère dans votre page web. Via Simple Entrepreneur.
• 15 CSS3 navigation and menu — 15 tutoriels et techniques pour faire des menus de navigation en CSS3 via creamama.
• Drop Shadow — des ombres portées sans images, sans CSS3. Cette technique utilise pratiquement autant de balises div imbriquées que les techniques utilisant des images de fond.
• 350 CSS3 Resources — 350 ressources à connaitre pour devenir un expert en CSS3. Via conseilsmkg.
• CSS3 les effets de texte — Effets de texte avec CSS3.
• Improve Your CSS Skills With Pure CSS UI Components — Pourquoi utiliser Javascript alors que CSS se débrouille comme un grand !
• 35 Essential Submit Button Enhancements — 35 possibilités d’amélioration pour les boutons Submit.
• Internet et le droit d’auteur —  Le dossier porte sur l’actualité des droits d’auteur et ses applications sur internet. Il a été réalisé à l’occasion d’une séance de formation qui s’est tenue au CDDP le 28 janvier 2009. Via Lettres Tice.
• CSS Tools Generators Automate Workflow — Automatiser votre flux de production avec des outils en ligne pour gérer vos CSS.
• html5test — Faites le test pour savoir dans quelle mesure votre navigateur prend en charge les spécifications HTML 5 !

Pour la route

• Le petit journal du web #1
• Le petit journal du web #2

Les hacks CSS sont une utilisation peu conventionnelle des sélecteurs CSS pour s’adresser à un ou plusieurs navigateurs quand on doit servir une propriété ou une valeur CSS spécifique à un ou plusieurs navigateurs. Si IE6 fait la fine bouche devant sa soupe de balises, il peut être intéressant de lui servir le même plat mais dans une assiette différente (la comparaison est bancale). Ces hacks s’utilisent souvent pour cibler des versions spécifiques d’Internet Explorer (généralement IE6 et IE7). Toutefois, il en existe pour Firefox, Opéra, Safari, iPhone, etc. Par ailleurs, je n’utilise pas ces hacks CSS dans ma feuille de style principale, mais uniquement dans une CSS réservée à IE via les commentaires conditionnels.

Comment utiliser les hacks CSS ?

Dans l’article Un seul fichier CSS pour cibler IE6 et IE7 avec les commentaires conditionnels, j’utilisais un commentaire conditionnel pour cibler les versions inférieures ou égales à IE7. Toutefois, IE9 est sur les rails et il est temps de le prendre en compte, d’autant plus que Microsoft veut en faire un champion des standards du web en terme de rendu CSS3 et HTML5.

L’idée derrière la feuille de style unique pour IE est de ne pas augmenter inutilement le nombre de requêtes pour charger une CSS pour chaque version d’Internet Explorer. En attendant de voir ce que nous réserve IE9, j’ai décidé de cibler les versions inférieures ou égales à IE8 en espérant que IE9 tienne ses promesses et en attendant de voir s’il va continuer à gérer les commentaires conditionnels (auquel cas nous pourrions cibler les version inférieures à IE9).

Cibler les versions <= à IE8

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

Note : il existe une forme de commentaires conditionnels qui permet de cibler tous les navigateurs sauf Internet Explorer : <!--[if !IE]> <!--> IE Windows ne lira pas ça <!--> <![endif]-->

Dans cette feuille de style ie.css, si IE6 (et seulement lui) ne se comporte pas comme prévu devant #header { margin-top: 0; }, il suffira d’y ajouter * html #header { margin-top: -5px; } pour régler le problème. Si le problème concerne IE6 et IE7 et que IE8 se comporte de manière standard (c’est à dire que la règle située dans style.css suffit), il faudra utiliser les hacks de la manière suivante :

* html #search .submit { margin-top: -10px; } // IE6
*+html #search .submit { margin-top: -14px; } // IE7

#search .submit { margin-top: -7px; }         //Toutes les versions d'IE
* html #search .submit { margin-top: -10px; } // Surcharge pour IE6 seulement
*+html #search .submit { margin-top: -14px; } // Surcharge pour IE7 seulement

Mettez vos frameworks CSS à jour

Les frameworks CSS proposent souvent une feuille de style spécifique à Internet Explorer. Le plus souvent, le hack utilisé pour cibler IE7 est de la forme html>body qui n’est pas pris en charge par IE6. Or, si l’on cible les versions <= à IE8, ce hack est obsolète puisqu’il est compris par IE8. Pour y remédier, j’utilise *+html qui n’est compris que par IE7.

Ainsi, dans le fichier ie.css de Blueprint, il sera nécessaire de modifier la ligne html>body p code { white-space: normal; } par +html p code { *white-space: normal; } pour éviter que IE8 ne s’emmêle les pinceaux ;)

22 hacks CSS à consommer avec modération

Cette liste de 22 contournements a été compilée par Paul Irish. Elle présente le double intérêt de la quasi-exhausitivité et de distinguer les hacks jouant sur les sélecteurs de ceux qui concernent les attributs.

Hacks sur les sélecteurs

1. IE6 et inférieurs

   * html .test  { color: red }

2. IE7

   *:first-child+html .test { color: red }

3. IE7, Firefox, Safari, Opera

   html>body .test { color: red }

4. IE8, Firefox, Safari, Opera (Tout sauf IE 6,7)

   html>/**/body .test { color: red }

5. Opera 9.27 et inférieurs, Safari 2

   html:first-child .test { color: red }

6. Safari 2 — 3

   html[xmlns*=""] body:last-child .test { color: red }

7. safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:nth-of-type(1) .test { color: red }

8. Safari 3+, Chrome 1+, Opera9+, Firefox 3.5+

   body:first-of-type .test { color: red }

9. Safaris 3+, Chrome1+

      @media screen and (-webkit-min-device-pixel-ratio:0) {
               .test  { color: red }
       }

10. iPhone / Webkit mobile

       @media screen and (max-device-width: 480px) {
                .test { color: red }
        }

11. Safari 2 — 3.1

    html[xmlns*=""]:root .test  { color: red }

12. Safari 2 — 3.1, Opera 9.25

    *|html[xmlns*=""] .test { color: red }

13. Tout sauf IE6 — 8

    :root *> .test { color: red  }

14. IE7

    *+html .test { color: red }

15. Uniquement Firefox. 1+

    .test,  x:-moz-any-link  { color: red }

16. Firefox 3.0+

    .test,  x:-moz-any-link, x:default  { color: red }

Hacks sur les attributs

1. IE6

   .test { _color: blue }

2. IE6, IE7

   .test { *color: blue /* or #color: blue */ }

3. Tout sauf IE6

   .test { color/**/: blue }

4. IE6, IE7, IE8

   .test { color: blue\9 }

5. IE7, IE8

   .test { color/*\**/: blue\9 }

6. IE6, IE7 — fonctionne comme !important

   .test { color: blue !ie } /* la chaine après ! peut être n'importe quoi */

Les frameworks CSS ont fait couler beaucoup de pixels : d’un côté, ils proposent une méthode à l’épreuve des balles pour placer les blocs sur sur la page en tenant compte des contraintes cross-browser ; de l’autre, ils ajoutent des classes CSS superflues dans le code HTML pour la présentation des contenus, ce qui n’est pas jugé «sémantique» par les farouches défenseurs d’une séparation entre le fond et la forme. Voilà en gros l’avantage principal et l’inconvénient majeur qu’on peut dégager si on met de côté le faux problème du poids de ces frameworks. Après avoir donné mon point de vue sur cette question de «sémantique» j’expliquerais comment l’ajout de classes liées à la présentation dans le HTML peut s’avérer très pratique à l’heure du web «sur-mesure».

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 !

La propriété CSS3 border-radius permet de faire des coins arrondis pour rendre nos pages web plus jolies à regarder. Tous les navigateurs ne prennent pas en charge la propriété CSS3 border-radius : les agents utilisateurs carburant au moteur de rendu Webkit (Chrome, Safari, iPhone, Android) utilisent -webkit-border-radius et ceux qui tournent sur Gecko (Firefox, Camino) utilisent -moz-border-radius. Quant à Internet Explorer, on peut garder l’espoir qu’avec IE9 ont verra un peu de lumière au bout du tunnel…

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à !

WordPress est un CMS formidable, ce qui ne l’empêche pas d’avoir des lacunes. L’une d’elle concerne la possibilité de construire des menus composés de liens vers des pages ou des articles publiés sur le blog, ce qui est courant avec des CMS comme Drupal ou Joomla. En général, je me contente de créer mon menu en HTML et ça fonctionne très bien. Toutefois, cette solution n’est pas toujours très évidente à maintenir. Voici la solution que j’ai retenue pour la mise en place des liens pointant vers les articles que je souhaitais mettre en avant sur ce blog.

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à !

Il existe de nombreuses raisons pour ne pas utiliser de frameworks CSS lors de la phase de conception ou d’intégration de votre site web : le poids, l’intrusion des classes CSS dans le code HTML qui devient la règle pour placer le moindre bloc de contenu, le fait que de nombreuses règles ne sont pas utilisées, etc. Pour ma part, j’aime bien tester les frameworks qui tombent à portée de souris, et je n’hésite pas à faire des expériences d’hybridation : rien de tel qu’un bout de reset CSS d’Eric Meyer avec la feuille de style de typogridphy, le tout mis en forme avec la robustesse de Blueprint.

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.

Frame

Frame: A CSS framework from the year 2050 se veut la nouvelle manière de mettre en page les contenus et de construire des interfaces web. Il combine les idées de 960.gs, de Blueprint et de nombreuses techniques pour obtenir le framework css le plus simple et le plus fluide de tous les temps !

Formee

Formee est un framework spécialisé dans la mise en forme des éléments de formulaires. Le système de grille pour l’alignement des labels et autres input est basé sur 960.gs. Ce mini-framework est composé de deux feuilles de style : form-style.css et form-structure.css qui parlent d’elles-mêmes.

Marker CSS

Marker CSS se distingue par une syntaxe prenant en compte un nombre important de propriétés. Peut-être trop à mon humble avis, mais tout les goûts sont dans la nature ! Par exemple <body class="A s13 c666 tc"> signifie : A pour famille de police Arial ; s13 font-size 13 pixels ; c666 couleur présélectionnée ; et tc pour avoir le texte aligné au centre.

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…

CleverCSS est une manière de produire des CSS inspirée par le langage de programmation Python : les accolades sont remplacées par l’indentation des différentes règles CSS et les déclarations sont introduites par le signe deux-points. Jusque-là, rien de bien fou, mais CleverCSS ne s’arrête pas à l’économie de quelques signes et propose de nombreuses améliorations à CSS  : de l’optimisation de la syntaxe à l’utilisation des constantes en passant par le calcul sur les valeurs, y compris les couleurs.

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)