Migration UI de SeedboxSync : De Bulma à Bootstrap

Migration UI de SeedboxSync : De Bulma à Bootstrap

Dans le cadre du développement continu de SeedboxSync, j’ai récemment entrepris un chantier important côté front-end : remplacer le framework CSS Bulma par Bootstrap… J’en vois déjà certains se dirent que Bootstrap en 2026 c’est loin d’être le top mais je dois avouer ne pas être fan de Tailwind (ni de Bootstrap au final…).

Les migrations de frameworks CSS ne sont jamais des décisions à prendre à la légère. Si ce choix a apporté son lot de bénéfices et de réponses à mes besoins d’intégration, tout n’est pas parfait pour autant. Voici un retour d’expérience complet sur les raisons de ce passage et mes constats au quotidien.

Pourquoi quitter Bulma ?

En 3 mot : pour des info-bulles (a.k.a tooltip).

Pour faire plus long et plus complet : Bulma a accompagné les début de SeedboxSync. C’est un framework élégant, basé sur Flexbox, purement CSS et très agréable à prendre en main. Mais avec le temps, deux bloqueurs principaux ont fini par se dresser :

  1. Un écosystème au ralenti : Le projet Bulma est aujourd’hui très calme. Les mises à jour se font rares et la communauté autour du projet semble marquer le pas.
  2. Le manque de composants prêts à l’emploi : Bulma reste un framework CSS très épuré, ce qui implique de devoir recréer ou intégrer des briques soi-même. Un exemple très parlant : les tooltips. Pour afficher un simple tooltip capable de gérer du texte multi-ligne, j’ai eu un mal fou à dégoter une dépendance tierce encore maintenue et compatible.

Face à ces limites, le besoin d’un écosystème plus riche, robuste et activement maintenu s’est imposé.

Bootstrap : Ce qui fâche (et ce qui manque)

Soyons honnêtes : tout n’est pas rose avec Bootstrap ! Le framework traîne encore quelques casseroles techniques et choix d’implémentation dérangeants.

  • La dette Node Sass vs Dart Sass : Bootstrap s’appuie encore historiquement sur node-sass au lieu d’avoir effectué une transition franche vers dart-sass (comme Bulma l’a fait). Résultat : sur la partie tooling CSS/Sass, Bootstrap accuse un vrai retard par rapport à ce que propose Bulma. J’attends avec impatience Bootstrap 6 qui devrait enfin apporter le support natif de Dart Sass !
  • Une avalanche de dépréciations : À cheval entre plusieurs versions et méthodes, la gestion des classes Sass et utilitaires génère pas mal d’avertissements de dépréciation au build. D’où la configuration pour les faire taire.
  • L’absence de certains composants HTML natifs : Par exemple, l’absence de stylisation directe sur la balise native <progress>. Pour afficher une barre de progression avec Bootstrap, il faut obligatoirement repasser par un assemblage de <div> (.progress > .progress-bar), ce qui nuit à la sémantique HTML pure.
  • L’approche de la gestion du Thème (Dark / Light) : C’est un point de frustration majeur. Pour gérer le mode sombre, le mode clair ou respecter la préférence du navigateur (prefers-color-scheme), Bootstrap impose l’utilisation de scripts JavaScript pour basculer les attributs sur le DOM. Là où Bulma gère très élégamment les 3 modes en pure CSS via les media queries, Bootstrap alourdit la logique avec du JS dédié.

Pourquoi le changement reste bénéfique

Malgré ces reproches, la bascule vers Bootstrap apporte une vraie valeur ajoutée pour SeedboxSync :

  • Je maîtrise Bootstrap depuis des années (voir décennies).
  • Un catalogue de composants ultra-complet : Plus besoin de chercher des plugins tiers bancals pour les tooltips, modals, popovers ou dropdowns. Tout est fourni, testé, accessible et maintenu au même endroit.
  • Pérennité et documentation : En optant pour le framework UI le plus populaire du web, je m’assure d’avoir une documentation complète, des réponses rapides sur les forums et une maintenance garantie sur le long terme.
  • Grace à Sass, je peux ne charger que les composants nécessaires.

Conclusion

Ce passage de Bulma à Bootstrap est un compromis pragmatique. Bulma conserve une philosophie CSS pure et une gestion du dark mode plus élégante, mais le manque de composants natifs et son activité au ralenti devenaient un frein au développement.

En attendant un Bootstrap 6 dépoussiéré (notamment sur la partie Sass/Dart Sass), cette migration permet à SeedboxSync d’appuyer son interface sur une base solide, maintenue et prête à évoluer.

Avatar de Guillaume Kulakowski

À propos de l’auteur

Commentaires

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. Découvrez comment les données de vos commentaires sont traitées.

Derniers articles sur le journal

Articles à la une