Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Astuce PluCSS: connaitre le mode d'affichage (sml, med, lrg)

Rédigé par Stéphane Aucun commentaire

Cette astuce a été publiée sur le forum de PluXml par David Revoy. Parce qu'elle est très facile à mettre en place et peut être très utile pour les concepteurs de thème, j'ai trouvé dommage qu'elle reste noyée dans tous les sujets du forum.

Pour rappel, PluCSS est un framework css développé par l'équipe de PluXml qui gère le responsive design, c'est à dire que l'affichage s'adapte en fonction de la taille de l'écran (ordinateur, tablette, smartphone). Suivant donc la taille de l'écran, PluCSS utilise différentes balises reconnaissables par des préfixes sml (small),med (medium), lrg (large) afin d'adapter l'affichage en fonction de la résolution.

Exemple:

Déclarations dans le fichier plucss.css


.sml-text-center {
	text-align: center;
}

@media (min-width: 768px) {
	.med-text-left {
		text-align: left;
	}
}	
Déclarations dans le fichier header.php

<header class="header sml-text-center med-text-left" role="banner">
	<h1 class="no-margin">mainTitle('link'); ?></h1>
	<h2 class="h5 no-margin">subTitle(); ?></h2>
</header>
De cette façon simplement en utilisant sml-text-center et med-text-left comme ci-dessus, l'affichage sera centré sur un petit écran, mais justifié à gauche sur un affichage moyen (et large par défaut).

L'astuce proposée consiste à afficher en bas à droite du navigateur le mode d'affichage courant avec le texte SML, MED ou LRG. Pour sa mise en place, éditez par exemple le fichier sidebar.php de votre thème et copier-coller le code suivant, de préférence en bas du fichier.

NB: si vous utilisez le thème par défaut collez le code avant la balise </aside>


<div style="position: fixed; right: 0px; bottom: 0px; background: #FFF8BB; color: #B27951; z-index: 500 !important;">
	<div class="sml-show med-hide lrg-hide"> SML </div>
	<div class="sml-hide med-show lrg-hide"> MED </div>
	<div class="sml-hide med-hide lrg-show"> LRG </div>
</div>

Accédez à la page d'accueil de votre site. En redimensionnant la fenêtre de votre navigateur, le mode d'affichage utilisé sera affiché sur fond jaune en bas à droite.

Mode LRG:

Mode MED:

Mode SML:

Toute la documentation de PluCSS est disponible à cette adresse: http://plucss.pluxml.org/

Merci à David pour cette astuce. Je vous invite à visiter son site pour admirer son travail de dessinateur et d'illustrateur.
http://www.davidrevoy.com/

Fil RSS des commentaires de cet article

Écrire un commentaire

Quelle est la deuxième lettre du mot oslu ?
Top