You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

160 lines
4.4 KiB

  1. Le layout intègre 6 entités logiques de contenu qui structure dans le html a sa guise.
  2. Les 6 entités sont nommées ici selon la convention ci-dessous, eu égard à leur contenu informationnel
  3. et sans préjuger d'une quelconque structure définie par le theme :
  4. header fournit la présentation de la page et d'identité
  5. nav constitue la navigation principale du site - peut être vide
  6. content contient l'information principale de la page
  7. aside fournit des élements de navigation secondaire
  8. extra fournit des eléments d'information connexes
  9. footer fournit des éléments de repérages et de rappels secondaires
  10. header
  11. - un lien bloc .accueil contenant
  12. - le logo eventuel [x], encadré par un element a
  13. - le nom du site
  14. dans un #nom_site_spip, qui peut être porté par toute balise. Il appartient au theme de fixer si il doit se comporter comme un block ou comme un inline
  15. qui peut contenir un element a
  16. - le slogan du site
  17. dans un #slogan_site_spip
  18. Peut contenir
  19. - .formulaire_menu_lang le formulaire de changement de langue qui n'apparaitra que sur les sites multilingues
  20. nav
  21. si elle est non vide, est structurée d'éléments imbriqués de classes
  22. .menu-liste
  23. encadre un lot de .menu-entree
  24. contient exlusivement des elements .menu-entree
  25. .menu-entree doit etre dans un element .menu-liste
  26. contient un unique element a
  27. peut contenir un unique element .sep contenant un separateur textuel
  28. peut contenir des sous groupes .menu-entree
  29. cette convention permet par exemple
  30. une navigation hierarchisée de type ul.menu-liste/li.menu-entree a un ou plusieurs niveau
  31. une navigation plate constituée d'une suite de liens
  32. le theme devra prendre en charge au moins l'affichage du premier niveau de navigation
  33. le theme pourra prendre en charge l'affichage d'un eventuel menu déroulant a 1 ou plusieurs niveaux si le squelette les fournit
  34. content
  35. #hierarchie le fil d'ariane,
  36. des liens 'a'
  37. des elements separateurs '.sep'
  38. un element en exergue '.on'
  39. .cartouche le cartouche de présentation du contenu
  40. .titre le titre
  41. .spip_logos le logo
  42. .surtitre
  43. .soustitre
  44. .traductions
  45. .publication Infos de publication
  46. .pubdate date de publication
  47. .authors auteur de publication, avec seperateurs .sep eventuels
  48. .past-published date de publication anterieure
  49. .postmeta cartouche de présentation des réactions
  50. .date
  51. a.comments
  52. a.readmore
  53. .post-info
  54. .post-info a
  55. .introduction
  56. .descriptif
  57. .chapo
  58. .texte
  59. .hyperlien
  60. .ps
  61. .notes
  62. Portfolios :
  63. .documents_portfolio (classe et pas id car il pourrait en avoir plusieurs)
  64. Forums :
  65. garder la structure de la dist ?
  66. Petitions :
  67. garder la structure de la dist ?
  68. aside
  69. Peut contenir
  70. - une navigation de second niveau, structurée comme nav, par .menu-liste, .menu-entree, .sep et a
  71. - Le formulaire de recherche. Les themes qui voudront le placer visuellement dans le bandeau supérieur procèderont par un positionnement absolu
  72. des intertitres .hx
  73. des listes d'items
  74. ...
  75. extra
  76. ...
  77. footer
  78. peut contenir
  79. TBD des registres horizontaux
  80. TBD des colonnes verticales
  81. Elements généraux
  82. les intertitrages
  83. .h1-like, .h2-like, .h3-like, .h4-like, .h5-like, .h6-like
  84. la pagination
  85. .pagination contient a, .on et .separateur
  86. les listes d'items (liste d'articles, de breves, de rubriques ...)
  87. .liste : bloc englobant
  88. peut contenir des p, .hx, .pagination ...
  89. contient au moins un ul.liste-items
  90. qui contient un ou des li.item
  91. les formulaires
  92. selon convention décrite dans https://www.spip.net/fr_article3791.html
  93. les tableaux de données
  94. tables.spip
  95. tr
  96. tr.row_odd
  97. tr.row_even
  98. th, td
  99. les liens :
  100. a
  101. a.spip_note /* liens vers notes de bas de page */
  102. a.spip_ancre /* liens internes a la page */
  103. a.spip_in /* liens internes */
  104. a.spip_out /* liens sortants */
  105. a.external ?
  106. a.spip_url /* liens url sortants */
  107. a.spip_glossaire /* liens vers encyclopedie */
  108. les documents :
  109. .spip_documents, .spip_documents_right, .spip_documents_left
  110. img, peut etre dans un 'a'
  111. .spip_doc_titre
  112. .spip_doc_descriptif
  113. la "typo" (cf spip_styles.css)
  114. .spip_code du code inline
  115. .spip_cadre du code en block
  116. acronym
  117. abbr
  118. blockquote.spip
  119. blockquote.spip_poesie
  120. hr.spip
  121. .nettoyeur { clear: both; height: 0; margin: 0; padding: 0; border: 0; line-height: 1px; font-size: 1px; }
  122. .invisible { position: absolute; top: -3000em; height: 1%; }