Des grilles et des CSS : comment travailler vite et sans frameworks

Ce tutoriel traite de l’implémentation des grilles frameless (non fluides). Le lecteur y trouvera comment se créer ses propres outils de positionnement sur la grille directement en CSS ou bien en LESS CSS, au choix.

Le problème : CSS fait perdre du temps

Le langage CSS est de bas niveau. Il oblige l’intégrateur à de nombreuses répétitions qui, en plus d’être longues à saisir, seront autant de boulets lors de la maintenance.

Les frameworks CSS sont à mon avis engagés dans une mauvaise direction, celle d’une entorse à la séparation du fond et de la forme. Mieux vaudrait des « frameworks LESS ». Mais il est également facile de se faire soi-même les outils nécessaires à l’usage d’une grille.

Ceux qui codent directement en CSS sont condamnés à un copier-coller massif, je fournirai du moins les valeurs prêtes à coller.

Le préprocesseur LESS CSS ajoute au langage CSS des fonctionnalités qui nous évitent les répétitions. Notez que j’utilise LESS et donc j’écris sur LESS, mais je n’ai rien contre SASS. Pour utiliser LESS CSS simplement, pensez à Less Now.

Des variables pour les colonnes et les lignes de la grille

Il nous faut des variables pour les largeurs de colonnes et les hauteurs de lignes. En CSS on « simule » les variables au moyen de marqueurs laissés en commentaires, en LESS on utilise simplement les variables.

D’abord un dessin :

Grille et variables

Ensuite l’explication. Je suggère les conventions de nommage suivantes :

  • Les largeurs de colonnes sont suffixées par « c » : 1c, 2c, 3c, etc.
  • La largeur d’une gouttière est représentée par g.
  • Les largeurs de colonnes plus une gouttière sont suffixées par « cg » : 1cg, 2cg, 3cg, etc.
  • Les hauteurs des lignes sont suffixées par « r » : 1r, 2r, 3r, etc.

Voyons un exemple. Nous souhaitons créer un bloc large de deux colonnes et haut d’une ligne. Et nous voudrions en outre qu’il recouvre les colonnes numéro 2 et 3 (il est donc décalé à droite d’une colonne et une gouttière). En CSS cela donne :

.my-block {
	height: 1.25em; /* 1r */
	margin-left: 3.75em; /* 1cg */
	width: 6.25em; /* 2c */
}

En LESS CSS on écrira :

.my-block {
	height: @1r;
	margin-left: @1cg;
	width: @2c;
}

Facile, non ? Il reste maintenant à générer les variables.

Générer les variables CSS ou LESS à l’aide d’un tableur

Paramétrage

Paramétrage

J’utilise Gnumeric car il est aussi léger qu’une calculatrice mais n’importe quel tableur fera l’affaire. Il vous faudra toutefois le configurer afin qu’il utilise le point comme séparateur des décimales.

La feuille de calculs comporte trois parties : un bloc de paramétrage, le bloc des colonnes sans et avec gouttières, et celui des lignes. Faites correspondre à votre grille les trois paramètres dans les cellules colorées.

Les colonnes sans et avec gouttières

Les colonnes sans et avec gouttières

Les lignes

Les lignes

Les colonnes « CSS » fournissent la valeur en em ainsi que le marqueur en commentaire pour rappeler de quelle variable il s’agit. Ceux qui travaillent en CSS feront donc des aller-retours durant tout leur travail entre la feuille de calculs et leur éditeur de CSS.

Les utilisateurs de LESS CSS se contenteront de copier le contenu des trois colonnes « LESS » au début de leur fichier LESS et ils utiliseront ensuite les variables normalement.

Téléchargez le fichier tableur : Calculs pour grilles Frameless (au format Gnumeric, ODF et Excel).

Vous voilà en selle.

Note à propos de l’unité « em »…

En attendant l’implémentation par les navigateurs de l’unité rem, nous devons utiliser em pour notre positionnement en CSS. Or em est une valeur contextuelle, elle dépend de font-size qui est une propriété héritée. Un travail propre demandera donc deux préalables :

  1. utiliser un « reset CSS » comme celui d’Éric Meyer afin d’attribuer à tous les éléments HTML la même valeur de font-size, celle par défaut du navigateur ;
  2. n’utiliser font-size que dans les éléments en bout de hiérarchie : par exemple sur .my-content-block p plutôt que .my-content-block.

One Response to Des grilles et des CSS : comment travailler vite et sans frameworks

  1. lookman says:

    Bon article, je le mets dans mes favoris

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « 9cUPaZ » dans le champ ci-dessous :