Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Getting Started
  3. Contents

Contents

Discover what ships with VelinStyle v0.6.x — compiled CSS bundles, optional JavaScript for Web Components, theme presets, the icon system, CLI workflows, and the modular src/ CSS architecture.

Compiled CSS

The dist/ folder ships multiple CSS bundles so you can include exactly what you need:

File Description Size (gzip)
velinstyle.min.css Full framework — components, utilities, animations, reboot, layout, and form-validation helpers layered in @layer ~38 KB
velinstyle.css Unminified version for development / debugging —
dist/themes/*.min.css Optional theme presets (brutalist, nordic, …) ~1–2 KB each
velin-icons.svg Default icon sprite (also copied to dist/velin-icons.svg) —

JavaScript

VelinStyle's interactive features are powered by lightweight Web Components. The JS bundle is optional — pure CSS components work without it.

File Description
velinstyle-components.min.js Web Components bundle — <velin-icon>, <velin-dialog>, and more 
<!-- IIFE bundle (global custom elements) -->
<script src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@0.8.0/dist/velinstyle-components.iife.js"></script>

<!-- Or ES module entry (bundler / type="module" pages) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@birdapi/velinstyle@0.8.0/dist/velinstyle-components.js"></script>

<!-- Then use custom elements anywhere -->
<velin-icon name="star" size="24"></velin-icon>

Themes

Built-in light, dark, and auto schemes follow data-velin-theme on <html> or any section. Additional art-direction presets ship as separate stylesheets under dist/themes/*.css (also available minified) — load one or more files next to the core bundle.

See Color modes for switching and persistence patterns.

Icons

The <velin-icon> Web Component renders inline SVG icons from a bundled sprite sheet. Over 200 icons are available covering common UI actions, social brands, and developer tools. 

<velin-icon name="heart" size="24"></velin-icon>
<velin-icon name="star" size="24"></velin-icon>
<velin-icon name="check-circle" size="24"></velin-icon>
<velin-icon name="arrow-right" size="24"></velin-icon>

CLI

The velinstyle npm package exposes a CLI for custom CSS builds, icon pipelines, HTML blueprints, design-token compilation, and static analysis (scan) for security and accessibility.

Full command reference: CLI documentation.

Samples

The repository samples/ directory contains full-page demos (dashboard, landing, login, kanban, …) you can open locally after cloning — useful as copy-paste starting points alongside blueprints.

github.com/SkyliteDesign/velinstyle/tree/main/samples

Source files

VelinStyle is implemented as plain CSS modules (no Sass requirement). The main entry src/velinstyle.css imports layers for reboot, layout, components, utilities, animations, and optional add-ons. 

src/
├── velinstyle.css          Main @import entry
├── layout/
│   ├── grid.css            Grid & column helpers
│   ├── patterns.css        Page shells (.velin-layout-*)
│   └── …
├── components/
│   ├── form-validation.css Optional form error/hint styling
│   └── …
├── utilities/
├── animations/
└── …

High-level shells are documented under Layout → Patterns. Integration topics live in the Guides section.

Theme wählen