Conventions de nommage dans Zpip

Pour favoriser l’échange de thème et de css, Zpip propose une famille de classe et de nommage.

Préambule

Le layout intègre 6 entités logiques de contenu et structure le html à sa guise.
Les 6 entités sont nommées ici selon la convention ci-dessous, eu égard à leur contenu réel et sans préjuger de la dénomination et de la structure englobante définie par le thème :

  • entête fournit la présentation de la page et d’identité
  • barre-nav constitue la navigation principale du site - peut être vide
  • contenu contient l’information principale de la page
  • navigation fournit des éléments de navigation secondaires
  • extra fournit des éléments d’information connexes
  • pied fournit des éléments de repérages et de rappels secondaires

body

L’élément body porte une ou deux classes distinctives :

  • La première correspondant au type de la page préfixé de page_ :
    • pour des objets de SPIP (de type rubrique.html, article.html, site.html ..) cela donne page_rubrique, page_article, page_site
    • pour les autres pages cela donne toujours page_page
  • La seconde classe correspond à la variante préfixée du type de page
    • à la composition pour les objets de SPIP, préfixée par le type de l’objet (article_album par exemple)
    • au nom de la page pour les autres pages, préfixé par page_ (page_plan par exemple)

Exemples :

  • sur la page sommaire body a les classes page_page page_sommaire
  • sur une page rubrique body a la classe page_rubrique
  • sur une page article avec la composition portfolio body a les classes page_article article_portfolio

Il est ainsi possible de cibler certaines familles de page pour leur appliquer une mise en forme différente.

entête

Un lien bloc avec la classe .accueil contenant

  • le logo éventuel avec la classe .spip_logos, encadré par un élément <a>
  • le nom du site dans un identifiant #nom_site_spip, qui peut être porté par toute balise. Il appartient au thème de fixer si il doit se comporter comme un block ou comme un inline qui peut contenir un élément a
  • le slogan du site dans un élément avec l’identifiant #slogan_site_spip

L’entête peut aussi contenir le formulaire de changement de langue, répéré par la classe .formulaire_menu_lang, qui n’apparaitra que sur les sites multilingues.

barre-nav

Si elle est non vide, elle est structurée d’éléments imbriqués selon les règles suivantes :

  • élément englobant avec la classe .menu-conteneur
  • qui encadrent un ou plusieurs éléments .menu-entree
  • .menu-liste contient exclusivement des éléments de la classe .menu-entree
  • .menu-entree doit être dans un élément .menu-liste
  • .menu-entree contient un unique élément a
  • .menu-entree peut contenir un unique élément .sep contenant un séparateur textuel
  • .menu-entree peut contenir des sous groupes .menu-liste

Cette convention permet par exemple une navigation hiérarchisée de type ul.menu-liste et li.menu-entree à un ou plusieurs niveau ou une navigation plate constituée d’une suite de liens.

Le thème devra prendre en charge au moins l’affichage du premier niveau de navigation
le thème pourra prendre en charge l’affichage d’un éventuel menu déroulant à 1 ou plusieurs niveaux si le squelette les fournit.

contenu

Contient les éléments suivants :

  • #hierarchie pour le fil d’ariane. Il contient :
    • des liens <a>
    • des éléments séparateurs .sep
    • un élément en exergue .on
  • un cartouche de présentation, repéré par la classe .cartouche, qui contient
    • le titre .titre
    • le logo .spip_logos
    • le surtitre .surtitre
    • le sous-titre .soustitre
    • la liste des traductions .traductions
    • les informations de publication .info-publi contenant
      • la date de publication .published
      • la liste des auteurs .auteurs séparés éventuellement par des éléments .sep
      • une date de publication antérieure .past-published
  • une introduction .introduction
  • un descriptif .descriptif
  • un chapo .chapo
  • un texte .texte
  • un lien .hyperlien
  • un PS .ps
  • des notes .notes

L’ensemble du contenu principal de chaque page est encadré par un élément de classe .contenu-principal.

Portfolios :
.documents_portfolio (classe et pas id car il pourrait y en avoir plusieurs)

Forums :
garder la structure de la dist ?

  • des info complémentaires de publication dans un conteneur de classe .meta-publi, contenant :
    • un lien « Lire la suite de ... », portant la classe .lire-la-suite
    • un nombre de commentaires, dans une classe .nb_commentaires
    • une date antérieure de publication dans une classe .date-redac

Peut contenir

  • une navigation de second niveau, structurée comme barre-nav, par .menu-liste, .menu-entree, .sep et <a>
  • Le formulaire de recherche repéré par la classe .formulaire_recherche.
    Les thèmes qui voudront le placer visuellement dans le bandeau supérieur procèderont par un positionnement absolu
  • des intertitres .h1, .h2, .h3, .h4, .h5, .h6
  • des listes d’items

extra

Peut contenir tout type d’élément.

pied

Aucun élément spécifique au pied n’est défini à ce jour.

Éléments généraux

Les intertitrages
Les intertitres sont repérés par les classes .h1, .h2, .h3, .h4, .h5, .h6

Les paginations
Les pagination sont identifiées par la classe .pagination, qui contient des éléments <a>, un élément .on et un séparateur .separateur

Les listes d’items
(liste d’articles, de brèves, de rubriques ...). Les listes items sont constituées d’un élément parent portant la classe .liste-items qui regroupe des items avec la classe .item.

La liste peut être dans un élément bloc englobant .liste qui regroupera aussi un titre, une pagination ...

Les formulaires
Selon la convention décrite dans http://www.spip.net/fr_article3791.html

Les tableaux de données
Les tableaux de données sont générés par les raccourcis typographiques de SPIP, et utilisent la structure suivante :

<table class='spip'>
	<caption>...</caption>
	<thead>
		<tr class='row_first'>
			<th>..</th><th>..</th>
		</tr>
	</thead>
	<tbody>
		<tr class='row_even'>
			<td>..</td><td>..</td>
		</tr>
		<tr class='row_odd'>
			<td>..</td><td>..</td>
		</tr>
	</tbody>
</table>

Les liens
Les liens peuvent porter plusieurs classes :

  • .spip_note pour les liens vers des notes de bas de page
  • .spip_ancre pour des liens internes à la page
  • .spip_in pour des liens internes
  • .spip_out pour des liens sortants
  • .spip_url pour les liens sans texte autre que l’url elle-même
  • .spip_glossaire pour les liens vers une encyclopédie

Les documents
Les documents sont encapsulés dans un conteneur portant la classe .spip_documents.

Lorsqu’un alignement est précisé, il se retrouve sur une classe supplémentaire .spip_documents_left, .spip_documents_center, .spip_documents_right.

Le document contient toujours une balise <img>, qui référence l’image, une miniature, ou un logo représentant le type du document. Elle peut être incluse dans un lien <a>.

Un titre et un descriptif peuvent accompagner l’image, portant les classes .spip_doc_titre et .spip_doc_descriptif

Les pétitions
Les signatures des pétitions sont présentées dans une structure en table qui reprend les nommages des tableaux de données décrits ci-dessus. Elle est donc directement stylées par le thème sans nécessiter d’habillage supplémentaire.

Il est néanmoins possible d’affiner l’habillage au moyen des sélecteurs présents sur chaque cellule de la table qui permet de distinguer les différentes informations.

Autres éléments générés par les raccourcis typogaphiques
(cf spip_styles.css)

  • .spip_code pour présenter du code inline
  • .spip_cadre pour afficher un bloc de code
  • acronym et abbr
  • blockquote.spip pour une citation
  • blockquote.spip_poesie pour afficher des vers
  • hr.spip pour une ligne de séparation

Divers
Des éléments utilisés conventionnellement dans les squelettes, ils sont également stylés par défaut par spip_styles.css

  • .spip_surligne sert à indiquer les mots recherchés présents dans une page
  • .nettoyeur sert à faire un clear après des blocs flottants
  • .invisible est utilisée pour masquer des éléments à l’affichage.

Discussion

6 discussions

  • Bonjour,

    Qu’a voulu dire Cédric à propos du formulaire de recherche dans le paragraphe Navigation ci-dessus par :

    Les thèmes qui voudront le placer visuellement dans le bandeau supérieur procèderont par un positionnement absolu

    Dans un thème il y a deux fichiers principaux :

    body.html et habillage.css

    Dans lequel des deux fichiers faut-il écrire du code, et de quelle façon ?

    Merci soit de votre éclairage, soit d’un lien vers la bonne explication.

    Répondre à ce message

  • Bonjour,

    Vous le comprendrez en lisant ce message, je ne suis pas expert en développement web, pour autant j’utilise zpip avec passion pour créer un site, et j’aimerai qu’une âme charitable m’explique le fonctionnement de cet appel de classe, car je n’ai pas trouvé d’explications dans mes docs sur html ou css,

    div class=« comment-message forum-message » dans forum.html

    Il y a deux classes de mentionnées, « comment-message » et « forum-message » est-ce que la première classe « comment-message » est la classe par défaut et deuxième « forum-message » est une classe de substitution ?

    Mon problème : je souhaite arranger le thème Mercurable au niveau des forums, ce thème utilise « comment-message », mais l’habillage ne me convient pas. Par contre certains thèmes utilisent la seconde classe « forum-message » avec des encadrements hiérarchiques bien plus lisibles.

    Me faut-il supprimer tout ce qui concerne « content-message » dans habillage.css du thème Mercurable et le remplacer par tout ce qui concerne « forum-message » à partir d’une autre feuille habillage.css ?

    Merci, hoss.

    Répondre à ce message

  • 2

    Merci pour cet article.
    Si je peu me permettre, j’ai du mal à saisir la section body. Tu y parles des compositions ? Pourquoi y a-t-il pour certaines pages le préfixe page_ et pas pour d’autres ? Quel est le rapport entre la classe body et le nom des fichiers ?

    • En très gros, la plupart des objets éditoriaux de spip (articles, rubriques, ...) sont identifiés par page_. seules les compos diffèrent de ce schéma dans la mesure où il faut bien que l’on puisse identifier leur type et l’objet édito auxquels elles se raportent au premier coup d’oeil, donc article_truc ou rubrique_machin, où truc et machin sont les noms que tu auras donné à tes compos.

      C’est plus clair ?

    • Ca, c’est une règle dont je m’affranchis toujours, pour éviter de perdre trop de temps à renommer ce qui a déjà été fait à l’intégration pour l’adapter à SPIP+Z... Voici les problèmes récurrents :

      -  la convention pour la page d’accueil est plutôt « .home » et non « .page_sommaire ». J’utilise donc [(#ENV{home}|oui) home] sur la balise </body>.
      -  distinguer la nature des objets SPIP par des « .page_article », « .page_rubrique », etc. est inutile... Si nécessaire, mieux vaut plus simplement « .article » ou « .rubrique ». Cela est généré par [ (#ENV{type}|=={page}|non)[(#ENV{type})]] sur la balise </body>, en prenant soin de tester pour empêcher d’afficher « page », qui est un sélecteur courrament utilisé par ailleurs.
      -  préfixer les sélecteurs par « page_ » est trop verbeux... et déroutant, car à contresens de la notion de page dans SPIP+Z où « page » ne désigne pas une « page web », mais un « non objet spip ».
      -  je n’aime pas trop, mais j’ajoute souvent [ rubrique(#ID_RUBRIQUE)] et [ secteur(#ID_SECTEUR)], car ça reste un moyen simple et inégalé, pour varier le look d’une partie du site.
      -  distinguer les compositions selon la nature des objets SPIP auxquelles elles s’appliquent est absurde et inutilement pénible. Mieux vaut un simple« .agenda », « .actu » ou « .trombinoscope » généré par [ (#ENV{composition})]. Si besoin était de distinguer selon les objets éditoriaux, il suffit de cibler en CSS, par exemple « .actu.rubrique {...} » ou « .actu.article {...} ».

    Répondre à ce message

  • 1

    Bonjour,

    J’utilise Zpip pour l’ensemble d’un site. J’aimerai pouvoir ne pas afficher la colonne de navigation (et du coup élargir la partie contenu) pour UNE SEULE PAGE du site.

    Toucher au body.html me parait une méthode de sagouin.
    Jouer sur les largeurs des parties dans la feuille de style serait sans doute plus clean, mais j’ignore si on peut conditionner les dimensions de bloc à une rubrique donnée.

    Vos idées les bienvenues.

    • Salut,

      tu pourrais annuler les « float » dans la feuille de style pour retrouver les blocs principaux les uns à la suite des autres.

      Tu peux aussi consulter la collection de dispositions « Layout Gala » disponible à l’adresse http://blog.html.it/layoutgala/.

      Voilà pour un début de piste, si tu n’as pas déjà trouver la solution à ton problème.

    Répondre à ce message

  • Bonjour,
    j’ai encore quelques doutes par rapport au nommage.
    J’aimerais que pour chaque rubrique, les articles aient une mise en page différente.
    J’ai bien compris où il faut placer les fichiers (squelettes/contenu,squelettes/extra, etc....) mais je comprends pas comment les nommer pour que ça marche par défaut.
    Par exemple pour la rubrique 1, est-ce que c’est article-1.html ?
    merci d’avance !

    Répondre à ce message

  • 1

    Juste pour signaler une coquille dans l’exemple de la section body :

    sur une page article avec la composition portfolio body a les classes page_article article_sommaire

    Sur une page article avec la composition portfolio body a les classes page_article et article_portfolio.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom