Cette page GitHub répertorie les alternatives non-JS pour les fonctionnalités d'interface utilisateur communes
Combien de fois avez-vous voulu construire un diaporama rapide ou une fenêtre modale exclusivement CSS? Ce sont certains de les éléments les plus communs de l'interface utilisateur sur le web et maintenant vous pouvez les construire sans JavaScript.
Bien sûr, il est possible de frapper Google à la recherche de solutions. Mais pourquoi pas choisir parmi une liste organisée de superbes ressources?
C'est là qu'entre en jeu cette page GitHub. C'est intitulé "Vous n'avez pas besoin de JavaScript", et il offre une vaste liste de solutions réalisables pour éléments d'interface communs.
Une chose à noter est que ces codes sont pas une solution miracle.
Tous les éléments de la liste ne prennent pas en charge tous les navigateurs et nombre de ces solutions ne sont pas entièrement capables de gérer une dégradation progressive ou des problèmes avec les navigateurs mobiles. Donc vous aurez besoin de examiner chacun individuellement au cas par cas.
Cependant, si vous mourez solutions CSS pures alors ce GitHub vous a couvert.
La liste comporte plus 20 éléments d'interface utilisateur différents avec de nombreuses solutions de premier plan, telles que:
- Menus hamburger
- Info-bulles
- Onglets
- Galeries d'images
- Menus déroulants
- Et bien plus.
Chaque projet liens vers une démonstration de CodePen où vous pouvez le voir en direct de même que exemple de code source.
Notez ce rapport GitHub spécifique n'a pas de code réel en elle. C'est plutôt juste une liste de démos CodePen avec solutions non-JS aux problèmes d'interface courants.
Ceci est la ressource idéale pour mettre en signet pour référence future et rester à proximité si nécessaire.
Vous êtes libre de contribuer en contactant n'importe qui de la page principale de GitHub si vous avez des idées ou des suggestions pour de nouvelles ressources.
Vous êtes libre de copier n'importe quel code source de l'une de ces démos et les réutiliser dans vos projets.
Assurez-vous juste que vous vérifiez l'onglet propriétés CSS avant de copier quoi que ce soit parce que certains contient des bibliothèques supplémentaires.
Dans l’ensemble, c’est un fantastique dépôt GitHub et il est beaucoup plus facile à utiliser que de chercher Google pour une solution parfaite.
Vérifier la la page complète de GitHub ici, et si tu veux voir tous les changements potentiels vous pouvez voir ceux dans le onglet demandes de tirage.
