Float 1.2.2

Toggle floats on any element using logical-property float utilities. Deutsch: Float

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

Use float utilities only for legacy wrapping around media.

When not

Prefer flex/grid for new layouts — floats are a last resort.

Float Classes

<div class="velin-float-start">Float start (left in LTR)</div>
<div class="velin-float-end">Float end (right in LTR)</div>
<div class="velin-float-none">No float</div>

Responsive Floats

Responsive variants exist for each breakpoint:

<div class="velin-float-sm-start">Float start on sm+</div>
<div class="velin-float-md-end">Float end on md+</div>
<div class="velin-float-lg-none">No float on lg+</div>

Clearfix

Clear floated children by adding .velin-clearfix to the parent:

<div class="velin-clearfix">
  <img class="velin-float-start" src="..." alt="...">
  <p>Text wrapping around the floated image...</p>
</div>