Display 1.2.0

Steuere den Display-Box-Typ. Basisklassen liegen in display.css; Viewport-Varianten liegen nur in responsive.css (VS-037 / Ownership in 1.2.0). English: Display

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Studio und die vollstaendige Utility Engine bleiben geplant — ausgelieferte Utilities werden manuell unter @layer utilities, kein vollstaendiger Variantengenerator.

Wann verwenden

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).
Nutze Print-Helfer (.velin-no-print, .velin-print-only) fuer Print-only-Chrome.

Wann nicht

Erfinde keine Bootstrap-artigen .velin-d-* / .velin-d-md-* — they are not shipped.
Erwarte keine vollstaendige Utility Engine (Hover-/Dark-Klassenpraefixe) - das bleibt geplant.
Nutze .velin-invisible nur, wenn Platz reserviert bleiben soll; sonst .velin-hidden.

Responsiv Ownership (1.2.0)

Basis-Display-Utilities sind definiert in src/utilities/display.css. Responsivs Display variants are not duplicated there — they are owned solely by src/utilities/responsive.css damit Cascade und Docs eine einzige Quelle behalten.

Layer	File	Beispiels
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`

Namensgrammatik (ADR 0004): Breakpoint before the property — .velin-md-flex, not .velin-flex-md. Ausgeliefertes responsives Display deckt sm / md / lg / xl. The 2xl token exists in grammar and --velin-bp-2xl, but display utilities for 2xl are not generated yet.

Basisklassen

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`

Responsivs 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>

Nur Desktop

Mobil / Tablet

Adaptiv

Print-Display

Print-Helfer liegen 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>

Beim Drucken ausgeblendet

Nur beim Drucken sichtbar