Introduction

Get started with VelinStyle, a modern utility-first CSS framework featuring responsive layout, extensive components, rich animations, and built-in Web Components — all in a single stylesheet.

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.

Why VelinStyle?

VelinStyle combines the best ideas from modern CSS frameworks into a single, cohesive toolkit:

Utility-first classes — rapidly prototype and build production layouts without writing custom CSS.
Rich component library — 30+ production-ready components including Accordion, Card, Modal, Drawer, Stepper, Timeline, and more.
Built-in animations — entrance, attention, exit, scroll-driven, and View Transitions API support out of the box.
Web Components — <velin-icon>, <velin-dialog>, and others as native custom elements.
Dark mode — full color mode support via CSS variables and data-theme attribute.
RTL ready — logical properties ensure seamless right-to-left language support.
Zero dependencies — pure CSS + optional vanilla JS components. No jQuery, no build step required.

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:

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