Getting started
One stylesheet, then attributes. Nothing to initialise.
Install
One CSS file, 19.9 KB, 37 attributes. Get it from npm:
npm i anchored-auto-layout@import "anchored-auto-layout"; /* readable source */
@import "anchored-auto-layout/min"; /* minified */Without a build step, link it from a CDN or copy anchored-auto-layout.css into your project.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/anchored-auto-layout@1/dist/anchored-auto-layout.min.css">Your first anchor
Name an AnchorAny element with data-⚓️-name., point a TargetAn element placed against an anchor. It leaves the flow automatically. at it, say which edge goes where.
<button data-⚓️-name="--save" popovertarget="save-tip">
Save
</button>
<div id="save-tip" popover="hint"
data-⚓️-to="--save"
data-⚓️-below
data-⚓️-align-x="center"
data-⚓️-try="flip-y">
Saved to drafts
</div>- The button is an anchor named
--save. - The popover's anchor. Edge attributes after it refer to
--save. - Top edge on the button's bottom edge.
- Centred on the button.
- Flips above when there's no room below.
Saved to drafts
That's the markup above, live. Press Save.
Named and implicit
Without a value, an edge attribute uses data-⚓️-to. With one, it picks its own anchor, so one element can follow two.
<div data-⚓️-to="--card" data-⚓️-below data-⚓️-sync-width></div>
<aside data-⚓️-align-top="--figure-3" data-⚓️-after="--article"></aside>The second is a margin note, like the ones on this page.
Editor autocomplete
The package ships VS Code HTML custom data for every attribute.
{
"html.customData": [
"./node_modules/anchored-auto-layout/anchored-auto-layout.html-data.json"
]
}