Rahmen 1.2.0

Nutze Border-Utilities fuer additive und subtraktive Rahmen, Farben, Breiten und Radien auf Basis der VelinStyle-Tokens. English: Borders

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

Nutze Utilities fuer Rahmenbreite, -stil, -farbe und Radius fuer Teiler und Rahmen.
Bevorzuge .velin-border plus Farb-/Radius-Utilities statt eigener Komponenten-CSS.

Wann nicht

Mische keine unpraefigierten Bootstrap-Border-Klassen mit velin-*-Utilities.

Additive Rahmen

Fuege jedem Element Rahmen hinzu:

<div class="velin-border">All sides</div>
<div class="velin-border-top">Top only</div>
<div class="velin-border-end">End (right in LTR)</div>
<div class="velin-border-bottom">Bottom only</div>
<div class="velin-border-start">Start (left in LTR)</div>

All sides

Top only

End (right in LTR)

Bottom only

Start (left in LTR)

Subtraktive Rahmen

Remove borders selectively:

<div class="velin-border velin-border-top-0">No top border</div>
<div class="velin-border velin-border-end-0">No end border</div>
<div class="velin-border-0">No borders</div>

No top border

No end border

No borders

Rahmenfarbe

Setze die Rahmenfarbe mit Theme-Tokens:

<div class="velin-border velin-border-primary">Primary</div>
<div class="velin-border velin-border-success">Success</div>
<div class="velin-border velin-border-danger">Danger</div>
<div class="velin-border velin-border-warning">Warning</div>

Primary

Success

Danger

Warning

Rahmenbreite

Steuere die Rahmenstaerke mit .velin-border-{1|2|3|4|5}:

<div class="velin-border velin-border-1">1px</div>
<div class="velin-border velin-border-2">2px</div>
<div class="velin-border velin-border-3">3px</div>
<div class="velin-border velin-border-5">5px</div>

1px

2px

3px

5px

Rahmenradius

Round corners with radius utilities:

<div class="velin-rounded">Default radius</div>
<div class="velin-rounded-0">No radius</div>
<div class="velin-rounded-1">Small</div>
<div class="velin-rounded-2">Medium</div>
<div class="velin-rounded-3">Large</div>
<div class="velin-rounded-4">Extra large</div>
<div class="velin-rounded-circle">Circle</div>
<div class="velin-rounded-pill">Pill</div>

<!-- Directional -->
<div class="velin-rounded-top">Top corners</div>
<div class="velin-rounded-end">End corners</div>
<div class="velin-rounded-bottom">Bottom corners</div>
<div class="velin-rounded-start">Start corners</div>

Default radius

No radius

Small

Medium

Large

Extra large

Circle

Pill

Top corners

End corners

Bottom corners

Start corners