Utility API

VelinStyle ships a comprehensive set of utility classes that follow a consistent naming pattern, support responsive breakpoints, and can be customized through CSS custom properties.

Naming Convention

All VelinStyle utilities follow the pattern .velin-{property}-{value}. Responsive variants append a breakpoint prefix: .velin-{property}-{breakpoint}-{value}.

<!-- Base utility -->
<div class="velin-d-flex">...</div>

<!-- Responsive: flex only on md and up -->
<div class="velin-d-md-flex">...</div>

<!-- Spacing: margin-top 4 on lg -->
<div class="velin-mt-lg-4">...</div>

Available Breakpoints

Responsive utilities are generated for the following breakpoints:

Breakpoint	Prefix	Min-width
Extra small	None	0
Small	`sm`	576px
Medium	`md`	768px
Large	`lg`	992px
Extra large	`xl`	1200px
Extra extra large	`xxl`	1400px

Customization

VelinStyle utilities are built on CSS custom properties. Override any token at the :root level to apply global changes, or scope overrides to a specific selector.

:root {
  --velin-spacer: 1rem;
  --velin-primary: #6d5cff;
  --velin-border-radius: 0.5rem;
}

.my-section {
  --velin-primary: #e63946;
}

Framework utility modules (generated reference)

VelinStyle ships extra utility CSS under src/utilities/. Narrative pages above cover common patterns; the tables below link to auto-generated class lists synced from the framework (velinstyle docs generate --scope utilities).

Module	Generated reference	Related narrative docs
`anchor.css`	anchor.md	Position
`scope.css`	scope.md	Utility coverage
`state.css`	state.md	Interactions
`gradient.css`	gradient.md	Background
`scroll-animation.css`	scroll-animation.md	Scroll-driven animations
`view-transition.css`	view-transition.md	View transitions
`container-style.css`	container-style.md	Containers
`responsive.css`	responsive.md	Responsive layout

Full index: utilities/README.md · Generated reference hub.

CSS Layers

VelinStyle outputs its CSS inside @layer declarations so your custom styles always win without specificity battles:

@layer velin.base — reboot and typography
@layer velin.components — component styles
@layer velin.utilities — utility classes (highest layer priority)

Important Flag

By default, utility values do not use !important. Because they live in the highest CSS layer, they naturally override component styles. If you need !important for integration with third-party CSS, add overrides in your own stylesheet using @layer above the framework layer.