JavaScript ou CSS ?
Scith
Member
Salut,
J'utilisais anciennement Boostrap avec certains composants javascript et jquery. J'essaye de passer à PluCSS car je n'avais pas besoin d'un mastodonte comme Bootsrap pour mon modeste blog, PluCSS est donc plus dans la philosophie PluXML.
Par contre il me manque quand même plusieurs éléments que j'utilisais dans Boostrap :
[list=*]
[*]Les Panels et dans une moindre mesure les Wells[/*]
[*]Les collapse et les accordéons[/*]
[*](Les animations, transitions, fade au scroll, etc ...)[/*]
[/list]
Les panels et wells j'ai réussi à rajouter ça dans mon thème personnalisé sans soucis.
Pour le reste, j'ai deux options il me semble : full CSS3 ou javascript.
[list=*]
[*]Full CSS3 : les collapse et accordéons ne semblent pas compatibles avec les anciennes versions d'IE (comme la plupart de PluCSS on dirait ?). Les animations pareil et ne peuvent pas être liées au scroll[/*]
[*]Javascript : compatible avec tous les navigateurs (on dirait), mais est-ce vraiment dans la "philosophie" de PluXML/PluCSS ? Surtout avec un truc comme jQuery, qui risque d'être de l'overkill ? Sinon il y a aussi des librairies légères et spécialisées comme : https://github.com/julianlloyd/scrollReveal.js[/*]
[/list]
En CSS3, pour faire collapse et accordéon j'ai rajouté des classes toggle :
Exemple avec un bouton :
Du coup que pensez-vous de ces éléments CSS vs. JavaScript ? Auriez-vous éventuellement des librairies JavaScript ultra-légères dans l'esprit PluXML/PluCSS ?
Pensez-vous qu'il y a matière à débat ?
Enfin, que pensez-vous de la compatibilité IE6-7-8-9 ?
Merci
J'utilisais anciennement Boostrap avec certains composants javascript et jquery. J'essaye de passer à PluCSS car je n'avais pas besoin d'un mastodonte comme Bootsrap pour mon modeste blog, PluCSS est donc plus dans la philosophie PluXML.
Par contre il me manque quand même plusieurs éléments que j'utilisais dans Boostrap :
[list=*]
[*]Les Panels et dans une moindre mesure les Wells[/*]
[*]Les collapse et les accordéons[/*]
[*](Les animations, transitions, fade au scroll, etc ...)[/*]
[/list]
Les panels et wells j'ai réussi à rajouter ça dans mon thème personnalisé sans soucis.
Pour le reste, j'ai deux options il me semble : full CSS3 ou javascript.
[list=*]
[*]Full CSS3 : les collapse et accordéons ne semblent pas compatibles avec les anciennes versions d'IE (comme la plupart de PluCSS on dirait ?). Les animations pareil et ne peuvent pas être liées au scroll[/*]
[*]Javascript : compatible avec tous les navigateurs (on dirait), mais est-ce vraiment dans la "philosophie" de PluXML/PluCSS ? Surtout avec un truc comme jQuery, qui risque d'être de l'overkill ? Sinon il y a aussi des librairies légères et spécialisées comme : https://github.com/julianlloyd/scrollReveal.js[/*]
[/list]
En CSS3, pour faire collapse et accordéon j'ai rajouté des classes toggle :
[== CSS ==]
.toggle{
margin: 10px auto 30px auto;
}
.toggle input{display: none;}
.toggle .toggle-content{
margin-top: -1px;
overflow: hidden;
max-height: 0px;
position: relative;
z-index: 10;
-webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.toggle input:checked ~ .toggle-content{
-webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
max-height: 9999px;
}
.toggle input, .toggle input + label .toggle-less, .toggle input:checked + label .toggle-more {display: none;}
.toggle input:checked ~ .toggle-content {display: block;}
.toggle input:checked + label .toggle-less {display: inline;}
.reversed {display: flex; flex-direction: column-reverse;}
.toggle label.button {display: inline-block;height: auto;}
.toggle label{position: relative;display: block;cursor: pointer;}
Exemple avec un bouton :
[== HTML ==]
<div class="toggle">
<input type="checkbox" id="ac-0" name="ac-0" />
<label class="button red" for="ac-0"><span class="toggle-more"><i class="fa fa-plus-circle"></i></span><span class="toggle-less"><i class="fa fa-minus-circle"></i></span> View</label>
<section class="toggle-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sequi quidem officia quis, repellendus voluptas voluptatibus in adipisci magnam consectetur, reprehenderit laborum ducimus ipsum dolores dicta vero. Laudantium inventore, reprehenderit!</p>
</section>
</div>
Du coup que pensez-vous de ces éléments CSS vs. JavaScript ? Auriez-vous éventuellement des librairies JavaScript ultra-légères dans l'esprit PluXML/PluCSS ?
Pensez-vous qu'il y a matière à débat ?
Enfin, que pensez-vous de la compatibilité IE6-7-8-9 ?
Merci
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
PluCSS n'est prévu pour avoir des composants JavaScript. Tu peux toujours en rajouter par toi même çà ne devrait pas poser de problèmes. Pour certains éléments que tu as cité, j'aurais tendance à utiliser du JavaScript pour éviter les soucis.