Catégories
Astuces et Design

Halfmoon: une alternative Bootstrap avec le mode sombre intégré

J'ai récemment lancé la première version de production de Halfmoon, un framework front-end que je construis depuis quelques mois. Ceci est un court article d'introduction sur ce qu'est le cadre et pourquoi j'ai décidé de le créer.

Le pitch des ascenseurs

Halfmoon est un framework front-end avec quelques éléments intéressants:

  • Mode sombre intégré directement dans: La création d'une version en mode sombre d'un site est intégrée et un jeu d'enfant.
  • Composants modulaires: La création de composants modulaires – tels que des formulaires, des barres de navigation, des barres latérales, des listes déroulantes, des toasts, des raccourcis, etc. – a été largement prise en compte pour créer des mises en page, même complexes comme les tableaux de bord.
  • JavaScript est facultatif: De nombreux composants trouvés dans Halfmoon sont conçus pour fonctionner sans JavaScript. Cependant, le framework est toujours livré avec une puissante bibliothèque JavaScript sans dépendances supplémentaires.
  • Toutes les classes CSS dont vous avez besoin: Les noms de classe devraient être instantanément familiers à quiconque a utilisé Bootstrap car c'était l'inspiration.
  • Compatibilité entre navigateurs: Halfmoon prend entièrement en charge presque tous les navigateurs sous le soleil, y compris les plus anciens comme Internet Explorer 11.
  • Facilement personnalisable: Halfmoon utilise des propriétés CSS personnalisées pour des éléments tels que les couleurs et les mises en page, ce qui facilite grandement la personnalisation des éléments à votre guise, même sans préprocesseur CSS.

À bien des égards, vous pouvez considérer Halfmoon comme Bootstrap avec une implémentation intégrée du mode sombre. Il utilise de nombreux composants Bootstrap avec un balisage légèrement modifié dans de nombreux cas.

OK, super, mais pourquoi ce cadre?

Chaque fois qu'un nouveau framework est introduit, la même question se pose inévitablement: Pourquoi avez-vous construit cela? La réponse est que j'adore les modes et les thèmes sombres. Les outils qui viennent avec un mode clair et un mode sombre (avec un interrupteur à bascule) sont mes préférés parce que je pense que pouvoir changer un thème sur un coup de tête me rend moins susceptible de m'ennuyer à le regarder pendant des heures. Je lis parfois dans des conditions de faible éclairage (priez pour mes yeux), et les modes sombres sont nettement plus confortables dans ce type de situation.

Quoi qu'il en soit, il y a quelques mois, je voulais me créer un outil simple qui facilite la mise en œuvre du mode sombre pour un projet de tableau de bord sur lequel je travaillais. Après avoir fait quelques recherches, j'ai conclu que je n'avais que deux options viables: soit choisir une bibliothèque de composants basée sur JavaScript pour un framework frontal – comme Vuetify pour Vue – soit débourser de l'argent pour un thème sombre premium pour Bootstrap (et je n'a pas aimé le look des gratuits). Je ne voulais pas utiliser de bibliothèque de composants parce que j'aime créer des sites Web simples rendus par serveur à l'aide de Django. C'est juste ma tasse de thé. Par conséquent, j'ai construit ce dont j'avais besoin: un cadre frontal gratuit et attrayant qui va dans le même sens que Bootstrap, mais comprend des thèmes clairs et sombres tout aussi beaux prêts à l'emploi.

Plans futurs

Je voulais juste partager Halfmoon avec vous pour vous faire savoir qu'il existe et est disponible gratuitement si vous recherchez un cadre extensible dans la même veine que Bootstrap qui donne la priorité au mode sombre dans l'implémentation.

Et, comme vous pouvez l’imaginer, je travaille toujours sur Halfmoon. En fait, j'ai beaucoup d'améliorations en tête:

  • Plus de composants
  • Plus d'options de personnalisation (à l'aide de variables CSS)
  • Plus d'exemples et de modèles
  • Meilleur outillage
  • Exemples d'accessibilité améliorés dans les documents
  • Implémentations JavaScript vanille de composants utiles, tels que la sélection multiple personnalisée (pensez à Select2, uniquement sans jQuery), les tables de données et les validateurs de formulaires, entre autres.

En bref, le plan est de créer un cadre vraiment utile lorsqu'il s'agit de créer des tableaux de bord complexes, mais qui reste idéal pour créer n'importe quel site Web. La documentation du cadre se trouve sur le site Web du projet. Le code est entièrement open-source et sous licence MIT. Vous pouvez également suivre le projet sur GitHub. Je serais ravi que vous puissiez le vérifier, laisser des commentaires, ouvrir des problèmes ou même y contribuer.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *