PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 19/02/2015 19:17:35

Franck-AWO
Membre
Lieu : Chelles
Inscription : 10/04/2013
Messages : 16
Site Web

Partage de mes premiers tests "PluCSS pour un nul"

Bonjour,

Mon premier objectif est de découvrir le framework CSS PluCSS 1.0 et d'apprendre à m'en servir tout en confectionnant un thème de base à partir du thème par défaut livré avec Pluxml 5.3.1.
Ce qui me faciliterait la tâche pour de la mise en ligne de futurs sites.
Accessoirement, j'aimerais évaluer si avec PluCSS je pourrais faire l'économie d'installer des CMS poids lourd dans le seul but d'utiliser les nombreux thèmes "responsives" conçus pour eux ?
Pour commencer, je partage ci-dessous mes premiers tests "PluCSS pour un nul" tout en espérant le regard et les commentaires bienveillants des experts quant aux bonnes manières de mettre en œuvre ce beau cadeau smile A l'heure du présent post, les tests ont lieu sur cette maquette qui va peut-être évoluer rapidement, ou pas...

Donc je commence avec le thème par défaut (themes/defaut/) auquel j'associe le fichier CSS livré avec PluCSS, pluscss.css, comme expliqué ici. C'est à dire en ajoutant une ligne dans le fichier themes/defaut/header.php, et je me permets d'en commenter/invalider une autre :

[== CSS ==]
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/reset.css" media="screen"/>
<!-- <link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/style.css" media="screen"/> --> <!-- invalidée -->
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/plucss.css" media="screen"/> <!-- ajoutée -->

Il faut donc copier le fichier plucss.css fourni avec PluCSS dans le répertoire themes/defaut/css/.

Il m'a fallu un petit temps pour lire et comprendre grossièrement le fichier de style plucss.css, et pour imaginer comment intégrer ses éléments dans les fichiers du thème themes/defaut/archives.php, article.php, categorie.php, footer.php, header.php, home.php, static-full-width.php, static.php, et tags.php. Dans ces différents fichiers j'ai fini par imbriquer chaque bloc (header, nav, container et footer) dans un div avec la class grid, et à chaque bloc j'ai ajouté les classes qui me conviennent, dans ce cas : "col sml-12 sml-centered med-centered lrg-7 lrg-centered". Ca semble bien fonctionner mais est-ce bien là la bonne manière ?

Voici une exemple avec un extrait de themes/defaut/header.php :

[== PHP + HTML ==]
<body id="top">

	<div class="grid">
		<header role="banner" class="col sml-12 sml-centered med-centered lrg-7 lrg-centered">

			<h1 class="text-center">
				<?php $plxShow->mainTitle('link'); ?>
			</h1>
			<h2 class="text-right">
				<?php $plxShow->subTitle(); ?>
			</h2>

		</header>
	</div> <!-- grid -->

	<div class="grid">
		<nav role="navigation" class="menu col sml-12 sml-centered med-centered lrg-7 lrg-centered">

			<ul id="static-nav">
				<?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>
                                <?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
			</ul>

		</nav>
	</div> <!-- grid -->

Un autre exemple avec themes/defaut/static.php :

[== PHP + HTML ==]
<?php include(dirname(__FILE__).'/header.php'); ?>

<section>

<div class="grid">

        <div class="container col sml-12 sml-centered med-centered lrg-7 lrg-centered">

		<div class="width-sidebar">

			<article role="article" id="static-page-<?php echo $plxShow->staticId(); ?>">

				<header>
					<h1>
						<?php $plxShow->staticTitle(); ?>
					</h1>
				</header>

				<section>
					<?php $plxShow->staticContent(); ?>
				</section>

			</article>

		</div>

		<?php include(dirname(__FILE__).'/sidebar.php'); ?>

	</div>

</div>

</section>

<?php include(dirname(__FILE__).'/footer.php'); ?>

Ensuite j'ai continué en personnalisant le style directement dans le fichier themes/defaut/css/plucss.css :

[== CSS ==]
html {
        color: #444;
        font-family: helvetica, arial, sans-serif;
        font-size: 93,75%;
/* au lieu de : font-size: 15px; qui selon ce que je comprends de
http://forum.pluxml.org/viewtopic.php?id=4858 ça devrait revenir au même ?*/
        line-height: 1.4;
        min-height: 101%;
/* pour éviter le décalage à gauche quand on affiche une page avec l'ascenseur */
}

body {
        margin: 3rem 2rem;
/* à la place de : margin: 0; pour décoller des bords (internes de la fenêtre du navigateur:)*/
}
.menu {
        font-size: 0rem;
        margin: 0 0 1rem 0;
/* à la place de : margin: 0; pour pour aligner le 1er élément de menu
avec la marge gauche du contenu des pages, des articles, etc */
        padding-left: 0;
}

.float-center {
        display: block;
/* comme proposé dans la discussion http://forum.pluxml.org/viewtopic.php?id=4891 */
        margin-left: auto;
        margin-right: auto;
}

@media (min-width: 768px) {
[...]
        .menu li:first-child {
                margin-left: 1rem;
/* à la place de : margin: 0; pour aligner le 1er élément de menu
avec la marge gauche du contenu des pages, articles, etc */
        }
[...]

@media (min-width: 1024px) {
[...]
        .menu li:first-child {
                margin-left: 2rem;
/* à la place de : margin: 0; pour aligner le 1er élément de menu
avec la marge gauche du contenu des pages, articles, etc */
        }
[...]

La bonne nouvelle c'est que tout cela fonctionne et se comporte effectivement parfaitement bien à mon œil sur :
Debian 8 : Iceweasel 31.3.0, Chrome 39.0.2171
Android 4.3 : Internet 4.3-I9300, Chrome 40.0.2214
Mac OS X 10.7.5 : Opera 12.16, FireFox 35.0.1, Safari 6.1.6
iOS 6.1.6 : Safari
iOS 7.1 : Safari

Merci PluCSS smile

Voilà, un post long, qui pourra peut-être servir à d'autre...
Et suscitera peut-être des indications pour de bonnes manières ?

Hors ligne

#2 20/02/2015 02:57:24

Den
Membre
Lieu : Québec
Inscription : 22/10/2009
Messages : 393
Site Web

Re : Partage de mes premiers tests "PluCSS pour un nul"

Salut,

Très bon début!

En ce qui concerne les résultats de la validation W3C CSS stylesheets

Une erreur ligne 26 : Propriété erronée : font-size Trop de valeurs, ou valeurs non reconnues : 93,75%

Au plaisir! wink

Hors ligne

#3 20/02/2015 10:03:44

Franck-AWO
Membre
Lieu : Chelles
Inscription : 10/04/2013
Messages : 16
Site Web

Re : Partage de mes premiers tests "PluCSS pour un nul"

Hello,

Merci pour le compliment Den smile

Ah oui, le validator, comment ai-je pu l'oublier ! Et effectivement, les virgules dans les valeurs c'est pas top.

Corrigé, et en plus l'apparence du texte est plus jolie cool

Hors ligne

#4 26/02/2015 11:41:36

Jos
Pluxml Staff
Lieu : Région de Grenoble
Inscription : 04/11/2011
Messages : 1 128
Site Web

Re : Partage de mes premiers tests "PluCSS pour un nul"

Bonjour,

Je n'ai pas encore finit de peaufiner PluCSS mais j'aime bien ton initiative. Par contre, pour t'éviter des bugs, je te conseille de ne pas modifier plucss.css et d'ajouter tes styles dans un autres fichiers (à moins que tu maîtrise bien le css).

Hors ligne

#5 26/05/2017 11:17:41

Franck-AWO
Membre
Lieu : Chelles
Inscription : 10/04/2013
Messages : 16
Site Web

Re : Partage de mes premiers tests "PluCSS pour un nul"

Bonjour bonjour,

Alors finalement, depuis mes premières découvertes du framework CSS PluCSS 1.0 en février 2015..... j'ai quand même trouvé le temps de mettre en ligne deux sites qui en bénéficient heureusement j'espère : http://florencebarruel.fr  et  https://swip.pw.

En conclusion : j'ai appris tellement de choses que je serais encore en train de les écrire si j'avais du..... et par rapport à mon intention de départ "évaluer si avec PluCSS je pourrais faire l'économie d'installer des CMS poids lourd dans le seul but d'utiliser les nombreux thèmes "responsives" conçus pour eux" je dis : évaluation concluante  wink

A noter au passage l'intégration de différents extra-extensions comme :

Ok, maintenant il me reste encore à tester les mises à jour (PluXml, PluCSS, Plugins et autres extra-extensions) et surtout le debug avec CSS Validator et consorts... et pourquoi pas en profiter pour tester Visual wizard wink

Encore et toujours un grand merci à tous ceux et celles qui font PluXml et ses Plugins. A suivre...

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés