Skip to main content
VelinStyle v1.3.0
  1. Docs
  2. Getting Started
  3. Introduction

Introduction 1.2.2

VelinStyle is a component-first CSS framework with responsive layout, animations, utilities for one-off tweaks, and 43 canonical Web Components. CSS and runtime are stable; Design Intelligence (plan / review / agent meta) is beta / foundation in 1.2.0. Deutsch: Einführung

Maturity

Stylesheet, Web Components, and JS runtime are stable (production-ready).

velinstyle plan, review, knowledge graph, and velin-agent.json are beta / foundation — usable now, still expanding.

Studio and the complete Utility Engine remain planned.

Publish: use velinstyle production for trimmed go-live CSS/JS (1.2.2+).

Prefer seeing it first?

Open the homepage Begin stage — prompt → plan → components → generated UI — then come back here for the reference.

When to use

When not to use

The Tailwind sprawl problem

Intensive Tailwind work often produces a class salad: a simple button can need 10–15 utilities. VelinStyle still uses a velin- prefix, but ships semantic, ready-made components (utilities only for tweaks) plus optional blueprints / plan recipes — Studio remains planned. Migrating from Tailwind? See the Migration Guide. 

<!-- 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">
  Save
</button>

<!-- VelinStyle -->
<button class="velin-btn velin-btn--primary">Save</button>

Quick Start

The fastest way to get VelinStyle into your project is via the CDN. Add the following <link> and <script> tags to the <head> of your HTML page: 

<!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">Hello, VelinStyle!</h1>
    <p class="velin-lead velin-text-muted">You&rsquo;re all set.</p>
    <button class="velin-btn velin-btn--primary">Get Started</button>
  </div>
</body>
</html>

Hello, VelinStyle!

You’re all set.

Accessibility bootstrap (optional)

After loading components, call initA11y() for a live-region announcer and scroll padding when using a fixed header (details). 

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

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

Why VelinStyle?

VelinStyle exists so teams can ship readable HTML, accessible defaults, and agent-ready structure — without adopting a JavaScript framework as their design system.

What's Included

The compiled download contains the following files: 

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

Stay up to date on the development of VelinStyle and reach out to the community: