Guide Z - Etape 3 : Enrichir les styles et finaliser le body

, par _Eric_

Renommer des blocs du body

En premier lieu, on effectue quelque renommage de blocs afin d’être plus conforme à la pensée unique actuelle. Ainsi :

  • le bloc container du layout gala est renommé en page ;
  • le bloc Z navigation en aside qui est plus HTML5.

En outre, afin d’être moins spécifique dans les styles on va utiliser les classes plutôt que id associés aux div de blocs.

Pour mettre en place ces modifications il faut :

  • modifier le body.html pour renommer les id et class comme défini ;
  • réitérer le renommage dans l’ensemble des fichiers de styles des layouts Gala en modifiant les div#xxx en .xxx ;
  • renommer le bloc Z navigation en aside dans le define du fichier d’options ;
  • et renommer le dossier navigation en aside.

En recalculant la page, on retrouve le layout Gala classique sans aucune modification.
Et maintenant, pour faire évoluer notre squelette vers un squelette SPIP stylé il est nécessaire de développer les styles de base de Gala.

TinyTypo pour la typographie

Inutile à ce stade de repartir de zéro quand il existe déjà d’excellentes bases. Celle que nous allons utiliser est TinyTypo, créée par Tetue et disponible sur la page http://tinytypo.tetue.net/. Tiny Typo est une base CSS qui fait le minimum typographique nécessaire à la rédaction de documents web :

Facile à utiliser, elle vient compléter votre reset habituel pour servir de base à vos propres styles, sans fioriture, de façon non intrusive. Faite de HTML et CSS, elle est simple et robuste, très légère (sans image, ni fonte, ni JavaScript). Elle est personnalisable en LESS.

TinyTypo est respectueuse des standards W3C, naturellement responsive, prévue pour l’écran et l’impression, pour le multilinguisme et soucieuse d’accessibilité.

Pour cela, comme le dit le manuel d’installation il suffit d’ajouter les fichiers listés ci-après dans le dossier css/ du squelette ZGala et d’inclure dans le fichier inclure/head.html les feuilles CSS dans l’ordre suivant :

  • reset.css
  • clear.css
  • font.css
  • typo.css
  • links.css
  • media.css

Ces inclusions sont insérées en premier dans la liste des styles avant celle du layout qui est déplacé après la balise #INSERT_HEAD_CSS qui permet d’intégrer des styles propres à un plugin.

Pour conclure avec TinyTypo et aussi tester la typographie on crée une page de test nommée « tinytypo » en recopiant les balises <section> de celle fournie avec le package TinyTypo et en les insérant dans un fichier content/tinytypo.html. Le framework Z fera la reste !

Nettoyer les layouts Gala

Il faut se rappeler que les styles Gala comporte outre ceux des blocs proprement dits, quelques styles de typographie pour les balises <h1>, <a> et <p> et une instruction de reset sur les balises <html> et <body>. Il faut donc supprimer ces styles de tous les fichiers de layout.

Si l’on veut conserver pour l’instant la coloration du fond de certains blocs, il faut laisser les quelques styles correspondant. Cependant, comme ils sont identiques dans tous les fichiers de layout, on les factorise dans un fichier css/theme.css qui préfigure une notion que nous discuterons dans une prochaine étape.
En rafraichissant la page sommaire on obtient notre layout Gala avec la nouvelle typographie.

La partie des styles inclus dans le fichier inclure/head.html s’est bien enrichie comme le montre le code suivant :

  1. [(#REM) Base CSS - TinyTypo de Tetue ]
  2. [<link rel="stylesheet" href="(#CSS{css/reset.css})" type="text/css" />]
  3. [<link rel="stylesheet" href="(#CSS{css/clear.css})" type="text/css" />]
  4. [<link rel="stylesheet" href="(#CSS{css/font.css})" type="text/css" />]
  5. [<link rel="stylesheet" href="(#CSS{css/typo.css})" type="text/css" />]
  6. [<link rel="stylesheet" href="(#CSS{css/links.css})" type="text/css" />]
  7. [<link rel="stylesheet" href="(#CSS{css/media.css})" type="text/css" />]
  8.  
  9. [(#REM) Balise permettant aux plugins d'insérer des fichiers CSS ]
  10. #INSERT_HEAD_CSS
  11.  
  12. [(#REM) Layout ]
  13. [<link rel="stylesheet" href="(#CSS{[css/layouts/layout_gala(#CONFIG{zgala/layout, 23}|str_pad{2, 0, 0}).css]}|direction_css)" type="text/css" />]
  14.  
  15. [(#REM) Feuille de style du theme ]
  16. [<link rel="stylesheet" href="(#CSS{css/theme.css})" type="text/css" />]

Télécharger

ooCSS pour les boites

Le plugin ZCore fournit, outre le framework Z, un système standard de boites dont le modèle est issu des travaux ooCSS de Nicole Sullivan. Ce système propose d’une part des balises pour créer les boites et d’autre part des CSS pour les styler.

Pour mémoire les balises sont :

  • #BOITE_OUVRIR, pour initialiser la boite ;
  • #BOITE_PIED, pour insérer un pied à la boite (facultatif) ;
  • #BOITE_FERMER, pour clore la boite.

Deux fichiers CSS sont associés à ce système de boites, à savoir :

  • box.css qui contient les styles des conteneurs et autres éléments structurels ;
  • box_skins.css qui contient les styles de personnalisation des différentes boites comme une note, un message d’erreur ou d’information...

Ces fichiers sont inclus dans le dossier css/ du plugin ZCore, de fait, comme celui-ci est nécessité par le squelette ZGala, il n’est nul besoin de les recopier dans le squelette, il suffit de les inclure via le fichier inclure/head.html. Les inclusions sont positionnées à la suite de celles de TinyTypo.

Pour compléter ce système de boites, un troisième fichier CSS css/form.css est inclus à la suite des deux précédents, afin de donner un style minimum aux éléments d’un formulaire. Ce fichier est fourni par la dist de SPIP ce qui permet de l’inclure dans ZGala sans avoir à le recopier.

Le fichier inclure/head.html s’enrichit donc des lignes suivantes :

  1. [(#REM) CSS des boites de messages, des popups et des éléments de base des formulaires ]
  2. [<link rel="stylesheet" href="(#CSS{css/box.css})" type="text/css" />]
  3. [<link rel="stylesheet" href="(#CSS{css/box_skins.css})" type="text/css" />]
  4. [<link rel="stylesheet" href="(#CSS{css/form.css})" type="text/css" />]

Télécharger

Pour tester le rendu des boites, on crée une page « boite » en ajoutant un unique fichier content/boite.html avec des appels divers aux balises de boite. Tout comme la page « tinytypo », le framework Z fera le reste.

Améliorer les boites

Le rendu de la page boite n’est pas génial de mon point de vue. Et cela est du à plusieurs facteurs.

Avec l’inclusion du fichier css/form.css on obtient des boites avec une double bordure ce qui est assez bizarre. Si l’on supprime cette inclusion on se retrouve toujours avec une bordure externe, cette fois de couleur noire mais plus de fond en dehors du bloc .inner. C’est mieux mais pas encore satisfaisant.
Si l’on y regarde de plus près, cette bordure est due à TinyTypo qui inclus aussi une classe .box qui vient en collision avec notre système de boite ooCSS. Le plus simple est donc de renommer la classe de TinyTypo qui est juste un encadré typographique en .tinybox, mais on introduit un fork dans TinyTypo qu’il faudra maintenir en parallèle.

Coté couleur je voudrais me rapprocher de celles assez standard de Bootstrap pour les alertes. Je recopie donc les fichiers CSS ainsi que les images dans le dossier css/ du squelette ZGala et je fais donc les corrections qui s’imposent :

  • dans css/box_skins.css pour les couleurs et pour les liens,
  • dans css/box.css je rajoute une touche d’arrondi en positionnant le radius à 4px pour la classe .inner.

Enfin, que faire de css/form.css ? Comme je ne souhaite plus qu’il modifie mon système de boites maintenant modifié, je supprime les styles qui les concernent (je n’ai pas compris d’ailleurs pourquoi ces styles dans ce fichier) et je conserve les autres styles qui eux concernent bien les formulaires. J’ai préalablement recopié le fichier dans mon dossier css/ du squelette ZGala.

En recalculant la page « boite » je peux admirer le résultat.

Ajouter un fil d’ariane Z

Le fil d’ariane est souvent inclus comme un élément du contenu d’une page, soit dans le bloc content. C’est pratique car on peut le personnaliser suivant la page mais d’un autre coté ça force à le supprimer quand on ne l’utilise pas.

Le squelette spipr-dist a résolu ce problème en faisant du fil d’ariane un bloc Z indépendant inclus dans le conteneur englobant le bloc Z content. On reproduit ce schéma pour notre squelette Z. Pour cela :

  • on ajoute le bloc breadcrumb dans la liste des bloc Z du fichier d’options en prenant bien soin de ne pas le positionner en premier car il faut toujours y laisser le contenu de la page pour traiter correctement les 401 et 404 ;
  • on modifie le fichier body.html en ajoutant un appel à une inclusion propre au fil d’ariane ;
  • on crée un répertoire breadcrumb/ et un fichier breadcrumb/dist.html avec un texte d’exemple comme pour les autres blocs. Le HTML est classiquement une liste non ordonnée dont la classe est positionnée à breadcrumb. On notera que contrairement aux autres blocs Z ce bloc n’est pas inclus d’office au niveau du body dans un div au nom du bloc ;
  • et bien entendu on ajoute les styles adéquats pour le fil d’ariane dans chacun des fichiers de layout gala. Comme ces styles ne dépendent pas du layout on crée un fichier css/breadcrumb.css minimal avec un fond qui permet d’identifier le bloc et on on l’appelle dans inclure/head.html après l’inclusion du layout.