Bootstrap

Depuis plus d’une douzaine d’années, j’utilise le framework CSS Bootstrap pour faire la partie graphique de mes sites web. Au début, j’ai utilisé Bootstrap “pur”, mais je suis vite passé aux thèmes gratuits et payants. Passer par un thème permet d’avoir un aspect très différent du Bootstrap de base, sans perdre du temps à choisir les couleurs et les polices de caractères.

(Au passage, pour les thèmes gratuits et sous licence libre, je vous conseille le site Bootswatch. Pour les thèmes gratuits et payants, je vous conseille Bootstrapmade.)

Mais le temps passant, j’ai trouvé que les thèmes étaient souvent d’une lourdeur incroyable. Comme ils essayent de répondre à beaucoup de besoins différents, ils embarquent un grand nombre de bibliothèques Javascript et de fontes inutiles. Et quand on envoie ces fichiers sur un CDN, c’est pénible. Donc il faut soit accepter tous ces fichiers en trop, soit passer énormément de temps à faire le ménage.

PicoCSS

L’année dernière, je travaillais sur le projet qui allait devenir ServerTracker, et j’ai voulu essayer un autre framework. Je me disais qu’il serait intéressant de tester une alternative légère à Bootstrap.

J’en ai passé plusieurs en revue : PicoCSS, Pure, Chota, Milligram, Bulma, UIkit, Röcssti, KNACSS, Foundation, Materialize, Cascade, MetroUI, INK, Fomantic-UI, Skeleton, mini.css, Picnic, Simple.css, MVP.css, et plein d’autres dont je ne me souviens plus.

Entre ceux qui ne sont plus tenus à jour, ceux qui sont incomplets et nécessitent d’écrire énormément de CSS à la main, ceux qui sont moches… J’ai fini par utiliser PicoCSS, qui est un framework à la fois très joli graphiquement, minimaliste dans son approche et très léger (11 KO, à comparer aux 30 KO de Bootstrap), créé par Lucas Larroche. La plupart des composants s’utilisent sans classe CSS, ils sont naturellement bien rendus.

Pour le site ServerTracker, qui est assez basique (un formulaire et un tableau), PicoCSS fait très bien le travail. C’est simple, sobre, propre.

Temma-UI

Comme vous le savez peut-être, je maintiens de framework PHP Temma. J’ai commencé à travailler sur un projet annexe nommé Temma-UI, qui a pour but de fournir des composants graphiques faciles à utiliser dans un projet Temma.
Contrairement à d’autres bibliothèques de composants similaires, je n’ai pas voulu rendre Temma-UI agnostique vis-à-vis du framework CSS. J’ai fait en sorte qu’il soit compatible avec plusieurs frameworks : Bootstrap, PicoCSS, Bulma et UIkit.

Mais en adaptant chaque composant à graphique aux différents frameworks CSS, j’ai été confronté aux limitations de PicoCSS. Les composants de Temma-UI sont très classiques (bouton, “card”, alerte, badge, toast, divers champs de formulaire, tableau, modale, liste, file d’Ariane, pagination, etc.), et ils sont supportés par la plupart des frameworks.
Mais pour PicoCSS, il a fallu en créer de toutes pièces, car son minimalisme va de pair avec un nombre limité de composants proposés.

µCSS

De fil en aiguille, l’idée s’était imposée d’elle-même : PicoCSS est vraiment un très beau développement, qui mérite d’être enrichi. Une bonne partie du travail avait été faite dans le cadre de Temma-UI et n’attendait qu’à être reprise, nettoyée et intégrée proprement.

À côté de ça, je travaillais sur la bibliothèque µJS (voir mon précédent article), et il devenait tentant de créer un framework à part entière, qui hérite de PicoCSS mais en vivant sa propre vie, sous le nom µCSS.

Aujourd’hui µCSS est un framework complet, qui propose 20 thèmes graphiques, chaque thème contenant une palette de 11 couleurs différentes, et 17 composants graphiques − dont une grille responsive.
Il y a 21 fichiers CSS disponibles, un par thème (plus un “neutre” qui repose sur le thème “Azure˘). Tout est là, il n’y a pas de build, pas de script à lancer, pas de NodeJS à installer. Et ça tient en 19 KO (minifié et gzipé).

Vous trouverez toute la documentation sur le site mucss.org, qui utilise lui-même µCSS (et µJS).
La page des thèmes donne un aperçu rapide des thèmes, des palettes de couleurs, et de quelques composants.

Donc la prochaine fois que vous ferez un site (ou que vous demanderez à Claude Code de faire un site pour vous), n’hésitez pas à utiliser µCSS. Vous verrez, c’est sympa.