L’organisation des CSS de Sarka-SPIP

lundi 20 septembre 2010
par  _Equipe_
popularité : 68%

La logique d’inclusion dans le header des pages

Tous les fichiers CSS sont inclus systématiquement dans chacune des pages du squelette. Ces inclusions sont réalisés dans la noisette noisettes/inc_header.html. Les fichiers sont inclus dans un ordre très précis pour tenir compte de la logique de cascade et de surcharge des CSS, à savoir :

  • raz.css : remise à zéro des styles pour les différents navigateurs.
  • layoutx.css : structure du site correspondant au layout Gala choisi, où x représente le numéro du layout, à savoir de 7 à 18 ou 34 . Le 13 correspond au layout par défaut, trois colonnes avec centre fluide.
  • spip_style.css : fichier par défaut des styles de SPIP comme la typographie. Permet d’afficher correctement certains éléments non stylés par les CSS spécifiques de Sarka-SPIP.
  • spip_formulaires.css : fichier par défaut des styles des formulaires SPIP. A la même utilité que le fichier précédent.
  • style.css.html : fichier des styles spécifiques du squelette pour tous les affichages sauf l’impression. Ce fichier fait des inclusions de sous-fichiers CSS contenus dans le répertoire css/ et qui sont décrits en détail dans le paragraphe suivant.
  • impression.css : fichier des styles spécifiques du squelette pour les impressions.

Les styles spécifiques de Sarka-SPIP

Les styles spécifiques du squelette sont contenus dans des fichiers .css.html qui peuvent contenir des balises SPIP comme #CONFIG ou #CHEMIN - et bien d’autres. En dehors de ces balises le code est classique.
Ces fichiers sont rangés dans le répertoire css/. Ils sont inclus aussi dans un ordre prédéfini autorisant la surcharge :

  • base.css.html : adaptation pour Sarka-SPIP des styles SPIP, à savoir, ceux associes au code généré par SPIP, aux formulaires, à la pagination. Ce fichier contient aussi les styles généraux propres au squelette.
  • layout.css.html : adaptation pour Sarka-SPIP de la structure et des couleurs des layouts Gala standard.
  • bandeau.css.html : les styles du bandeau et du pied de page.
  • noisettes.css.html : les styles des noisettes qui composent les colonnes navigation et extra.
  • elements.css.html : les styles de la colonne principale - corps - à l’exception de la typographie.
  • ie.css.html : les hacks pour IE 6, 7 ou 8 des styles précités.
  • perso.css.html : le fameux fichier de personnalisation, qui, si il existe, doit contenir tous vos ajouts ou/et modifications.