Un plugin JQuery pour une utilisation optimale de l'espace écran
L'optimisation de la manière dont l'espace est utilisé sur un écran est un élément clé d'une bonne conception Web, et en particulier de la conception réactive.
Il y a plusieurs façons d'aborder ce type de défi, et l'un des plus populaires est la disposition automatique des éléments dans un conteneur parent. Il est efficace et, lorsqu'il est bien exécuté, crée une mise en page à la fois attrayante et optimale du point de vue fonctionnel.
Si vous concevez un site réactif, vous trouverez certainement le besoin de réorganiser le contenu de manière dynamique, en fonction de la taille de l’écran de l’utilisateur. L'arrangement automatique du contenu est logique, car il réduit le temps passé à personnaliser les points d'arrêt pour chaque page et chaque élément.
Les sites avec un contenu en constante évolution (comme les blogs ou les boutiques en ligne) peuvent en particulier bénéficier d'un arrangement automatique. Après tout, voulez-vous vraiment entrer dans le code du site de votre client et ajuster les points d'arrêt et la mise en page s'ils décident soudainement d'écrire des articles de blog plus longs ou plus courts?
Faire tout cela à partir de zéro prend beaucoup de temps et dépasse les capacités de la plupart des concepteurs qui ne sont pas également des développeurs. Au lieu de cela, il est logique d'utiliser un plugin ou un framework préexistant.
JavaScript (y compris jQuery et d'autres bibliothèques) est la manière la plus courante de créer ce type de disposition, probablement en raison de sa compatibilité croisée. C'est ainsi que fonctionnent les efforts existants tels que vGrid, Wookmark et Masonry.
Freetile.js est un plugin jQuery récent qui permet ce type de mise en page dynamique, organisée et réactive. Il est utilisé comme moteur derrière Assemblage et Assemblage Plus depuis près de deux ans et est enfin disponible en tant que projet open source indépendant.
C'est différent des efforts existants dans cet espace pour quelques raisons. Il permet d'utiliser tous les éléments de taille sans avoir besoin d'une grille de colonnes de taille fixe. Cela vous évite d'avoir à spécifier une largeur de colonne appropriée à vos éléments. Et vous pouvez personnaliser l'algorithme qui évalue les positions d'insertion possibles pour chaque élément, ce qui vous permet d'exprimer des préférences telles que l'alignement et la proximité.
Il a une routine d'animation intelligente qui permet de distinguer facilement les éléments devant être animés et ceux qui ne devraient pas l'être. Spécifier l'animation dans le code est également facile.
L'utilisation de Freetile.js est simple à utiliser. Même si vous ne maîtrisez pas le langage JavaScript, vous devriez être en mesure de déterminer son utilisation assez rapidement.
Freetile.js est sous licence BSD et est disponible via GitHub.
Avez-vous utilisé Freetile.js? Qu'as-tu construit? Partagez vos expériences dans les commentaires.