PluXml.org

Blog ou CMS à l'Xml

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

#1 03/06/2015 16:35:53

Scith
Membre
Inscription : 23/05/2015
Messages : 36

JavaScript ou CSS ?

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 :

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.

  • 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

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>

Mais ça marche aussi avec des accordéons ou des accordéons/panel (comme Boostrap).


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

Dernière modification par Scith (03/06/2015 19:01:30)

Hors ligne

#2 04/06/2015 23:41:46

Jerry Wham
Membre
Inscription : 13/07/2011
Messages : 2 549
Site Web

Re : JavaScript ou CSS ?

Il y a zepto.js (http://zeptojs.com/) : 9 Ko compressée


Mangez un castor, vous sauverez un arbre !

J'ai la tête dans le  ...code

Hors ligne

#3 05/06/2015 00:48:18

Francis
Membre
Inscription : 19/11/2011
Messages : 407
Site Web

Re : JavaScript ou CSS ?

Et aussi minified.js => http://minifiedjs.com : 4 à 8 Ko compressé, suivant la version.

Hors ligne

#4 12/06/2015 08:41:37

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

Re : JavaScript ou CSS ?

Bonjour,

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.

Hors ligne

#5 13/06/2015 12:39:54

Scith
Membre
Inscription : 23/05/2015
Messages : 36

Re : JavaScript ou CSS ?

Ok super, merci pour les conseils smile

Hors ligne

Pied de page des forums

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