# Bulma-Designsystem

## Vorschau der Bulma-Designsystem-Oberfläche

Bearbeiten Sie eine Überschrift und Zusammenfassung, prüfen Sie das Briefing, markieren Sie es als bereit und wechseln Sie zwischen hellem und dunklem Erscheinungsbild.

## Designreferenz für das Bulma-Designsystem

Kompiliertes CSS von Bulma 1.0.4 sowie offizielle Dokumentation zu responsiven Funktionen und Hilfsklassen. HSL-Komponenten sind Standardeinstellungen des Pakets und kein Ersatz für eine Markenfarbpalette. Die rem-Umrechnungen gehen von einem Root-Wert von 16px aus.

### Grundlagen für Typografie und Steuerelemente

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bulma-family-primary | Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif | Bevorzugte Schriftartenliste; das Paket lädt diese Schriftdateien nicht herunter. |
| --bulma-size-normal | 1rem | Standardgröße für Steuerelemente und Fließtext. |
| --bulma-size-small | 0.75rem | Kompakte Größe für zusätzliche Steuerelemente. |
| --bulma-size-medium | 1.25rem | Größe des Modifikators „Medium“. |
| --bulma-size-large | 1.5rem | Größe des Modifikators „Large“. |
| --bulma-weight-semibold | 600 | Beschriftungen und hervorgehobener UI-Text. |
| --bulma-block-spacing | 1.5rem | Abstand zwischen Blockelementen. |
| --bulma-radius | 0.375rem | Standardradius von 6px bei einem Root-Wert von 16px. |
| --bulma-radius-small | 0.25rem | Kleiner Radius von 4px. |
| --bulma-radius-large | 0.75rem | Großer Radius von 12px. |
| --bulma-control-height | 2.5em | 2.5em entspricht bei einer Steuerelementgröße von 16px genau 40px. |
| --bulma-control-border-width | 1px | Einheitliche Rahmenstärke für Steuerelemente. |
| --bulma-control-line-height | 1.5 | Einheitliche Zeilenhöhe für Steuerelementtexte. |
### Farbaufbau

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| --bulma-primary-h / -s / -l | 171deg / 100% / 41% | HSL-Komponenten der Primärfarbe. |
| --bulma-link-h / -s / -l | 233deg / 100% / 63% | Rolle für Aktionen und Links, die von is-link verwendet wird. |
| --bulma-scheme-h / -s | 221 / 14% | Farbton und Sättigung des neutralen Farbschemas. |
| --bulma-scheme-main-l | 100% in light mode | Helligkeit der Hauptoberfläche im hellen Farbschema. |
| --bulma-text-l | 29% in light mode | Helligkeit des Textes im normalen Farbschema. |
| --bulma-text-title-l | 14% in light mode | Helligkeit des stärker hervorgehobenen Titeltexts. |
### Abstandshilfen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| mb-0 | 0 | Hilfsklasse für den unteren Außenabstand; für andere Richtungen gilt dieselbe Suffix-Skala. |
| mb-1 | 0.25rem | Hilfsklasse für den unteren Außenabstand; für andere Richtungen gilt dieselbe Suffix-Skala. |
| mb-2 | 0.5rem | Hilfsklasse für den unteren Außenabstand; für andere Richtungen gilt dieselbe Suffix-Skala. |
| mb-3 | 0.75rem | Hilfsklasse für den unteren Außenabstand; für andere Richtungen gilt dieselbe Suffix-Skala. |
| mb-4 | 1rem | Hilfsklasse für den unteren Außenabstand; für andere Richtungen gilt dieselbe Suffix-Skala. |
| mb-5 | 1.5rem | Hilfsklasse für den unteren Außenabstand; für andere Richtungen gilt dieselbe Suffix-Skala. |
| mb-6 | 3rem | Hilfsklasse für den unteren Außenabstand; für andere Richtungen gilt dieselbe Suffix-Skala. |
### Responsive Breakpoints

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| mobile | ≤768px | Spalten und Ebenenstapel, sofern is-mobile nicht hinzugefügt wird. |
| tablet | ≥769px | Standardspalten werden horizontal angeordnet. |
| desktop | ≥1024px | Modifikatoren für Desktop beginnen. |
| widescreen | ≥1216px | Größerer Container- und Layoutbereich. |
| fullhd | ≥1408px | Größter Standardbereich. |
## Vollständiger Leitfaden zum Bulma-Designsystem

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## 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 bulma@1.0.4 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

### Vollständiges Markup für den Redaktionsbereich

Bulma-Anatomie von field/control/label/help, Spaltenaufteilung 7/5, Card-, Message- und Statustag-Komponenten.

```
<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>
```

Code-Referenz

- Die CSS-Bibliothek validiert das Formular nicht und sendet es auch nicht ab.

- aria-describedby verknüpft Eingabefelder mit Hilfetext.

- Die Vorschau verwendet textContent, um eingegebenen Text anzuzeigen.

### Validierung und Verhalten der lokalen Vorschau

Die ursprünglichen Event-Handler implementieren das Verhalten, das Bulma bewusst der Anwendung überlässt.

```
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';});
```

Code-Referenz

- Bei einer ungültigen Übermittlung erhält das erste fehlende Feld den Fokus.

- Wird ein fertiges Briefing bearbeitet, wechselt es zurück zum Entwurfsstatus.

- Das Attribut data-theme steuert das Erscheinungsbild.

## Bulma Designsystem: Einrichtung des AI-Agenten

### Ausgangspunkt für die Implementierung

Speichere das vollständige Markup und die Beispiele für JavaScript wie angegeben. Bulma stellt das CSS bereit; das mitgelieferte Anwendungsskript implementiert die gesamte Validierung und den lokalen Zustand. Die Offline-Vorschau bindet beide Dateien direkt ein. Der HTML-Wrapper enthält das vollständige Body-Markup. Speichere die bereitgestellten Beispiele für Interaktionen und CSS unter den hier angegebenen Dateinamen.

```
<!-- Install and copy the local asset:
npm install bulma@1.0.4
mkdir -p assets
cp node_modules/bulma/css/bulma.min.css assets/bulma.min.css
-->
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Editorial desk</title>
<link rel="stylesheet" href="assets/bulma.min.css">
<style>.section{padding:2rem 1.5rem}.container{max-width:1080px!important}.card-header{align-items:center;flex-wrap:wrap}.title{overflow-wrap:anywhere}.level-left{min-width:0}@media(max-width:768px){.title.is-2{font-size:2rem}.level-right{margin-top:1rem}}</style>
<script src="app.js" defer></script>
</head>
<body><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>
</body>
</html>
```

### Ein Prompt für dein Projekt

```
Beginne mit dem vollständigen Redaktionsbereich auf Basis von Bulma 1.0.4. Behalte die field/control/help-Anatomie, die responsiven Spalten, die Card- und Message-Komponenten sowie das Theme für hellen und dunklen Modus auf Dokumentebene bei. Änderungen an Überschrift und Zusammenfassung müssen die Artikelvorschau über textContent aktualisieren und ihren Status auf Entwurf zurücksetzen. Verlange die vorgegebenen Zeichenlimits nach dem Entfernen führender und nachgestellter Leerzeichen sowie die Bestätigung der Textprüfung, bevor der Status auf „Zur Prüfung bereit“ gesetzt wird. Verknüpfe ungültige Felder mit ihren Hilfetexten und fokussiere den ersten Fehler. Stelle den ursprünglichen Entwurf wieder her und setze seinen Validierungsstatus zurück, ohne eine Veröffentlichung anzudeuten.
```

## Bulma Designsystem: Quellen und Geltungsbereich

Referenz zu Bulma 1.0.4 CSS. Lokale Redaktionsregeln und JavaScript sind eigens erstellter Beispielcode; es wird kein Entwurf gespeichert oder veröffentlicht.

- Übersicht Einrichtung und Dokumentanforderungen nur für CSS.

- CSS-Variablen Geltungsbereich für globale Einstellungen und Komponenten.

- Formularsteuerelemente Aufbau von Feld und Steuerelement.

- Responsivität Offizielle Viewport-Grenzen.

- Abstandshilfen Werte der Utility-Suffixe.

- Dunkelmodus Theme-Auswahl.

- Message Anatomie des Message-Containers.

## Bulma Designsystem: Weiterführende Ressourcen

### Chakra UI

Eine Referenz zu Chakra UI v3 für Tokens, semantische Farbrollen, Rezepte und zusammengesetzte Formular-Komponenten. Sieh dir die tatsächlichen Abstands- und Schriftgrößenskalen an und probiere anschließend ein natives Formular für ein Arbeitsbereichsprofil mit Validierung, Simulation eines fehlgeschlagenen Speichervorgangs und heller/dunkler Darstellung aus.

### CoreUI

Eine mit echten 5.9-Theme-Variablen erstellte Prüfwarteschlange für CoreUI mit nativen Tabs, Mehrfachauswahl per Kontrollkästchen und einer dauerhaft eingeblendeten Toast-Meldung, über die sich der letzte lokale Archivierungsvorgang rückgängig machen lässt.

### daisyUI

Ein mit CSS erstelltes Einladungsstudio, das die semantischen Themes von daisyUI 5, passende Inhaltsfarben, verbundene Optionsfelder, Bereichsregler, Browser-Validierung und einen echten Dialog zur Prüfung demonstriert.


- [Implementierungsreferenz](https://bulma.io/documentation/form/general/)
- [Quelle](https://bulma.io/documentation/features/css-variables/)
- [Quelle](https://bulma.io/documentation/features/color-palettes/)
- [Quelle](https://bulma.io/documentation/helpers/spacing-helpers/)
- [Quelle](https://bulma.io/documentation/start/responsiveness/)
- [Unterstützende Spezifikation lesen](https://bulma.io/documentation/start/overview/)
- [Unterstützende Spezifikation lesen](https://bulma.io/documentation/features/dark-mode/)
- [Unterstützende Spezifikation lesen](https://bulma.io/documentation/helpers/typography-helpers/)
- [Unterstützende Spezifikation lesen](https://bulma.io/documentation/start/responsiveness/)
- [Unterstützende Spezifikation lesen](https://bulma.io/documentation/form/general/)
- [Unterstützende Spezifikation lesen](https://bulma.io/documentation/components/message/)
- [Unterstützende Spezifikation lesen](https://bulma.io/documentation/features/css-variables/)
- [Code-Referenz](https://bulma.io/documentation/form/general/)
- [Code-Referenz](https://bulma.io/documentation/start/overview/)
- [Übersicht Einrichtung und Dokumentanforderungen nur für CSS.](https://bulma.io/documentation/start/overview/)
- [CSS-Variablen Geltungsbereich für globale Einstellungen und Komponenten.](https://bulma.io/documentation/features/css-variables/)
- [Formularsteuerelemente Aufbau von Feld und Steuerelement.](https://bulma.io/documentation/form/general/)
- [Responsivität Offizielle Viewport-Grenzen.](https://bulma.io/documentation/start/responsiveness/)
- [Abstandshilfen Werte der Utility-Suffixe.](https://bulma.io/documentation/helpers/spacing-helpers/)
- [Dunkelmodus Theme-Auswahl.](https://bulma.io/documentation/features/dark-mode/)
- [Message Anatomie des Message-Containers.](https://bulma.io/documentation/components/message/)