Bonjour,

Je vous présente une petite bibliothèque développée dans le cadre d'un projet, et qui mérite à mon avis son petit dépot Github : "ResponsiveClass" (https://github.com/nbrignol/responsive-class).

Son objectif : Déterminer dynamiquement la classe d'un élément HTML selon une média-query.

- D'abord on associe un format avec une média-query. Exemple : "small" correspond à "(max-width: 600px)", "large" à "(min-width: 1100px)", etc.
- Ensuite, on détermine pour chacun de ces formats les classes que l'on veut appliquer à notre élément HTML :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<article class="rc myBaseArticle" class-small="firstVariant" class-medium="secondVariant" class-large="thirdVariant"> ... </article>
- Enfin grace à cette lib, à chaque resize, l'attribut "class" de l'élément sera mis à jour selon la classe définie dans l'attribut correspondant au format actuel de la page (small, large, etc).

Pour moi c'est une solution simple pour :
- Réduire le nombre de média-query dans le CSS
- Définir des classes sémantiques pour l'affichage de mes éléments et de leur variantes.
- D'éviter d'utiliser des classes de mise en page dédiées comme dans Bootstrap

Qu'en pensez vous (Plus d'infos et un exemple sur https://github.com/nbrignol/responsive-class !) ?