Conventions de nommage dans Zpip

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-liste
• 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

navigation

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 :

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.