Objectifs de ce plugin
objectifs tenus, facultatifs, incomplets …

1°, être responsive

semantic ui
Les pages suivantessss sont un résumé de la Doc Semantic UI pour adapter suip à vos goûts-couleurs et besoins.
Au menu de la Doc Semantic UI : Globales, Éléments, Collections, Vues, Modules …

semantic.css

  • Globales - Reset . Le semantic.css d'origine effectue un brutal (?) reset « *, *:before, *:after { box-sizing: border-box; } » qui perturbait le fonctionnement des cartes géo . Je l'ai remplacé par « .ui, .ui:before,.ui:after, .segment, .page, .grid, .row, .column, input, textarea { box-sizing: border-box; } »
  • Qcqs autres modifications de semantic.css sont signalées par /* modifié */ , notamment :
    • menu fixed : width pas à 100% obligatoirement (il faut ajouter .width100 à la class),
    • background Soulages : #1b1c1d . a, a:hover et a:visited ,
    • les commentaires à max-width: 100%; plutôt que 650px ,
    • le flags.png a été réduit – l'ensemble d'origine est dans flags.css et dans /themes/flagsComplet.png – ainsi que les icônes "social",
    • ::selection en blanc/vert à la place de rgba(255, 255, 160, 0.4)/rgba(0, 0, 0, 0.8);
  • Grilles, aspect et mise en page du site, compliqué de trouver la "formule qui marche" :-/ . Apparemment les meilleurs :
    • ui (vertical ou basic) segment ⊃ ui ( ∅ ou page) grid ⊃ (color) row ⊃ column ,
    • ou ,
    • ui (celled stackable ou padded) grid ⊃ ( x wide color) column
  • dans semantic.css sont intégré des fonts, @font-face { font-family: (…) . Par exemple le petit triangle pivotant dans les accordions dépend de @font-face { font-family: 'Accordion'; (…) . Cela m'a semblé assez lourd mais je ne maitrise pas, donc j'ai laissé.

semantic.js

    Certains Modules de Semantic UI nécessitent semantic.js.
  • On peut utiliser ces modules et semantic.js avec spip : par exemple pour utiliser le module vidéo, il faut ajouter -- stylesheet href="#CHEMIN{css/video.css} -- , -- script src="#CHEMIN{js/video.min.js} -- et les scripts d'activations. Important : les js apres le css !
  • On peut s'en passer : Menu simple, Onglet, Accordion, comme vu dans la suite, Rating avec le plugin Notation d'éléments de SPIP).

2°, bien intégrer images et icônes svg
(des essais avec d'autres frameworks m'ont semblé moins concluant de ce point de vue …)

Le 2ème objectif de ce jeu de squelettes étant un travail collaboratif sur des plans, topos, dessins, en svg.
Exemple topo Houx. En complétant avec svg-pan-zoom, on peut zoomer sur les svg.

g é o
3°, cartes et geolocalisation

#SET{choixcouleur,#ARRAY{0,113,1,114,2,115,3,116,4,117}} [(#MODELE{carte_gis,objets=circuitsmots,mots=#GET{choixcouleur},limit=20,centrer_auto=oui,scale=oui,cluster=oui,clusterMaxZoom=11,fullscreen=oui,width=400px,height=350px})]

Des pages pour utiliser GIS sont prévues, avec legende par mots cles. Ainsi,
- la page gisr.html inclu le MODELE{carte_gis,objets=rubriques,etc.}, faisant donc appel à json/gis_rubriques où est indiqué le groupe de mots clés utilisé pour les légendes {id_groupe=x},
- la page giso.html inclu le MODELE{carte_gis,objets=objmot,mots=#ENV{mots},etc.} et le formulaire objetmot.html légende permettant de sélectionner les objets à afficher. À adapter à votre configuration : objets (articles, albums, …) liés aux points géolocalisés à afficher et groupes de mots-clés utilisés pour les légendes.

4°, être un wiki
à la wikipédia

Facultatif toujours, les pages révisions sont prévues. Voir à ce propos signaler-les-revisions-cote-public. Cela ne prend donc vraiment sens qu'avec le plugin Autorités. (Si ce n'est pas l'objectif, les références à, et les pages _révision_.html ne seront simplement pas exploitées)

5°, être coloré
le style bootstrap ayant été trouvé froid …