JSPM – @birdapi/velinstyle@0.6.1

Package Exports

@birdapi/velinstyle
@birdapi/velinstyle/dist/velinstyle-components.js
@birdapi/velinstyle/dist/velinstyle.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@birdapi/velinstyle) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Website · Docs · Samples · Playground · Theme Builder · Issues

English · Deutsch

The problem & the fix
What you get
Architecture
Quick start
Why VelinStyle?
Demo gallery
CLI reference
Ecosystem
Join in
Browser support
License

The problem & the fix

The problem

Teams ship UI under pressure. Accessibility and consistent theming are often bolted on late—if at all. Heavy bundles, Bootstrap sameness, or Tailwind sprawl frustrate designers and engineers alike.

The VelinStyle answer

WCAG AA patterns, OKLCH tokens, container-aware layout, and interactive Web Components are part of the system—not an afterthought. Readable CSS, optional CLI automation, zero preprocessor lock-in.

What you get

	Capability	What it means for you
♿	WCAG AA by design	Focus, ARIA, and keyboard patterns in components and overlays
🎨	OKLCH + 13 theme presets	Perceptually uniform colors; dark mode via token swap
📦	~46 KB CSS + ~66 KB JS (min)	Lean defaults vs. heavier all-in-one stacks
📐	Container Queries + utilities	Components adapt to their container, not only the viewport
🧩	25 CSS modules · 21 Web Components	Modals, tabs, drawers, toasts, icons—documented APIs in CSS & WC docs
🛠️	Optional CLI	`init`, `build`, `icons`, `scan`, `prefix`, `blueprint`, `tokens build`
🌍	RTL-ready	Logical properties and layout-minded defaults · RTL sample

Architecture

flowchart LR
  tokens[tokens] --> reset[reset]
  reset --> base[base]
  base --> a11y[a11y]
  a11y --> layout[layout]
  layout --> components[components]
  components --> utilities[utilities]
  utilities --> themes[themes]

Entry: src/velinstyle.css · Build output: dist/ (npm run build)

@layer tokens, reset, base, a11y, layout, components, utilities, themes;

Quick start

① Install

npm install @birdapi/velinstyle

② Link CSS + components (ES modules)

<link rel="stylesheet" href="node_modules/velinstyle/dist/velinstyle.min.css">
<script type="module" src="node_modules/velinstyle/dist/velinstyle-components.min.js"></script>

CDN alternative (skip npm install)

<link rel="stylesheet" href="https://unpkg.com/velinstyle@latest/dist/velinstyle.min.css">
<script type="module" src="https://unpkg.com/velinstyle@latest/dist/velinstyle-components.min.js"></script>

③ Mark up your first screen

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="velin-container velin-p-6">
  <p class="velin-lead velin-text-muted">Hello, VelinStyle.</p>
  <button type="button" class="velin-btn velin-btn--primary">Primary action</button>
</div>

Cloning this repo? dist/ is not committed. Run npm install and npm run build, then point HTML at dist/velinstyle.min.css and dist/velinstyle-components.min.js. Legacy pages without modules: velinstyle-components.iife.js — see docs.

Why VelinStyle?

A coherent product language—prefix classes (velin-), explicit @layer architecture, modern CSS (@scope, nesting, :has())—without sacrificing ship speed.

	Bootstrap	Tailwind	VelinStyle
A11y	⚠️ Partial	— Not built-in	✅ WCAG AA structurally
Color	HEX/RGB	HEX/RGB	✅ OKLCH + tokenized themes
Dark mode	⚠️ Build / manual	`dark:` variants	✅ Token swap (`data-velin-theme`)
Layout	Viewport-first	Viewport utilities	✅ Container Queries + media
Interactivity	⚠️ Legacy JS patterns	Bring your own	✅ Web Components
Bundle (indicative)	~230 KB CSS+JS	JIT / varies	✅ ~46 KB CSS + ~66 KB JS (min)

Demo gallery

Demo	Page	Demo	Page
Landing	samples/landing.html	Dashboard	samples/dashboard.html
Login	samples/login.html	Sign up	samples/signup.html
Pricing	samples/pricing.html	E-commerce	samples/ecommerce.html
Blog	samples/blog.html	Portfolio	samples/portfolio.html
Chat	samples/chat.html	Email	samples/email.html
Kanban	samples/kanban.html	Settings	samples/settings.html
RTL layout	samples/rtl.html	A11y patterns	samples/a11y-patterns.html

Tool	Page
HTML playground	tools/playground/index.html
OKLCH theme builder	tools/theme-builder/index.html

CLI reference

All commands: npx velinstyle <command> · npx velinstyle --help

Project & build — init, build, themes, add

npx velinstyle init — creates velinstyle.config.js (layer selection, theme, scan options).
npx velinstyle build — custom CSS bundle from selected layers (--output / -o, --minify).
npx velinstyle themes — lists 13 theme presets.
npx velinstyle add <component> — copies a single component CSS file into your project.

Icons — multi-provider sprite workflow

npx velinstyle icons list — Lucide, Heroicons, Bootstrap Icons, Material Symbols, Font Awesome, Tabler.
npx velinstyle icons add lucide --icons menu,search,check
npx velinstyle icons add heroicons --icons arrow-left --variant outline
npx velinstyle icons build — rebuilds sprite (from a VelinStyle clone: writes icons/svg/ and rebuilds).

scan — security, a11y & CSS lint

npx velinstyle scan [path] — HTML, CSS, JS; --format json for CI.
--severity — filter minimum level: error | warning | info.
--fix — safe auto-fixes only; --fix-dry-run lists files without writing.
--fix-lang — BCP 47 for setting lang on <html> (default en).

Auto-fixes (examples): rel="noopener noreferrer" on risky target="_blank"; lang on <html>; skip link when id="main" exists; raw z-index → --velin-z-*.

Not auto-fixed: javascript: URLs, eval, raw innerHTML, inline event handlers — fix in source.

Trusted Types / XSS: the scanner does not replace CSP policies. Web Components use escapeHTML() / sanitizeURL(); see docs/security.html.

prefix — class codemod & JSON maps

npx velinstyle prefix <folder> — dry-run by default; --write applies changes.
--bootstrap-display — maps Bootstrap d-* to Velin display classes.
velinstyle-prefix-map.json in the target folder or --map file.json — explicit token → class mappings (overrides catalog and Bootstrap aliases). Sample: examples/velinstyle-prefix-map.sample.json.

blueprint — 14 HTML snippets

npx velinstyle blueprint list
npx velinstyle blueprint <name> -o snippet.html

Ids: modal, form-login, layout-dashboard, navbar-header, hero-section, card-grid, table-responsive, alert-stack, breadcrumb-bar, footer-simple, form-contact, pagination-bar, search-field, sidebar-layout.

tokens build — design tokens → CSS

npx velinstyle tokens build --input examples/tokens.sample.json -o tokens-out.css

Ecosystem

Starters & packages

templates/vite-velinstyle — Vite + 3 pages + theme toggle
@velinstyle/react — experimental thin React wrappers

Docs

Getting started · Migration
A11y patterns · Security

Development (this repo)

npm install
npm run dev      # serve on :3000
npm run build
npm test
npm run test:a11y

Themes (13): brutalist, corporate, earth, forest, midnight, neon, nordic, ocean, pastel, retro, sharp, soft, sunset — see docs/themes.html.

Join in

If VelinStyle saves you time or raises the bar for inclusive UI:

Star the repo so others discover it.
Open an issue with feedback, edge cases, or ideas.
Open a PR following CONTRIBUTING.md.

Maintainers: RELEASING.md · SECURITY.md

Browser support

VelinStyle is mobile-first. Use a current evergreen browser (recent Safari on iOS, Chrome/Firefox on Android and desktop). OKLCH, Container Queries, @layer, and Web Components need modern engines. Include the viewport meta tag. Older in-app WebViews may mis-render colors or layout.

License

Made with care for the web by SkyliteDesign

@birdapi/velinstyle