Layout System

VelinStyle provides a complete layout toolkit — containers, a responsive 12-column grid, flex utilities, container queries, and ready-made page layout patterns. Everything uses CSS custom properties and logical properties for full RTL support.

Container

The .velin-container centers content and constrains its width at each breakpoint. It also establishes a container query context named velin.

Default Container

<div class="velin-container">
  <!-- Content centered with responsive max-width -->
</div>

Container Variants

<div class="velin-container velin-container--narrow">...</div>
<div class="velin-container">...</div>
<div class="velin-container velin-container--wide">...</div>
<div class="velin-container velin-container--fluid">...</div>

Responsive Width Table

Grid System

A responsive 12-column grid built on CSS Grid. Use .velin-grid for the container and .velin-col-* classes for column spans.

Equal Columns

<div class="velin-grid velin-grid--cols-3">
  <div>1 / 3</div>
  <div>2 / 3</div>
  <div>3 / 3</div>
</div>

12-Column Spans

<div class="velin-grid velin-grid--cols-12">
  <div class="velin-col-4">col-4</div>
  <div class="velin-col-8">col-8</div>
</div>

<div class="velin-grid velin-grid--cols-12">
  <div class="velin-col-3">col-3</div>
  <div class="velin-col-6">col-6</div>
  <div class="velin-col-3">col-3</div>
</div>

Full-Width Column

<div class="velin-grid velin-grid--cols-12">
  <div class="velin-col-full">Full width</div>
</div>

Auto-Fit Grid

Cards automatically wrap and fill available space with .velin-grid--auto-fit.

<div class="velin-grid velin-grid--auto-fit">
  <div>Auto 1</div>
  <div>Auto 2</div>
  <div>Auto 3</div>
  <div>Auto 4</div>
  <div>Auto 5</div>
</div>

Gap Modifiers

<div class="velin-grid velin-grid--cols-4 velin-grid--gap-2">...</div>
<div class="velin-grid velin-grid--cols-4 velin-grid--gap-8">...</div>

Dense flow and app template

.velin-grid--flow-dense enables grid-auto-flow: dense. Combine .velin-grid.velin-grid--areas-app with .velin-area-head, .velin-area-side, .velin-area-main on children for a named dashboard grid.

<div class="velin-grid velin-grid--gap-4 velin-grid--areas-app">
  <header class="velin-area-head">…</header>
  <aside class="velin-area-side">…</aside>
  <main class="velin-area-main" id="main">…</main>
</div>

Grid API Reference

Flex Utilities

Compose one-dimensional layouts with .velin-flex and its modifiers for direction, alignment, wrapping, and gap.

Row (default)

<div class="velin-flex">
  <div>Item A</div>
  <div>Item B</div>
  <div>Item C</div>
</div>

Column

<div class="velin-flex velin-flex--col">
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</div>

Justify Content

.velin-flex--justify-between

.velin-flex--justify-center

.velin-flex--justify-evenly

<div class="velin-flex velin-flex--justify-between">...</div>
<div class="velin-flex velin-flex--justify-center">...</div>
<div class="velin-flex velin-flex--justify-evenly">...</div>

Align Items

<div class="velin-flex velin-flex--items-center">
  <div>Short</div>
  <div style="padding-block:1.5rem">Tall item</div>
  <div>Short</div>
</div>

Wrap & Gap

<div class="velin-flex velin-flex--wrap velin-flex--gap-3">
  <div>Tag 1</div>
  <div>Tag 2</div>
  <!-- ... -->
</div>

Child Utilities

<div class="velin-flex">
  <div>Fixed</div>
  <div class="velin-flex__grow">Fills remaining space</div>
  <div>Fixed</div>
</div>

Stack & Cluster

<div class="velin-stack">...</div>   <!-- vertical flex, gap-4 -->
<div class="velin-cluster">...</div> <!-- horizontal wrap, gap-4, items-center -->

Flex API Reference

Container Queries

VelinStyle uses container queries (not just media queries) so grid layouts adapt to their container width, not the viewport. The .velin-container class sets container-type: inline-size and container-name: velin automatically.

Responsive Grid via Container

These grids start at 1 column and increase column count based on the container width — resize your browser to see the effect.

<div class="velin-container">
  <!-- container-name: velin is set automatically -->
  <div class="velin-grid velin-grid--cols-1 velin-grid--sm-cols-2 velin-grid--md-cols-3 velin-grid--lg-cols-4">
    <div>Card 1</div>
    <div>Card 2</div>
    <div>Card 3</div>
    <div>Card 4</div>
  </div>
</div>

Container Query Breakpoints

Nested Container Demo

Place content inside a narrower container to see how container queries respond independently from the viewport.

Layout Patterns

Ready-made page-level layouts for common application shells. Apply a single class to your wrapper element and drop in your content.

.velin-layout-sidebar

Sidebar + main content. Collapses to a single column below 48rem.

<div class="velin-layout-sidebar">
  <aside>Sidebar</aside>
  <main>Main Content</main>
</div>

.velin-layout-holy-grail

Classic layout with full-width header/footer and a sidebar beside the main content.

<div class="velin-layout-holy-grail">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>

.velin-layout-sticky-footer

Footer always sits at the bottom, even with minimal content. The <main> grows to fill available space.

<div class="velin-layout-sticky-footer">
  <header>Header</header>
  <main>Content (grows)</main>
  <footer>Sticky Footer</footer>
</div>

.velin-layout-center

Perfectly centers content both horizontally and vertically using place-items: center.

<div class="velin-layout-center">
  <div>Centered content</div>
</div>

.velin-layout-pancake

Three-row stack where the middle row expands to fill all remaining space. Header and footer get auto height.

<div class="velin-layout-pancake">
  <header>Top</header>
  <main>Middle (expands)</main>
  <footer>Bottom</footer>
</div>

.velin-layout-aside-main

Main content with a right sidebar (20rem). Collapses to single column below 56rem.

<div class="velin-layout-aside-main">
  <main>Main Content</main>
  <aside>Right Sidebar</aside>
</div>

.velin-layout-split

Two equal columns with gap; stacks to one column below 48rem.

.velin-layout-dashboard

Expected direct children: header, aside, main (in that order).

.velin-layout-auth

Full-viewport centered shell. Place a card in .velin-layout-auth__panel.

Layout Patterns API

Breakpoints

VelinStyle defines five breakpoint tokens as CSS custom properties. The framework uses a mobile-first min-width media query strategy.

Breakpoint Tokens

Visual Reference

Media Query Strategy

VelinStyle is mobile-first. Base styles target the smallest screens, then progressive enhancements are added at each breakpoint using min-width:

/* Base: mobile-first (all widths) */
.my-component { flex-direction: column; }

/* sm: 36rem / 576px and up */
@media (min-width: 36rem) {
  .my-component { flex-direction: row; }
}

/* md: 48rem / 768px and up */
@media (min-width: 48rem) {
  .my-component { gap: var(--velin-space-6); }
}

/* lg: 62rem / 992px and up */
@media (min-width: 62rem) {
  .my-component { max-inline-size: 60rem; }
}

Container Queries vs Media Queries

Layout audit (0.8.0)

Prüfe HTML auf typische Flex-, Grid- und Responsive-Fehler. Ausführlich: Responsive Layout Guide.

npx velinstyle layout audit ./samples
npx velinstyle layout suggest page.html
npx velinstyle layout fix page.html --write