Objectif

L'objectif de ResponsiveClass est de déterminer dynamiquement la classe d'un élément HTML selon une média-query.

Usage

ResponsiveClass s'utilise simplement :

<article class="rc myBaseArticle" class-small="firstVariant" class-medium="secondVariant" class-large="thirdVariant"> ... </article>

A 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).

Par défaut, les formats "small", "medium" et "large" sont configurés, mais il est possible de créer n'importe quel format à partir de n'importe quelle media-query.

Quel interêt ?

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 non-sémantiques comme le fait Bootstrap

Disponible sur Github

Téléchargez le code (pur javascript) et consultez la documentation détaillée sur https://github.com/nbrignol/responsive-class