Webdesign · Entwicklung · SEO
Bulma
Bulma erklärt: CSS-Komponenten und ihre Grenzen | scinet
Redaktionell geprüft ·
Verständlich erklärt
Bulma ist ein CSS-Framework mit vorgefertigten Gestaltungsmustern für Websites. Es bringt unter anderem Schaltflächen, Formulare, Karten, Navigation und ein Spaltensystem mit. Du verwendest die vorgesehenen HTML-Strukturen und Klassen und erhältst damit ein visuelles Grundgerüst.
Das kann den Einstieg angenehm machen. Du musst nicht jede kleine Gestaltung von vorne entwickeln. Wichtig ist aber eine Unterscheidung: Bulma kümmert sich um CSS. JavaScript gehört nicht zum Paket. Wenn ein Menü aufklappen oder ein Dialog geöffnet werden soll, muss dein Projekt dieses Verhalten ergänzen. Hier geht es um Bulma 1.
Wie du mit Bulma arbeitest
Ein Button erhält etwa die Klasse button. Mit is-primary bekommt er die primäre Farbvariante. Statt einzelne Regeln für alle Abstände und Rahmen zusammenzusetzen, wählst du zunächst einen fertigen Baustein und seine Varianten.
Bulma lässt sich als vorbereitete CSS-Datei einbinden oder über ein Paket in den Entwicklungsablauf aufnehmen. Für den Einstieg brauchst du nicht zwingend einen eigenen Sass-Build. Wenn du gezielt Teile zusammenstellen oder Sass-Konfiguration nutzen möchtest, wird dieser zusätzliche Arbeitsschritt relevant.
Auf einen Blick
Ein Beispiel aus einer kleinen Website
Stell dir eine Beratungswebsite mit drei Angeboten vor. Bulma kann dir das Spaltenlayout und die Gestaltung der Angebotskarten liefern. Auf schmalen Bildschirmen sollen die Karten sinnvoll untereinander stehen. Trotzdem prüfst du mit deinen echten Texten, ob Zeilenumbrüche und Abstände passen.
Vielleicht kommt später eine mobile Navigation dazu. Das Symbol ist schnell gestaltet. Damit beim Aktivieren auch das Menü erscheint, braucht es zusätzliches Verhalten. Genau solche Details würde ich im Angebot mitdenken, bevor aus einem vermeintlich kleinen CSS-Wechsel ein größeres Projekt wird.
Anpassen, ohne überall Einzelwerte zu ändern
Bulma 1 verwendet CSS-Variablen. Viele Werte können dadurch im Browser überschrieben werden, auch für einzelne Komponenten. Sass bleibt eine weitere Möglichkeit zur Anpassung beim Erzeugen der CSS-Datei.
Für eine Markenfarbe würde ich zuerst festlegen, wo sie eingesetzt werden soll. Ein farbiger Button und ein Textlink stellen unterschiedliche Anforderungen an Lesbarkeit und Kontrast. Übernimm deshalb nicht nur den Farbwert aus deinem Logo. Prüfe auch die konkrete Kombination aus Text, Hintergrund und Zustand.
Was bei Interaktion in deiner Verantwortung bleibt
Die Modal-Dokumentation zeigt, wie ein Dialog über Klassen sichtbar gemacht werden kann, und ergänzt JavaScript-Beispiele. Ein sichtbares Fenster ist damit aber noch keine vollständig geprüfte Bedienoberfläche. Tastatursteuerung, verständliche Beschriftung und ein sinnvoller Fokusablauf gehören ebenfalls dazu.
Meine Einordnung: Bulma ist interessant, wenn du vorhandene Gestaltung nutzen und die Interaktion bewusst selbst wählen möchtest. Bootstrap bündelt zusätzlich JavaScript-Plugins; Tailwind setzt stärker auf kleine Utility-Klassen. Welche Aufteilung gut passt, hängt von deinem Team und der gewünschten Oberfläche ab.
Passend dazu: Tailwind CSS · Sass / SCSS · CSS-Variablen · Bootstrap 6 Alpha im Vergleich.
Codebeispiel aus der Praxis
Kontaktlink als Bulma-Button
Eigenes Beispiel nach Einbindung der Bulma-CSS-Datei. Ein Link zur Kontaktseite bleibt semantisch ein Link; dafür ist kein JavaScript nötig.
<a class="button is-primary" href="/de/kontakt/">
Über dein Projekt sprechen
</a>Quellen und weiterführende Informationen
- Dokumentation Overview of Bulma Bulma · Geprüft
- Dokumentation Installation Bulma · Geprüft
- Dokumentation CSS Variables Bulma · Geprüft
- Dokumentation Modal Bulma · Geprüft
- Dokumentation Responsiveness Bulma · Geprüft
