VelinStyle in einem bestehenden Projekt 1.2.0 stable

VelinStyle ist ein CSS-first Toolkit plus optionale Web Components. Installation per npm oder CDN, einmal global laden, dann Markup mit velin-*-Klassen und Custom Elements zusammenstellen. English: Existing project

Reifegrad

CSS / Web Components / Runtime sind in 1.2.0 stable. Plan / Review / Agent-Meta sind beta / foundation. Studio und die komplette Utility Engine bleiben planned.

Wann nutzen

Stabiles VelinStyle CSS/WC in einen bestehenden Bundler oder eine statische Site einbinden.
@birdapi/velinstyle@1.2.0 pinnen; Plan/Review/Meta bei Opt-in als beta behandeln.

Wann nicht

Beta Plan/Review/Meta nicht als fertiges KI-Design-System behandeln.
Keine noch geplanten Studio- oder Utility-Engine-APIs erfinden.

Voraussetzungen

Ein moderner Evergreen-Browser (OKLCH und Container Queries).
<meta name="viewport" content="width=device-width, initial-scale=1"> auf jeder Seite.
Entweder ein Bundler (Vite, Webpack, Rspack, …) oder statisches HTML mit <link>- / <script>-Tags.

npm

npm install @birdapi/velinstyle

Importieren Sie das Haupt-Stylesheet einmal in Ihrem Entry-CSS (nach einem minimalen Reset, falls vorhanden):

@import "@birdapi/velinstyle/dist/velinstyle.css";
/* or velinstyle.min.css via your bundler / pipeline */

Optionale interaktive Komponenten (ES-Modul):

import "@birdapi/velinstyle/dist/velinstyle-components.js";

Ohne ES-Module @birdapi/velinstyle/dist/velinstyle-components.iife.js mit einem normalen <script src>-Tag laden (siehe Download).

CDN

Semver-Range in Produktion pinnen. Beispiel (Version bei Bedarf anpassen):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@1.2.0/dist/velinstyle.min.css">
<script src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@1.2.0/dist/velinstyle-components.iife.js"></script>

Ladereihenfolge & Konflikte

VelinStyle nutzt @layer. Nach globalen Resets und vor sehr spezifischem Projekt-CSS laden, oder Overrides in benannten Layern halten. Das Präfix velin- vermeidet die meisten Kollisionen mit Bootstrap-/Tailwind-Klassennamen; dennoch zwei vollständige Frameworks parallel vermeiden.

Themes

Zusätzliche Presets liegen unter @birdapi/velinstyle/dist/themes/*.css. Zweites Stylesheet hinzufügen und data-velin-theme auf <html> oder Abschnitten umschalten — siehe Farbmodi.

Optionale CLI

Eigene Bundles, Icons, HTML-Blueprints, Design-Token-Builds und Projekt-Scans:

npx velinstyle blueprint hero-section
npx velinstyle tokens build --input tokens.json --out dist/tokens.css
npx velinstyle scan

Details: CLI, Security, Validierung (Forms-CSS-Helfer).