Bulma-Designsystem.

Bulma-Designsystem: ein CSS-Framework mit klar definiertem Verhalten

Verwenden Sie Bulma-Klassen für semantisches HTML

Bulma bietet ein visuelles Vokabular aus Elementen, Komponenten, Layout-Hilfsklassen und Modifikatoren. Es ist weder eine Formularstatusverwaltung noch eine Laufzeitumgebung für JavaScript-Widgets. Das Redaktionsteam lädt das offizielle Stylesheet 1.0.4 und ergänzt es um ein kleines, vollständig dargestelltes Skript für Validierung, Live-Textvorschau und den Wechsel des Erscheinungsbilds. Es gibt keine Abhängigkeit von React und keinen Framework-Provider.

Ein Feld gruppiert eine Beschriftung, einen Steuerelement-Wrapper und einen Hilfetext. Die Klasse input gehört zum eigentlichen Eingabefeld, während select ein Wrapper um das native select-Element ist. Diese Unterscheidung ist wichtig, weil der Wrapper für Dekoration und Abstände zuständig ist. Wer nur das Aussehen eines Screenshots auf generische div-Elemente überträgt, verliert die native Eingabe- und Tastaturbedienung.

Unterstützende Spezifikation lesen

Bulma-Designsystem: HSL-Farbfunktionen und helle/dunkle Themes

Verwende Modifikatoren statt hartcodierter Anpassungen

Bulma 1 speichert Farbfamilien als HSL-Komponenten und leitet daraus verwandte Werte ab. Die Link-Funktion bestimmt die Schaltfläche zum Prüfen, die Abschnittsbeschriftung und unterstützende Akzente. Warn- und Erfolgstags kennzeichnen „Entwurf“ und „Zur Prüfung bereit“, doch die Textbeschriftung bleibt immer sichtbar. Die Meldung verwendet is-info, weil sie Prozessgrenzen erläutert, statt einen Fehler zu melden.

Das Beispiel beginnt mit data-theme=light auf html. Die Schaltfläche für die Darstellung wechselt dieses Attribut zwischen light und dark. Alle Karten, Felder, Hilfetexte und Meldungen übernehmen gemeinsam das passende Theme. Ein direkt auf dem Feld festgelegter weißer Hintergrund würde diesen Wechsel beeinträchtigen. Für Markenanpassungen solltest du die dokumentierten Funktionsvariablen ändern und ihre abgeleiteten Zustände prüfen, statt nur den endgültigen Schaltflächenhintergrund zu ändern.

Unterstützende Spezifikation lesen

Bulma-Designsystem: Schriftpräferenzen und eine gut nutzbare Typografieskala

Das Paket legt Präferenzen fest, liefert aber keine Schriftarten aus

Die Standardschriftfamilie beginnt mit Inter und enthält mehrere System-Fallbacks. Beim Laden von Bulma wird Inter nicht heruntergeladen. In diesem Offline-Beispiel wird die jeweils installierte Schrift aus der Liste verwendet. Benötigt ein Produktiv-Build eine bestimmte Schrift, müssen das Schriftdatei-Asset und die zugehörige Ladekonfiguration separat bereitgestellt werden. Die Klassen für Titel und Untertitel schaffen eine visuelle Hierarchie, ohne die Überschriftenebene HTML zu ändern.

Die Arbeitsfläche verwendet title is-2 für die Seite, title is-4 für das Formular und title is-3 für die Artikelüberschrift. Eine Anpassung für schmale Bildschirme reduziert den Seitentitel auf 2rem; dies ist ausdrücklich eine lokale Optimierung. Steuerelemente behalten die normale Größe von 1rem. Der Hilfetext bleibt neben dem zugehörigen Feld, sodass Nutzende nicht auf Anweisungen in einer separaten Seitenleiste zurückgreifen müssen.

Unterstützende Spezifikation lesen

Bulma-Designsystem: Abstandshilfen und responsive Spalten

Eine Sieben-zu-fünf-Aufteilung, die sich bei Bedarf stapelt

Das übergeordnete Element columns verwendet is-variable is-6; seine untergeordneten Elemente sind column is-7 und column is-5. Diese Anteile räumen dem Formular mehr Platz ein als der Artikelvorschau. Standardmäßig werden Spalten bei mobilen Bildschirmbreiten untereinander angeordnet. Deshalb fügt diese Gestaltung kein is-mobile hinzu, das ein beengtes horizontales Layout beibehalten würde.

Die Endziffern der Abstandshilfen bilden keine lineare Pixel-Skala. Insbesondere entspricht die Endziffer five 1.5rem und six 3rem. Der Abstand zwischen Karte und Meldung wird mit mt-5 festgelegt, kleine Beschriftungen verwenden mb-3. Der äußere Abschnitt ist eine Anwendungsanpassung mit vertikal 2rem und horizontal 1.5rem; das vollständige zusätzliche CSS wird im Setup bereitgestellt.

Unterstützende Spezifikation lesen

Bulma-Designsystem: Feldaufbau und Validierung

Farbe ist nur ein Teil der Fehlermeldung

Überschrift und Zusammenfassung sind explizit mit Beschriftungen und Hilfetexten verknüpft. Bei einer abgelehnten Übermittlung werden is-danger zum Eingabefeld und zum Hilfetext hinzugefügt, aria-invalid=true gesetzt und das erste ungültige Steuerelement erhält den Fokus. Die Überschrift muss nach dem Entfernen der Leerzeichen mindestens fünf Zeichen lang sein, die Zusammenfassung mindestens zwanzig. Dies sind beispielhafte redaktionelle Anforderungen, keine Vorgaben von Bulma.

Außerdem muss das Kontrollkästchen zur Textprüfung ausgewählt sein. Der zugehörige Fehlertext ist über aria-describedby verknüpft. Bulma kann diese Zustände darstellen, aber nicht entscheiden, ob der Text bereit ist. Diese Entscheidung trifft das Skript; es verhindert außerdem die native Formularnavigation. Ein Serverergebnis wird nicht vorgetäuscht.

1. Leere die Überschrift und sende das Formular ab, um das fokussierte ungültige Eingabefeld zu sehen.
2. Stelle eine Überschrift und eine Zusammenfassung mit mindestens zwanzig Zeichen wieder her.
3. Aktiviere das Kontrollkästchen zur Textprüfung und sende das Formular ab. Bearbeite danach den Text erneut, um den Entwurf auf „Entwurf“ zurückzusetzen.

Unterstützende Spezifikation lesen

Bulma-Designsystem: Karten, Meldungen und Status-Tags

Jeder Container hat genau eine Aufgabe

Die Artikelkarte ist in card-header und card-content unterteilt. Der Kopfbereich benennt das Thema, während ein Tag den redaktionellen Status angibt. Der Inhalt umfasst den aktuellen Abschnitt, die Überschrift und die Zusammenfassung, gefolgt von Metadaten. Die Vorschau ist bewusst textorientiert: So kann die schreibende Person Hierarchie und Länge beurteilen, ohne dass ein Platzhalterbild den Entwurf überlagert.

Die Meldungskomponente verwendet message-header und message-body, um zu erklären, dass die Prüfbereitschaft nur lokal gilt. Sie bleibt unabhängig von der Validierung sichtbar. Eine vorübergehende Erfolgsmeldung wäre kein geeigneter Ersatz für diesen dauerhaften Hinweis: Wird sie geschlossen, könnte die nutzende Person glauben, der Artikel sei veröffentlicht worden.

• Karte: die aktuelle Artikelgestaltung.
• Tag: der ausdrückliche Entwurfs- oder Prüfstatus.
• Meldung: eine dauerhafte Erklärung der Aktion.

Unterstützende Spezifikation lesen

Bulma-Designsystem: Anwendungsstatus ohne Widget-Laufzeitumgebung

Verhindere veraltete Erfolgsmeldungen und unsicheres Einfügen in die Vorschau

Jedes Eingabeereignis aktualisiert die Vorschau und setzt den Status auf „Entwurf“ zurück. So bleibt kein Tag „Zur Prüfung bereit“ stehen, nachdem die schreibende Person den überprüften Text geändert hat. Die Anzeige wird mit textContent aktualisiert, sodass eingegebenes HTML als Text angezeigt und nicht als Markup interpretiert wird. Dafür ist die Anwendung zuständig; das Stylesheet von Bulma kann diese Aufgaben nicht übernehmen.

„Entwurf wiederherstellen“ ruft form.reset auf, entfernt Validierungsklassen und aria-invalid, leert den Hilfetext des Kontrollkästchens und erstellt die Vorschau neu. Der ursprüngliche Beispielinhalt wird wiederhergestellt, ohne das Dokument neu zu laden. Der Statusabsatz verwendet role=status für Änderungen nach dem Absenden, während die normale Live-Eingabe den Fokus nicht wiederholt verschiebt.

Unterstützende Spezifikation lesen

Bulma-Designsystem: Installation von CSS und sichtbares Verhalten

Kein Provider und kein mitgeliefertes Bulma JavaScript

Installiere [email protected] und kopiere das kompilierte CSS in ein lokales Asset oder importiere dieses CSS in einen vorhandenen Bundler. Für das hier gezeigte einfache HTML-Setup ist nach dem Kopieren des Assets kein Build-Schritt erforderlich. Füge das vollständige Markup der Arbeitsfläche in body ein und lade app.js mit defer. Lade nicht in der Erwartung ein unbeteiligtes JavaScript-Paket, dass es die Komponenten von Bulma aktiviert.

Wenn du später ein Modal oder Dropdown hinzufügst, implementiere das zugehörige Tastatur-, Fokus- und Schließverhalten bewusst. Eine Klasse wie is-active ändert das Erscheinungsbild, sie fängt den Fokus aber nicht ab. Bei diesem Beispiel halten native Eingabefelder und Schaltflächen den Verhaltensumfang klein und überschaubar.

Unterstützende Spezifikation lesen

Bulma Designsystem: Anpassungen im passenden Geltungsbereich

Komponentenvariablen prüfen, bevor du sie überschreibst

Globale --bulma-Variablen legen das Theme fest, aber auch Komponenten definieren Variablen in ihren eigenen Selektoren. Eine spezifischere Zuweisung für eine Komponente kann einen Wert auf Root-Ebene überschreiben. Prüfe die Klasse im kompilierten CSS, wenn eine Root-Überschreibung keine Wirkung zu haben scheint, und platziere die Überschreibung dann an der passenden Komponente, statt immer mehr unzusammenhängende Deklarationen hinzuzufügen.

Bei einem langfristig betriebenen Produkt solltest du Paketstandardwerte, Markenüberschreibungen und bildschirmspezifische Layoutregeln getrennt halten. Die kleinen Container- und Titelanpassungen für Mobilgeräte in diesem Beispiel sind Bildschirmregeln. In den Referenztabellen werden die tatsächlichen Bulma-Werte separat aufgeführt. So ist klar, welche Einstellungen sich wiederverwenden lassen und welche nur zu diesem Redaktionsbereich gehören.

Unterstützende Spezifikation lesen

Bulma Designsystem-Komponentenbeispiele

<section class="section"><div class="container"><div class="level"><div class="level-left"><div><p class="is-size-7 has-text-weight-bold has-text-link mb-3">BULMA / LOCAL EDITORIAL DESK</p><h1 class="title is-2">Shape the next issue.</h1><p class="subtitle is-5">An article brief, a preview, and an explicit editorial state.</p></div></div><div class="level-right"><button class="button is-light" id="theme">Dark appearance</button></div></div><div class="columns is-variable is-6"><div class="column is-7"><form id="brief" class="box" novalidate><h2 class="title is-4">Article brief</h2><div class="field"><label class="label" for="headline">Headline</label><div class="control"><input class="input" id="headline" value="A quieter way to work" maxlength="90" aria-describedby="headline-help"></div><p class="help" id="headline-help">Use 5–90 characters. This field updates the preview as you type.</p></div><div class="field"><label class="label" for="section">Section</label><div class="control"><div class="select is-fullwidth"><select id="section"><option>Design notes</option><option>Field research</option><option>Product craft</option></select></div></div></div><div class="field"><label class="label" for="summary">Summary</label><div class="control"><textarea class="textarea" id="summary" rows="3" aria-describedby="summary-help">How small choices in layout and language can make a demanding interface feel manageable.</textarea></div><p class="help" id="summary-help">Use at least 20 characters to give the reviewer enough context.</p></div><div class="field"><label class="checkbox"><input id="checked" type="checkbox" aria-describedby="checked-help" aria-describedby="checked-help"> I have checked the headline and summary</label><p class="help" id="checked-help"></p></div><div class="field is-grouped is-grouped-multiline"><div class="control"><button type="submit" class="button is-link">Mark ready for review</button></div><div class="control"><button id="reset" type="button" class="button is-light">Restore draft</button></div></div><p id="result" class="help" role="status">Draft changes stay in this page only.</p></form></div><div class="column is-5"><article class="card"><header class="card-header"><p class="card-header-title">Issue 08 / Article preview</p><span id="state" class="tag is-warning is-light mr-4 my-4">Draft</span></header><div class="card-content"><p class="is-size-7 has-text-link has-text-weight-bold mb-3" id="preview-section">Design notes</p><h2 class="title is-3" id="preview-title">A quieter way to work</h2><div class="content" id="preview-summary">How small choices in layout and language can make a demanding interface feel manageable.</div><hr><p class="is-size-7">Copy desk · Reading time assigned after editing</p></div></article><article class="message is-info mt-5"><div class="message-header"><p>Review is a separate step</p></div><div class="message-body">Ready for review is a local label. It does not publish this article, send a notification, or save a draft on a server.</div></article></div></div><p class="is-size-7">Official Bulma 1.0.4 CSS. Form validation and preview updates are original JavaScript.</p></div></section>

const $=id=>document.getElementById(id);
const fields=['headline','summary'];
function draft(){ $('state').textContent='Draft';$('state').className='tag is-warning is-light mr-4 my-4';$('result').textContent='Draft changes stay in this page only.';}
function preview(){ $('preview-title').textContent=$('headline').value.trim()||'Untitled article';$('preview-summary').textContent=$('summary').value.trim()||'No summary yet.';$('preview-section').textContent=$('section').value;draft();}
for(const id of ['headline','summary','section','checked'])$(id).addEventListener('input',preview);
$('brief').addEventListener('submit',event=>{event.preventDefault();let first=null;for(const id of fields){const invalid=$(id).value.trim().length<(id==='headline'?5:20);$(id).classList.toggle('is-danger',invalid);$(id).setAttribute('aria-invalid',String(invalid));$(id+'-help').classList.toggle('is-danger',invalid);if(invalid&&!first)first=$(id);}$('checked-help').textContent=$('checked').checked?'':'Confirm the copy check before review.';$('checked-help').className='help is-danger';if(!$('checked').checked&&!first)first=$('checked');if(first){$('result').textContent='Check the highlighted brief fields.';first.focus();return;}$('state').textContent='Ready for review';$('state').className='tag is-success is-light mr-4 my-4';$('result').textContent='Marked ready in this local preview. Nothing was published.';});
$('reset').addEventListener('click',()=>{$('brief').reset();for(const id of fields){$(id).classList.remove('is-danger');$(id).removeAttribute('aria-invalid');$(id+'-help').classList.remove('is-danger');}$('checked-help').textContent='';preview();});
$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';$('theme').textContent=dark?'Light appearance':'Dark appearance';});