SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 236 visiteurs en ce moment

Accueil > Thèmes > Ecrire un thème > Conventions de nommage dans Zpip

Conventions de nommage dans Zpip

11 mars 2010 – par Cerdic – 10 commentaires

18 votes

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

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.

Dernière modification de cette page le 7 août 2012

Retour en haut de la page

Vos commentaires

  • Le 2 décembre 2013 à 14:42, par manu En réponse à : Conventions de nommage dans Zpip

    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

  • Le 20 avril 2012 à 12:44, par Hoss En réponse à : Conventions de nommage dans Zpip

    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

  • Le 13 mars 2010 à 13:07, par ju En réponse à : Conventions de nommage dans Zpip

    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 ?

    • Le 23 août 2010 à 12:02, par Loiseau2nuit En réponse à : Conventions de nommage dans Zpip

      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 ?

    • Le 27 mai 2011 à 14:15, par tetue En réponse à : Conventions de nommage dans Zpip

      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

  • Le 6 janvier 2011 à 09:50, par dut En réponse à : Conventions de nommage dans Zpip

    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.

    • Le 17 janvier 2011 à 13:28, par REM En réponse à : Conventions de nommage dans Zpip

      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

  • Le 17 novembre 2010 à 14:25, par Théo En réponse à : Conventions de nommage dans Zpip

    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

  • Le 5 juin 2010 à 16:16, par EricL En réponse à : Conventions de nommage dans Zpip

    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

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Metas +

    3 décembre – commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Critère {mots}

    6 août 2009 – 316 commentaires

    Permettre de sélectionner facilement des objets SPIP ayant un ou des mots clefs en communs.

  • LinkCheck : vérificateur de liens

    13 février 2015 – 64 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Import ICS 2 (agenda distant)

    2 août – 39 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • GIS 4

    11 août 2012 – 1286 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

Ça spipe par là