Display 1.2.2

Control the display box type. Base classes live in display.css; viewport variants live only in responsive.css (VS-037 / 1.2.0 ownership). Deutsch: Display

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Show or hide UI by viewport with .velin-hidden + .velin-{bp}-block / flex / grid.
Switch layout modes at a breakpoint (.velin-flex → .velin-md-grid).
Use print helpers (.velin-no-print, .velin-print-only) for print-only chrome.

When not

Do not invent Bootstrap-style .velin-d-* / .velin-d-md-* — they are not shipped.
Do not expect a full Utility Engine (hover/dark class prefixes) — that remains planned.
Prefer .velin-invisible only when you need space reserved; otherwise use .velin-hidden.

Responsive ownership (1.2.0)

Base display utilities are defined in src/utilities/display.css. Responsive display variants are not duplicated there — they are owned solely by src/utilities/responsive.css so cascade and docs stay single-source.

Layer	File	Examples
Base	`display.css`	`.velin-block`, `.velin-flex`, `.velin-hidden`
Viewport	`responsive.css`	`.velin-sm-flex`, `.velin-md-hidden`, `.velin-lg-grid`
Print	`print.css`	`.velin-no-print`, `.velin-print-only`

Naming grammar (ADR 0004): breakpoint before the property — .velin-md-flex, not .velin-flex-md. Shipping responsive display covers sm / md / lg / xl. The 2xl token exists in grammar and --velin-bp-2xl, but display utilities for 2xl are not generated yet.

Base classes

Class	CSS
`.velin-block`	`display: block`
`.velin-inline`	`display: inline`
`.velin-inline-block`	`display: inline-block`
`.velin-flex`	`display: flex`
`.velin-inline-flex`	`display: inline-flex`
`.velin-grid`	`display: grid`
`.velin-inline-grid`	`display: inline-grid`
`.velin-contents`	`display: contents`
`.velin-hidden`	`display: none`

Responsive display

Pattern: .velin-{sm|md|lg|xl}-{block|flex|grid|hidden|inline|inline-block|inline-flex|contents}.

<!-- Hidden by default, block from md up -->
<div class="velin-hidden velin-md-block">Desktop only</div>

<!-- Visible on small screens, hidden from lg -->
<div class="velin-block velin-lg-hidden">Mobile / tablet</div>

<!-- Flex from sm, grid from lg -->
<div class="velin-sm-flex velin-lg-grid">Adaptive</div>

Desktop only

Mobile / tablet

Adaptive

Print display

Print helpers live in print.css (not the Bootstrap d-print-* names):

<div class="velin-no-print">Hidden when printing</div>
<div class="velin-print-only">Only shown when printing</div>

Hidden when printing

Only shown when printing