Ansatz beta

Verstehe die Designprinzipien hinter VelinStyle und warum es so funktioniert, wie es funktioniert. English: Approach

Reifegrad: Diese Oberfläche ist in VelinStyle 1.2.0 beta / foundation - jetzt nutzbar; Schemas und Abdeckung wachsen noch. CSS / Web Components / Runtime bleiben stabil. Studio und die vollständige Utility Engine bleiben geplant.

Wann verwenden

Folge diesem Leitfaden, wenn du VelinStyle integrierst oder erweiterst (Ansatz).
Pinne @birdapi/velinstyle@1.2.0 und prüfe Reifegrad-Badges für Beta-Oberflächen.

Wann nicht

Behandle beta plan/review/meta nicht als fertiges AI-Designsystem.
Erfinde keine Studio- oder Utility-Engine-APIs, die noch geplant sind.

Philosophie

Utility-first, komponentenfreundlich — mit Utilities bauen, Komponenten extrahieren, wenn Muster sich wiederholen.
CSS-nativ — auf modernen CSS-Features aufgebaut (custom properties, @layer, color-mix(), container queries) statt Preprocessor-Hacks.
Kein JavaScript erforderlich — das CSS funktioniert eigenständig. JS-Komponenten sind progressive Erweiterungen.
Standardmäßig zugänglich — ARIA-Muster, Fokusmanagement und Reduced-Motion-Unterstützung sind integriert.

CSS-Layer

VelinStyle nutzt @layer, um CSS in vorhersehbare Kaskadenebenen zu gliedern:

@layer velin.base;      /* Reboot, typography, base styles */
@layer velin.components; /* Component styles */
@layer velin.utilities;  /* Utility classes (highest priority) */

/* Your custom CSS (unlayered) always wins */
.my-class { color: red; }

Mobile First

All responsive utilities are mobile-first — the base class applies to all screen sizes, and breakpoint variants apply from that breakpoint upward using min-width media queries.

/* Base: applies everywhere */
.velin-d-flex { display: flex; }

/* md breakpoint: applies at 768px and up */
@media (min-width: 768px) {
  .velin-d-md-block { display: block; }
}