anchored-auto-layout
v1.0.0
Published
A zero-JS, HTML-first CSS utility library mapping CSS Anchor Positioning to an iOS Auto Layout-style data-⚓️-* attribute API.
Maintainers
Readme
⚓️ anchored-auto-layout
Zero-JS, HTML-first CSS for CSS Anchor Positioning, with an iOS Auto Layout-style data-⚓️-* attribute API. No ResizeObservers, no portals, no z-index wars.
Install
npm i anchored-auto-layout@import "anchored-auto-layout"; /* readable source */
@import "anchored-auto-layout/min"; /* minified */Or link the file directly: node_modules/anchored-auto-layout/anchored-auto-layout.css.
Use
<button data-⚓️-name="--btn" popovertarget="tip">Hover me</button>
<div id="tip" popover data-⚓️-to="--btn" data-⚓️-below data-⚓️-sync-width>
Anchored below the button, same width.
</div>data-⚓️-to picks the anchor; modifiers like below, above, before, after, align-*, stretch-*, fill, and sync-width position and size the target relative to it.
What ships
anchored-auto-layout.css,dist/anchored-auto-layout.min.css: the librarySPEC.md: full attribute reference and known browser limitationsanchored-auto-layout.html-data.json: VS Code autocomplete data (html.customData)llms.txt: context file for LLM assistants
Browser support
Requires CSS Anchor Positioning (Chromium 125+, Safari 26+). See SPEC.md for limitations.
License
MIT
