[theme]3 colonnes basé sur "Holy Grail' 3‑Column Responsive Layout" en surcouche au thème de PluXml

gcyrillus-nomade

voici un thème en 3 colonnes basé sur le thème par défaut de pluxml et le thème 'responsive' en 3 colonnes de Matthew James Taylor. ( https://matthewjamestaylor.com/holy-grail-layout )

Sa particularité est de faire usage de balises personnalisées (Custom Element) de la plus simple façon.

Vous trouverez ce thème en téléchargement sur la page https://github.com/gcyrillus/Theme_HolyGrail

Le lien de téléchargement direct : https://github.com/gcyrillus/Theme_HolyGrail/archive/refs/heads/main.zip

cdt

petitpouyo

Yo tu l'avais pas déjà partagé celui-la ?

gcyrillus-nomade

Oui, proposé à ffffabien dans l'un de ses sujets. Il est remis ici pour une meilleure visibilité et à la critique
Cdt

cpalo

Bonjour,
Je n'ai pas trouvé à quel endroit que tu utilises des balises personnalisées (Custom Element).
Je ne connais pas; ça m'interessait donc de voir un exemple et en plus avec PluXml

gcyrillus-nomade

@cpalo Bonsoir,

Alors, ces balises personnalisée sont deux dans ce thème basé sur la feuille de style des thèmes 'holy grail' . feuille de style ou framework : r-c-min.css (peut-être aurais-je du laisser le fichier non minifier).
il y a <r-c> ouvrante dansheader.php et fermante dansfooter.php , puis <c1-1> dans footer.php .
D'autres subtilités CSS possibles le sont via des attribute sans valeurs (la il y a une petite erreur, le choix de data-attribute aurait permis de conservé une validité du code ).
Pour un thème en 3 colonne, il était alors nécessaire d'avoir un conteneur <r-c join> pour beneficier des styles de r-c-min.css . Ensuite il suffit de distribuer (cette fois-ci) les data-attributes disponibles pour le positionnement, tailles et comportements . pour main c'est ici data-lg1-2.

Basiquement, un custom element valide est une balise composée de deux mots séparés par un tiret milieu (l'idéal est que ça donne un sens sémantique et pas crypté ou en double emploi avec une balise HTML5 pour que cela soit pertinent ) <custom-element> . Note qu'une balise sans ce tirer milieux acceptera quand même d'être restyler mais se limitera à ça dans un usage possible et perrein . Une balise personnalisée valide , pourra être utiliser dans une balise template et compatible avec toutes ses autres usages (accessible via javascript/DOM/shadow DOM/ ...) .

Voilou, j’espère t'avoir éclairé un peu

cpalo

Merci pour ta réponse.
Très légèrement éclairé par curiosité j'irai approfondir en regardant plus près ton code.
Mais pas convaincu que cela simplifie l"écriture de mon thème.

gcyrillus-nomade

@cpalo Le code utilisé sur le thème ne vas pas t’éclairer des masses, là il n'a servi que de conteneur intermédiaire encapsulant en parties des portions du thème par défaut de façon à coller à la feuille de style supplémentaire.

Si tu veut creuser le sujet , regarde plutôt https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_custom_elements . Un exemple peut-être plus parlant : https://mdn.github.io/web-components-examples/popup-info-box-web-component/ où <popup-info> est utilisé pour afficher une image(icone) et un tootltip. Chose qu'une balise image ne peut pas faire seule , javascript ajoute et fini de personnalisée cette balise en y injectant une structure HTML . autre particularité, cette structure HTML injectée (en shadow dom) est imperméable aux feuilles de styles du document . On peut donc se créer une bibliothèque de balises personnalisée (complexes ou pas ) que l'on peut ensuite réutiliser dans différents projets et aussi https://developer.mozilla.org/fr/docs/Web/HTML/Element/template . C'est plutôt complet et effectivement , ces fonctionnalités ne sont pas franchement utile pour un thème

Cdt