1. Docs
2. Extend
3. Approach

Approach

Understand the design principles behind VelinStyle — why it works the way it does.

Philosophy

• Utility-first, component-friendly — build with utilities, extract components when patterns repeat.
• CSS-native — built on modern CSS features (custom properties, @layer, color-mix(), container queries) instead of preprocessor hacks.
• Zero JavaScript required — the CSS works standalone. JS components are progressive enhancements.
• Accessible by default — ARIA patterns, focus management, and reduced-motion support are built in.

CSS Layers

VelinStyle uses @layer to organize its CSS into predictable cascade levels:

@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; }
}