Partage de mes premiers tests "PluCSS pour un nul"
Franck-AWO
Member
dans Discussions
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
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 :
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 :
Un autre exemple avec themes/defaut/static.php :
Ensuite j'ai continué en personnalisant le style directement dans le fichier themes/defaut/css/plucss.css :
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
Voilà, un post long, qui pourra peut-être servir à d'autre...
Et suscitera peut-être des indications pour de bonnes manières ?
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
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
Voilà, un post long, qui pourra peut-être servir à d'autre...
Et suscitera peut-être des indications pour de bonnes manières ?
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
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!
Merci pour le compliment Den
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:
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).
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
A noter au passage l'intégration de différents extra-extensions comme :
[list=*]
[*]Pour des tableaux classables et filtrables : DataTables Table plug-in for jQuery[/*]
[*]Un lecteur vidéo : Flowplayer[/*]
[*]Encore des tableaux : sortable[/*]
[*]Des onglets en css : CSS3-only Tabstrip[/*]
[/list]
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
Encore et toujours un grand merci à tous ceux et celles qui font PluXml et ses Plugins. A suivre...