Inhalte 1.2.0

Was mit VelinStyle 1.2.0 ausgeliefert wird — kompiliertes CSS, optionales Web-Components-JS, Themes, Icons, CLI (inkl. beta plan/review), Agent-Metadaten und die modulare src/-CSS-Architektur. English: Contents

Reifegrad

dist/-CSS und Komponenten sind stable.

CLI plan / review / Agent-Meta unter dist/velin-agent.json sind beta / foundation.

Wann nutzen

velinstyle.min.css für das vollständige Produktions-Stylesheet wählen.
Modulares src/ nur, wenn Sie einen eigenen Layer-Build brauchen.
Components-JS nur laden, wenn Sie Custom Elements oder deklarative Attribute nutzen.

Wann nicht

Beta-CLI-plan/review-Ausgabe nicht als fertiges Design-System behandeln.
Ungepinnten CDN-Build nicht mit festem lokalem dist/ mischen, ohne Versionen zu prüfen.

Kompiliertes CSS

Der Ordner dist/ liefert mehrere CSS-Bundles, damit Sie genau das einbinden, was Sie brauchen:

Datei	Beschreibung	Größe (gzip)
`velinstyle.min.css`	Volles Framework — Komponenten, Utilities, Animationen, Reboot, Layout und Form-Validation-Helper in `@layer`	~38 KB
`velinstyle.css`	Unminifizierte Version für Entwicklung / Debugging	—
`dist/themes/*.min.css`	Optionale Theme-Presets (brutalist, nordic, …)	~1–2 KB je
`velin-icons.svg`	Standard-Icon-Sprite (auch unter `dist/velin-icons.svg`)	—

JavaScript

Interaktive Features laufen über leichte Web Components. Das JS-Bundle ist optional — reine CSS-Komponenten funktionieren ohne.

Datei	Beschreibung
`velinstyle-components.min.js`	Web-Components-Bundle — `<velin-icon>`, `<velin-dialog>` und mehr

<!-- IIFE-Bundle (globale Custom Elements) -->
<script src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@1.2.0/dist/velinstyle-components.iife.js"></script>

<!-- Oder ES-Modul-Entry (Bundler / type="module") -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@1.2.0/dist/velinstyle-components.js"></script>

<!-- Danach Custom Elements nutzen -->
<velin-icon name="star" size="24"></velin-icon>

Themes

Eingebaute Schemata light, dark und auto folgen data-velin-theme auf <html> oder einem Abschnitt. Zusätzliche Art-Direction-Presets liegen als eigene Stylesheets unter dist/themes/*.css (auch minifiziert) — eines oder mehrere neben dem Core-Bundle laden.

data-velin-theme="light" — Standard-Light-Palette
data-velin-theme="dark" — Dark-Palette mit invertierten Surfaces
data-velin-theme="auto" — folgt prefers-color-scheme

Siehe Color modes für Umschalten und Persistenz.

Icons

Die Web Component <velin-icon> rendert Inline-SVG-Icons aus einem gebündelten Sprite. Über 200 Icons decken gängige UI-Aktionen, Social Brands und Entwickler-Tools ab.

<velin-icon name="heart" size="24"></velin-icon>
<velin-icon name="star" size="24"></velin-icon>
<velin-icon name="check-circle" size="24"></velin-icon>
<velin-icon name="arrow-right" size="24"></velin-icon>

CLI

Das npm-Paket velinstyle stellt eine CLI für Blueprints, Tokens, Scan, Docs, Meta und Design-Intelligence bereit. Vollständige Referenz: CLI-Dokumentation.

velinstyle blueprint <name> — kuratierte HTML-Snippets (Hero, Dashboard-Shell, …).
velinstyle tokens build — tokens.json in CSS Custom Properties verwandeln.
velinstyle scan — riskante Muster im Projektbaum markieren.
velinstyle plan / scaffold / review — beta / foundation Page-Pipeline (siehe Prompt scaffolding).
velinstyle meta — Agent-Metadaten erzeugen / inspizieren (Velin-Meta).

Agent-Metadaten (beta)

1.2.0 liefert dist/velin-agent.json, llms.txt, Knowledge-Graph-Seeds und Page/Section-Registries für Agent-Workflows. Schemas und Coverage wachsen noch — Foundation, kein fertiges AI-Design-System.

Siehe Velin-Meta und Generated Markdown.

Samples

Das Verzeichnis samples/ im Repository enthält Vollseiten-Demos (Dashboard, Landing, Login, Kanban, …) zum lokalen Öffnen nach dem Klonen — nützlich als Copy-Paste-Startpunkte neben Blueprints.

github.com/SkyliteDesign/velinstyle/tree/main/samples

Quelldateien

VelinStyle ist als Plain-CSS-Module implementiert (kein Sass nötig). Der Haupteinstieg src/velinstyle.css importiert Layer für Reboot, Layout, Komponenten, Utilities, Animationen und optionale Add-ons.

src/
├── velinstyle.css          Main @import entry
├── layout/
│   ├── grid.css            Grid & column helpers
│   ├── patterns.css        Page shells (.velin-layout-*)
│   └── …
├── components/
│   ├── form-validation.css Optional form error/hint styling
│   └── …
├── utilities/
├── animations/
└── …

High-Level-Shells unter Layout → Patterns. Integrationsthemen in den Guides.