Zum Hauptinhalt springen
VelinStyle v1.3.0
  1. Docs
  2. Erste Schritte
  3. Einführung

Einführung 1.2.2

VelinStyle ist ein komponenten-first CSS-Framework mit responsivem Layout, Animationen, Utilities für Feinschliff und 43 kanonischen Web Components. CSS und Runtime sind stable; Design Intelligence (plan / review / Agent-Meta) ist in 1.2.0 beta / foundation. English: Introduction

Reifegrad

Stylesheet, Web Components und JS-Runtime sind stable (produktionsreif).

velinstyle plan, review, Knowledge Graph und velin-agent.json sind beta / foundation — nutzbar, aber noch ausbauend.

Studio und die komplette Utility Engine bleiben planned.

Publish: für Go-Live velinstyle production nutzen (1.2.2+).

Lieber erst sehen?

Öffnen Sie die Homepage Begin-Stage — Prompt → Plan → Komponenten → generierte UI — und kommen Sie dann für die Referenz zurück.

Wann nutzen

Wann nicht

Das Tailwind-Sprawl-Problem

Intensive Tailwind-Arbeit wird oft zum Klassensalat: ein einfacher Button braucht 10–15 Utilities. VelinStyle nutzt ein velin--Präfix, liefert aber semantische, fertige Komponenten (Utilities nur für Feinschliff) plus optionale Blueprints / plan-Rezepte — Studio bleibt planned. Migration von Tailwind? Siehe den Migrationsleitfaden. 

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

Schnellstart

Am schnellsten geht es per CDN: die folgenden <link>- und <script>-Tags in den <head> Ihrer HTML-Seite einfügen: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello VelinStyle</title>

  <!-- VelinStyle CSS -->
  <link rel="stylesheet" href="../../dist/velinstyle.min.css">

  <!-- VelinStyle Web Components (optional) -->
  <script type="module" src="../../dist/velinstyle-components.iife.js"></script>
</head>
<body>
  <div class="velin-container" style="padding-block: 3rem">
    <h1 style="margin-block-end: 1rem">Hallo VelinStyle!</h1>
    <p class="velin-lead velin-text-muted">Los geht&rsquo;s.</p>
    <button class="velin-btn velin-btn--primary">Starten</button>
  </div>
</body>
</html>

Hallo VelinStyle!

Los geht’s.

A11y-Bootstrap (optional)

Nach dem Laden der Komponenten initA11y() aufrufen — Live-Region-Announcer und Scroll-Padding bei fixiertem Header (Barrierefreiheit, 43 Component Contracts). 

import { initA11y } from '@birdapi/velinstyle/a11y';

initA11y({ announcer: true, scrollPadding: true });

Warum VelinStyle?

VelinStyle existiert, damit Teams lesbares HTML, zugängliche Defaults und agentenbereite Struktur liefern können — ohne ein JavaScript-Framework als Design-System zu übernehmen.

Lieferumfang

Der Build enthält u. a.:

velinstyle/
├── dist/
│   ├── velinstyle.css           (full unminified)
│   ├── velinstyle.min.css       (full minified — production)
│   ├── velinstyle-components.js / .min.js / .iife.js
│   ├── velin-icons.svg
│   └── themes/*.min.css         (optional presets)
└── src/
    └── ...                      (plain CSS modules)

Community

Neuigkeiten und Austausch: