Si nous avons passé temps de temps à analyser les bonnes pratiques XHTML et CSS, c’est avant tout pour construire un framework CSS efficace répondant à nos besoins. L’étape 5 entame donc une série de billets sur la construction d’un framework CSS étape par étape. Vous pourrez y greffer vos commentaires afin d’y participer et/ou rectifier ce que je vais vous proposer.

Une fois l’étape 5 terminée, mon travail sera mis à la disposition de tous comme l’avait été le précédent.

Pour la petite histoire, le framework BIC est un framework que j’ai à l’époque pensé pour l’intégrateur qui interviens donc avant le développement sur une maquette statique. Il consiste en un système de classe lui permettant de mettre en page plus rapidement tout en diminuant la longueur du CSS propre au site.

Un peu de bonnes pratiques

Avant d’aller plus loin, un peu de bonnes pratiques concernant la mise en page d’un framework. Un framework est un outil relativement complet, certaines choses seront couramment utilisées, d’autres moins. Reste qu’il faudra le documenter non seulement pour son utilisation mais aussi pour pouvoir le partager. Une fois fini, rien ne vous empêchera de le concaténer afin d’enlever tous les commentaires, les sauts de lignes et le rendre le plus léger possible mais en attendant… Il faut y voir clair.

Organiser ses fichiers

Un framework css est généralement articulés autour de plusieurs fichiers. Il peut y avoir un reset.css, un typography.css, un layout.css, un color.css ou je ne sais quoi encore mais vous noterez que mes exemples sont relativement précis, les mots sont parlants et vous savez à peu près ce que vous trouverez dans le fichier avant de l’ouvrir. N’oublier pas de ranger vos différents fichiers CSS dans un dossier que vous pourriez par exemple appeler… Hum… Pourquoi pas CSS ?

Un petit gain de temps pour vous (puisque vous en êtes l’auteur) mais un gros gain de temps pour les autres.

Documenter

La documentation est à la fois la chose la plus importante et la plus négligé. Une fois dans votre fichier entrain de fouiller dans vos 300 classes rangées à votre façon, vous vous perdrez vite et perdrez du temps inutilement. Important donc de bien utiliser le système de commentaire afin de partager votre fichier CSS en plusieurs parties de la même manière qu’un… livre pourquoi pas ?

Histoire de remettre les choses en place et quitte à me répéter, un commentaire dans un fichier CSS se fait de la façon suivante :

/* < --- l'ouverture du commentaire - la fin du commentaire ---> */
/* blablabla */

Première partie : le master

La première partie donc, créer un fichier master. J’ai pour ma part choisis de le nommer screen.css afin de l’associer dans ma ligne xhtml aux medias screen et projection. Encore une fois, c’est relativement parlant et vous pourrez vous douter que le CSS pour gérer l’imprimante (et donc le media print) se nommera certainement print.css.

Dans ce premier fichier donc, la liste des différents fichiers CSS à appeler dans le répertoire /css/

screen.css

/*--------------------------------------------------------------------
 
[Master Stylesheet]
 
Framework : BIC
Version : 2
Last Change : 09/10/2008
Author : pocky
Please use for beautiful design only
 
[Credits]
clean.css is inspired from Meyer : http://meyerweb.com
 
--------------------------------------------------------------------*/
 
@import "css/clean.css";
@import "css/typography.css";
@import "css/color.css";
@import "css/layout.css";
@import "css/myclass.css";
 
/* Optional */
@import "css/wordpress.css";

clean.css : Mon fichier clean.css est donc mon reset. Je ne souhaite pas m’arrêter au reset et redéfinis donc certaines choses à la suite du travail effectué par Eric Meyer. Je l’ai donc baptisé clean.css car il nettoie tout avec mes propres produits d’entretiens

typography.css : La encore très simple, ce fichier se chargera des classes en rapport avec la typographie des pages web.

color.css : Une série de classe associées à des couleurs les plus fréquemment utilisées par mes petites mains.

layout.css : Un gros morceau dans ce fichier, une série de classes afin de faciliter la mise en page de la structure XHTML. Deux colonnes ou plus, tout va venir la dedans.

myclass.css : Le fourre-tout du framework. Toutes les classes que je serais tenter de rajouter en vrac et au gré de mes humeurs.

wordpress.css : Comme l’indique le commentaire au dessus, ce fichier est optionnel puisqu’il ne contiens que des classes utilisées par wordpress afin de faciliter la mise en page (par exemple des galeries).

Allez op, nettoyez moi tout ça !

Le fichier clean.css donc. Le but, remettre tout à zéro et nettoyer le reset à ma façon pour obtenir une base saine et donc… clean. Comme vous pourrez le constater, le fichier est documenté via une table des matières permettant de s’y repérer beaucoup plus simplement. Une fois de plus, c’est ma façon de faire mais vous pourrez très bien vous en inspirer .

/*	--------------------------------------------------------------------
	[clean.css]
 
	Table of Contents
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 
	1. Meyer modified reset
	2. Body
	3. Tables
	4. Quotes
	5. List
	6. Links
	7. Anything else
--------------------------------------------------------------------	*/
 
 
/*	--------------------------------------------------------------------	
	1. Meyer modified reset
--------------------------------------------------------------------	*/
 
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp,
small, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
 
em, strong, strike, acronym {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
* { font-size: 100.01%; }
html { font-size: 62.5%; }
 
/*	--------------------------------------------------------------------
	2. Body
--------------------------------------------------------------------	*/
 
body { min-height: 100% }
 
/*	--------------------------------------------------------------------
	3. Tables
--------------------------------------------------------------------	*/
 
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
 
/*	--------------------------------------------------------------------
	4. Quotes
--------------------------------------------------------------------	*/
 
blockquote:before, blockquote:after,
q:before, q:after { content: ""; }
 
/*	--------------------------------------------------------------------
	5. List
--------------------------------------------------------------------	*/
 
 
ol, ul { list-style: none; list-type: inside; margin: 1em 0; }
 
/*	--------------------------------------------------------------------
	6. Links
--------------------------------------------------------------------	*/
 
a, a img { text-decoration : none; }
:focus { border: 1px dotted; }
 
/*	--------------------------------------------------------------------
	7. Anything else
--------------------------------------------------------------------	*/
 
abbr { border-bottom: 1px dotted; }
p { margin: 1em 0 1em 0; }
hr { border: 0; height: 1px; margin-top: -1px; }

Meyer modified reset

Comme l’indique la table des matières et le crédit, la première partie du CSS est donc basée sur le reset d’Eric Meyer. Seulement j’ai pris la peine de séparer le reset en deux parties pour les balises em, strike, strong et accronym afin de ne pas à avoir a redéfinir le font-style ou font-weight pour chacune d’entre elle.

Comme vous pouvez le voir en dessous, Meyer documente :focus en nous rappelant de penser à le définir. Pour information le focus est une pseudo-class CSS permettant de visualiser le lien en cours lors d’une navigation avec la touche tabulation ou lors du clic de souris (dans certains cas). Le focus est habituellement composé de pointillés autour de l’élément en cours.

Enfin des petites modifications pour combler un problème sur Internet Explorer * { font-size: 100.01% } et une autre pour pouvoir spécifier des hauteurs en em comme des px (pixels) html { font-size: 62.5%; }

Maintenant, on nettoie à notre sauce

Place maintenant aux balises, je définis un peu de mise en page simple sur certaines balises sans pour autant m’attaquer au problème typographique. Normal, il sera effectué dans le fichier typography.css. On notera le retour de :focus afin de le redéfinir comme nous le conseil Meyer.

Vous pourrez aussi vous apercevoir que je n’ai que très peu concaténé mes valeurs afin de rencontrer le minimum de problème avec les navigateurs quel qu’ils soient. C’est une fois de plus un choix de ma part à ce niveau et valable uniquement pour ce fichier. Deux petites choses intéressantes encore, body { min-height: 100%; } afin d’éviter un problème de background sur certains navigateurs et enfin hr { border: 0; height: 1px; margin-top: -1px; }, un petit truc glané autour de quelques articles de blogs sur la balise hr afin une fois de plus de rencontrer le moins de problèmes avec cette balise qui pourra être redéfini via le fichier myclass.css pour la rendre toute kawai.

Prochain article consacré à typography.css.