Einführung

VelinStyle ist ein modernes Utility-first-CSS-Framework mit responsivem Layout, umfangreichen Komponenten, Animationen und 36 kanonischen Web Components — alles in einem Stylesheet. English: Introduction

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.

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

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

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

Warum VelinStyle?

VelinStyle bündelt moderne CSS-Ideen in einem konsistenten Toolkit:

Utility-first — schnelle Layouts ohne eigenes CSS-Chaos.
Komponenten — 35+ CSS-Komponenten plus 36 kanonische Web Components (Modal, Search, Code-Block, Persist, …).
Animationen — Entrance, Attention, Exit, scroll-getrieben, View Transitions.
Deklarative Attribute — 27 velin-*-Bridges, z. B. velin-scroll-top auf <body>.
Web Components — Lazy Loading, wc-placeholder.css gegen Layout-Shift, Playwright-Smoke in CI (npm run test:e2e).
Dark Mode — über CSS-Variablen und data-velin-theme.
RTL — logische Properties für RTL-Sprachen.
Keine Abhängigkeiten — reines CSS, optional Vanilla-JS — kein Build-Schritt nötig.
WCAG 2.2 AAA — OKLCH-Token (7:1), 36/36 Contracts, initA11y(), test:a11y:coverage.

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:

Follow @velinstyle on X (Twitter).
Read and subscribe to The VelinStyle Blog.
Ask questions on GitHub Discussions.
Report bugs via GitHub Issues.