Migrationsleitfaden Tutorial

Von Bootstrap oder Tailwind zu VelinStyle — Schritt für Schritt. Anfänger folgen von oben nach unten; Profis springen zu Tabellen und CLI. English: Migration Guide

Was du gewinnst: klarere Komponentenklassen (velin-btn), weniger Utility-Stapel, AAA-Farbdefaults. Versionssprünge innerhalb von VelinStyle → Aktualisieren.

Für wen?

AnfängerHTML/CSS-Grundlagen — Checkliste ab Schritt 1.
SchnellEin Button in drei Stilen, dann Tabellen überfliegen.
Profi / BulkMapping-Tabellen + velinstyle prefix.

Startpunkt wählen

Ich nutze Bootstrap — .btn / .card durch Velin-Komponenten ersetzen, dann Utilities.
Ich nutze Tailwind — Klassensalat in Komponenten verdichten; Rest mit velin- präfixieren.
Gemischt / bestehende App — VelinStyle zuerst parallel laden (npm oder CDN).
Schon auf VelinStyle — diese Seite ist nicht für Version-Upgrades.

Anfänger-Pfad (ca. 30–60 Min.)

Der Reihe nach. Nach jedem Schritt kurz prüfen, ob die Seite noch stimmt.

VelinStyle hinzufügen — Install oder CDN unter Download. Bootstrap/Tailwind vorerst behalten.
Ein Control umbauen — Primary-Button auf velin-btn velin-btn--primary (siehe Quick Win).
Utilities — Spacing/Display mit den Tabellen unten (oder CLI Dry-Run).
Komponenten — Navbar, Cards, Alerts, Forms über die Komponententabelle + Docs.
Layout & Theme — Container/Grid + data-velin-theme (siehe Layout).
Alten Stack entfernen — wenn die Abdeckung passt, Bootstrap/Tailwind aus dem Bundle nehmen.

Hilfe? Fehlerbehebung · FAQ · BirdAPI Tutorials.

Vor dem Start (2 Minuten)

Auf einem Branch oder einer Kopie arbeiten — Klassen sind mechanisch, optische QA zählt.
DevTools offen; nach jedem Batch Spacing und Buttons stichprobenartig prüfen.
Optional: Feature-Umfang — stable vs. beta.

Gut zu wissen: AAA-Farbdefaults

VelinStyle liefert AAA-Kontrast (etwa 7:1 Text auf hellen Flächen). Wirken ältere Muted-/Pastellfarben „zu stark“, herunterstufen:

<html data-velin-contrast="aa">

Details: Barrierefreiheit.

Quick Win: ein Button

Gleiche Absicht — drei Schreibweisen. VelinStyle bündelt Look & Fokus in weniger Klassen.

<button class="btn btn-primary">Speichern</button>

<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
  Speichern
</button>

<button class="velin-btn velin-btn--primary">Speichern</button>

Warum migrieren? Weniger Klassensalat

Intensives Tailwind bedeutet oft 10–15 Klassen pro Control. VelinStyle ist komponenten-first: semantische Klassen tragen Layout, Farbe, Hover und Fokus — Utilities bleiben für Feinschliff.

<!-- Tailwind-Sprawl -->
<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
  Speichern
</button>

<!-- VelinStyle -->
<button class="velin-btn velin-btn--primary">Speichern</button>

So funktionieren VelinStyle-Klassen

Utilities mit Prefix velin- (z. B. velin-flex). Komponenten als BEM-artige velin-*-Namen (velin-btn, velin-card) — nicht Bootstraps unpräfixiertes btn / card. Tabellen als Suchen/Ersetzen-Start, dann verlinkte Docs fürs Markup.

Referenz: Tailwind → Utilities

Wo ein Analogon existiert, velin- voranstellen. Spacing-Schritte sind nicht 1:1 Tailwind — nach Bulk-Replace stichprobenartig prüfen.

Tailwind	VelinStyle	Hinweise
`p-4`	`.velin-p-4`	Padding-Skala
`text-center`	`.velin-text-center`	Gleiche Absicht
`bg-blue-500`	`.velin-bg-primary`	Semantisches Token
`rounded-lg`	`.velin-rounded-lg`	Radius-Tokens
`flex`	`.velin-flex`	Oder `.velin-flex--*`
`hidden`	`.velin-hidden`
`mt-4`	`.velin-mbs-4` oder `.velin-m-4`	Logisches `mbs`; siehe Abstände
`shadow-md`	`.velin-shadow`	Schatten
`max-w-md`	`.velin-max-w-md`	Breitenbegrenzung
`opacity-50`	`.velin-opacity-50`

Index: Utilities API · Abstände.

Referenz: Bootstrap → Utilities

Bootstrap	VelinStyle	Hinweise
`.d-flex`	`.velin-flex`	Display
`.d-none`	`.velin-hidden`	Gleiches Verhalten
`.mt-3`	`.velin-mbs-4` oder `.velin-m-3`	Spacing-Skala
`.p-4`	`.velin-p-4`
`.text-center`	`.velin-text-center`
`.bg-primary`	`.velin-bg-primary`	Design Tokens
`.text-muted`	`.velin-text-muted`	Semantischer Text
`.rounded`	`.velin-rounded`	Standardradius
`.shadow`	`.velin-shadow`

Merke: Bootstrap-Komponenten (.btn, .card) sind nicht 1:1 — nächste Tabelle.

Referenz: Bootstrap → Komponenten

Bootstrap	VelinStyle	Doc
`.btn` / `.btn-primary`	`.velin-btn .velin-btn--primary`	Buttons
`.modal` / `.modal-dialog`	`.velin-modal-overlay` + `.velin-modal`	Modal · `<velin-dialog>`
`.alert` / `.alert-info`	`.velin-alert .velin-alert--info`	Hinweise
`.navbar`	`.velin-nav` + `.velin-nav__*`	Navbar
`.card`	`.velin-card` + `.velin-card__*`	Karte
`.badge`	`.velin-badge .velin-badge--primary`	Badge
`.form-control`	`.velin-input`	Formularsteuerung
`.list-group`	`.velin-list-group` + `.velin-list-group__item`	Listengruppe

Layout & Themes

Layout: .container / .row / .col-* → .velin-container, Raster, optional Muster.
Themes: Bootstrap data-bs-theme / Tailwind Dark → data-velin-theme und CSS-Variablen.

Extras

color-mix()-Utilities
Scroll-driven Animations
View Transitions-Helfer
CSS @layer
Web Components — optional
Zero build step — eine CSS-Datei + optionales JS

Profi-Tipp: CLI `velinstyle prefix`

Schreibt class / className in HTML, Vue, JSX, TSX um. Default ist Dry-Run; --write speichert.

npx velinstyle prefix ./src
npx velinstyle prefix ./src --write
npx velinstyle prefix ./src --bootstrap-display --write
npx velinstyle prefix ./src --map ./velinstyle-prefix-map.json --write

Mehr: CLI · Anbindung: Bestehendes Projekt.

Checkliste

VelinStyle hinzufügen — CSS + optionales JS
Parallel betreiben — alten Stack behalten, bis die Abdeckung stimmt
Eine Komponente — Button-/Card-Smoke-Test
Utilities — Tabellen oder prefix Dry-Run
Komponenten — Markup auf velin-*
Altes CSS entfernen — Bootstrap/Tailwind raus
Danach Release-Hinweise — Aktualisieren

Längere Anleitungen? BirdAPI Tutorials · Snippets im CodeGewölbe.