Bulma ist ein CSS-Framework auf Basis von Flexbox, das Jeremy Thomas 2016 veröffentlicht hat. Es besteht nur aus CSS und bringt kein eigenes JavaScript mit.
- Bulma
Ein CSS-Framework aus fertigen Bausteinen und Layoutklassen, das allein mit CSS arbeitet.
Beispiel: „Für die Vereinsseite haben wir Bulma genommen, weil sie ohne Skripte auskommen sollte.“Abgrenzung zu Bootstrap: Beide liefern fertige Komponenten. Bulma lässt das Verhalten, etwa das Aufklappen eines Menüs, komplett dem eigenen Code oder einem kleinen Framework wie Alpine.js.
Wie Bulma aufgebaut ist
Die Klassen sind sprechend und kurz: button, card, columns, is-primary, is-large. Ein Layout entsteht aus columns und column, die sich über Flexbox die Breite teilen, ohne dass du Spaltenzahlen ausrechnen musst.
Bulma ist modular. Wer nur Raster und Buttons braucht, bindet nur diese Teile ein und lässt den Rest weg. Angepasst wird über Variablen in Sass, seit Version 1 auch über CSS-Variablen im Browser.
Für wen Bulma passt
Für kleine Projekte, in denen schnell eine aufgeräumte Oberfläche stehen soll und kein eigenes Designsystem nötig ist: Vereinsseiten, Dokumentationen, kleine Werkzeuge. Die Dokumentation gilt als besonders gut lesbar.
Weil Bulma kein JavaScript vorgibt, passt es zu jedem Framework, von Vue.js bis React, und kollidiert nicht mit deren Steuerung der Seite.
Wo Bulma an Grenzen kommt
Bei größeren Projekten mit eigener Gestaltung. Dann wird Bulma wie jedes Komponenten-Framework mehr umgebaut als genutzt, und die Gemeinde ist kleiner als bei Bootstrap oder Tailwind CSS.
Ein Vorteil bleibt: Weil Bulma nur aus CSS besteht, lässt es sich Stück für Stück durch eigenes CSS ersetzen, ohne dass dabei Skripte brechen.