[THÈME] pluxzero : un thème sans style

Gzyg · février 2018

Bonjour,

Un thème original dans le sens où il ne possède aucune règle css par défaut.
C'est un thème nu à destination des intégrateurs qui préfèrent partir d'une version dépouillée de PluXml (sans PluCss) mais aussi à destination des débutants qui peuvent ainsi voir rapidement l'effet d'une règle css.

Archive en cours de modération sur Ressources.

Version 0.2

Téléchargeable ici : https://eriicj.xyz/plx/th/pluxzero/zip/pluxzero-0.2.zip

Démo et explication disponible ici : https://eriicj.xyz/plx/th/pluxzero

à plus,

Gzyg

bazooka07 · février 2018

Bonne idée !

Cela permet de choisir son système de grille (j'aime bien la saucisse alsacienne qui utilise Flex ) ou sinon pour faire sans grille.

T'aurais laisser les ID notamment dans la sidebar. Pas facile de s'y repérer avec des ":nth-of-type", ainsi que les ID des articles dans la home page.
Je n'ai pas trouvé le lien vers l'archive Zip.
Tu as factorisé la boucle d'articles qui se trouve en 3 exemplaires dans les fichiers home archive et categorie ?

Oups ! tu as fait sauté le <link> qui pointe vers la compilation des CSS des plugins "plugins/site.css". Pas cool !

Un autre sympa et qui manque à PluXml, c'est de prendre en charge le media print.
Parce que être forcé d'imprimer le bandeau de la page, la barre de menu, la sidebar et le pied de page, alors qu'on voulait juste imprimer le contenu de l'article qui tenait facilement sur une page et qu'il faut en jeter 3 pages.

C'est pourtant pas compliqué.
Il suffit d'ajouter une class "no-print" dans les containers qu'on n'a pas besoin ( sidebar, nav, header, footer ) et d'ajouter dans une régle CSS comme :

[== CSS ==]
.no-print {
  display: hide;
}

Gzyg · février 2018

Hello,

L'archive est dans Ressources mais la modération n'est pas encore passé

Téléchargeable ici : https://eriicj.xyz/plx/th/pluxzero/zip/pluxzero.zip

"Factorisé" est un grand mot mais c'est l'idée. Regrouper le code commun dans un fichier unique.

Le link des plugins a sauté car je considère (c'est une vieille polémique) que les plugins ne doivent pas embarquer de css (pour le dev ok, pour l'intégration non).

Les ID des articles ont été conservés. Pas compris pour les ID de la sidebar ?

Le "print" (à mon avis) va au-delà d'un simple display : hide mais c'est un bon début.

Merci de ton retour

à plus,

Gzyg

bazooka07 · février 2018

Pour être plus clair, voici un extrait de sidebar.php avec un Id pour les <figure>

[== CSS ==]
<aside class="site-aside">

	<figure id="last-arts" class="site-aside-figure">
		<figcaption class="site-aside-title">Articles récents</figcaption>
		<div class="site-aside-content">
			<ul class="site-aside-list">
				<li class="site-aside-item"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/article1/pluxzero-un-no-theme-pour-pluxml">pluxzero : un no-theme pour PluXml</a></li>			</ul>
		</div>
	</figure>

	<figure id="last-comms" class="site-aside-figure">
		<figcaption class="site-aside-title">Commentaires récents</figcaption>
		<div class="site-aside-content">
			<ul class="site-aside-list">
				<li class="site-aside-item"><a href="https://eriicj.xyz/plx/th/pluxzero/article1/pluxzero-un-no-theme-pour-pluxml#c0001-1">Ceci est un premier commentaire !</a> Par pluxml</li>			</ul>
		</div>
	</figure>

	<figure id="cats-list" class="site-aside-figure">
		<figcaption class="site-aside-title">Catégories</figcaption>
		<div class="site-aside-content">
			<ul class="site-aside-list">
				<li class="site-aside-item" id="cat-2"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/categorie2/accessibilite">Accessibilité</a> (1)</li><li class="site-aside-item" id="cat-3"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/categorie3/integration">Intégration</a> (1)</li>			</ul>
		</div>
	</figure>

	<figure id="tags-list" class="site-aside-figure">
		<figcaption class="site-aside-title">Mot(s)-clef(s)&#8239;:</figcaption>
		<div class="site-aside-content">
			<ul class="site-aside-list">
				<li class="site-aside-item tag tag-size-1"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/tag/figure">figure</a></li><li class="site-aside-item tag tag-size-1"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/tag/title">title</a></li><li class="site-aside-item tag tag-size-1"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/tag/placeholder">placeholder</a></li><li class="site-aside-item tag tag-size-1"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/tag/skip-links">skip-links</a></li><li class="site-aside-item tag tag-size-1"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/tag/aria">ARIA</a></li>			</ul>
		</div>
	</figure>

	<figure id="archs-list" class="site-aside-figure">
		<figcaption class="site-aside-title">Archives</figcaption>
		<div class="site-aside-content">
			<ul class="site-aside-list">
				<li class="site-aside-item" id="archives-201802"><a class="noactive" href="https://eriicj.xyz/plx/th/pluxzero/archives/2018/02">février 2018</a> (1)</li>			</ul>
		</div>
	</figure>		

</aside>

Cela pourra les graphistes qui ne connaissent pas trop les règles comme :first-child, :nth-of-type(), ...
la class "site-aside-figure" me semble inutile. On peut très bien utiliser le sélecteur "aside.site-aside figure" à la place.

Gzyg · février 2018

Ok je vois. Mais il est toujours préférable de cibler directement un élément plutôt que de partir de son parent.

Le .site-aside-figure dans ce cas remplace un .site-aside > figure. Au cas où un de ces élément figure doit être stylisée différemment (même provisoirement), il suffit alors de lui ajouter une classe spécifique. .site-aside-figure-last-arts par exemple, en conservant sa classe d'origine. Ainsi, on évite les nth-child et les id.

En pratique la page article.php fonctionne de cette façon : comme elle n'est qu'une extension du fichier post.php tous les éléments de cette page ont une classe préfixée par site-post.
Ainsi, une propriété sur site-post-title se déclinera à l'identique en mode home ou en mode article.
Si on souhaite différencier l'affichage entre ces deux modes, les éléments de la page article.php possèdent - en plus du préfixe site post - un préfixe site-single qu'il suffira alors de cibler.

à plus,

Gzyg

Gzyg · février 2018

Hello,

Version 0.2

Lien de téléchargement dans le premier post.

à plus,

Gzyg

bazooka07 · février 2018

Bonjour,

Je n'ai pas encore étudié en détail ton thème mais ta démarche m'intéresse beaucoup.

Voici quelques retours.

Dans ton archive Zip tu peux choisir un autre nom que theme pour le dossier racine. PluxZero me semble une bonne idée.
Cela permettra comme pour les autres thèmes de déplier l'archive directement dans le dossier themes de PluXml.

Dans le fichier d'aide, remplacer "pluxzero est un thème vierge" par PluxZero est un gabarit ou un thème de départ"

Renommer post.php en posts.php puisqu'il s'agit d'une liste.
A ce propos, j'avais tenté un pull request pour le thème par défaut. https://github.com/pluxml/PluXml/pull/267

Je doute de l'intérêt du préfixe "site-" pour nommer les classes. Cela surcharge le code.

Les archives ne sont pas souvent consultées mais prennent beaucoup de places dans la sidebar.
Une liste déroulante avec select au lieu d'un <ul> <li>... est une solution plus pertinente. ( voir exemple ici https://www.echecs-annonay.fr/ )

Il y a du texte en dur dans aside.php "Structuré par <a href="">pluxzero</a>". Pas facile pour s'adapter au visiteur non francophone.

Les "dirname(__FILE__)" dans les include sont inutiles. "include_path" commence toujours par './' Pire ils ralentissent PluXml puisqu'il faut évaluer le résultat de la fonction. De plus include est une directive pas une fonction. donc les parenthèses n'ont pas lieu d'être. voir exemple sur php.net

Les éditeurs syntaxiques ne font pas d'appariement pour les ':' et ';' dans les constructions "while($plxShow->plxMotor->plxRecord_arts->loop()): ... endwhile:". Préférer les constructions avec les curly brackets {}

Regrouper home categorie tags et archive dans un seul post n'est pas pertinent. Certains peuvent avoir besoin d'un template particulier pour une catégorie donnée

Gzyg · février 2018

Salut bazooka07 et merci pour ces retours.

OK pour :

1) Pour le nom du zip, effectivement, c'est une boulette. Je vais corriger.

2) Le préfixe "site-" n'est pas essentiel mais tous mes thèmes l'utilisent. C'est un défaut "héréditaire". Je vais y réfléchir et tenter de m'en passer...

3) Le texte en dur est une autre boulette. Je vais corriger.

Pas OK pour :

1) Une liste déroulante avec un <select> est un "tue-design".

Plus sérieusement, je ne trouve pas cela ergonomique (l'accès à l'information n'est pas direct) et l'accessibilité n'est pas garantie (https://webaim.org/techniques/forms/controls).

2) La factorisation me parait inévitable dans la façon dont est conçu PluXml : afficher les mêmes informations pour un article ou un chapô d'article dans ces quatre modes (home, archives, categorie, tag). Pour l'apparence, direction la feuille de style. C'est pour cette raison que les trois derniers modes sont encapsulés dans une balise <section class="site-archives-mode"> où mode est soit date soit categorie soit tag. Styler différemment une catégorie est une affaire de design particulier et ne peut pas être pris en compte dans un template de base. C'est d'ailleurs ce que tu sembles défendre dans ton pull-request. L'idéal, comme écrit dans le fichier d'aide, serait de n'avoir qu'un seul fichier et un code conditionnel pour déterminer le mode d'affichage (classes css incluses). Mais le php et moi ne sommes pas copains.

Du coup, je ne doute pas de la pertinence de tes remarques sur les include et l'appariement mais je ne sais pas du tout quoi en faire... Et la doc PHP est juste incompréhensible !

(et ce post n'arrange rien : https://stackoverflow.com/questions/2220443/whats-better-of-requiredirname-file-myparent-php-than-just-require)

à plus,

Gzyg

bazooka07 · février 2018

D'après la lecture du post chez Stackoverflow, il semble que la meilleure solution est
include './fichier.php';
Cela évite de parser le paramètre include_path déclaré dans le php.ini
Un truc intéressant à faire est d'exécuter les instructions suivantes à la racine du site dans un terminal :

[== bash ==]
grep include *.php
grep include core/*/*.php

Dans le 1er cas, côté site, c'est ce principe qui est appliqué puisque PLX_CORE est égal à './'
Dans le 2ème cas côté admin, c'est l'anarchie !
prepend.php reprend le principe précèdent avec PLX_CORE égal à '../../'
Par contre pour les autres fichiers, c'est "dirname(__FILE__)" à gogo. Autant le remplacer par './'. C'est un bug à corriger dans PluXml.
Pas très cohérent tout cela

Un truc que tu as zappé pour l'instant :
Dans le thème par défaut, il est possible d'afficher un article sans sidebar
Pour l'instant, je definis une constante qui affiche ou non la sidebar selon le template qui est appelé.
L'idéal serait d'avoir une option dans l'édition de l'article pour afficher la sidebar ou non.

[THÈME] pluxzero : un thème sans style

Réponses