container-lines

What problem does it solve?

Container lines make structured web layouts easier to design and implement by providing subtle, measurable boundaries that improve alignment and visual rhythm.

Core Features & Use Cases

• Vertical container-size guide lines: Draws thin left/right lines aligned to the main content container to create consistent structural tension.
• Mini corner squares: Adds small, exact corner markers at container or section intersections for a precise technical/editorial frame.
• Consistent, non-interfering behavior: Keeps guides subtle, behind content but above the page background, and disables pointer events so UI remains fully usable.

Quick Start

Add the container-lines and corner-squares classes to your page/layout shell and the relevant sections so the aligned vertical guides and mini corner squares render automatically.