llms.txt
For the assistant in your editor. /llms-full.txt adds the spec and the full reference.
# Anchored Auto Layout
> A CSS library that writes CSS Anchor Positioning as HTML attributes, with iOS Auto Layout-style names: `data-⚓️-to`, `data-⚓️-below`, `data-⚓️-sync-width`. One CSS file. No JavaScript, ResizeObservers, portals or z-index juggling.
Install with `npm i anchored-auto-layout`, then `@import "anchored-auto-layout";` (or `@import "anchored-auto-layout/min";` for the minified file). Needs anchor positioning and typed `attr()`: Chrome and Edge 133+. Safari has typed `attr()` only in Technology Preview, and Firefox is untested. When in doubt about behaviour, read the shipped files for the installed version.
## Library
- [anchored-auto-layout.css](anchored-auto-layout.css): The library. One file, no build step or preprocessor; link it and use the attributes.
## Docs
- [SPEC.md](SPEC.md): The API reference. Every `data-⚓️-*` attribute and its values, the syntax rules (named `--x` values vs. boolean attributes that use `data-⚓️-to`), built-in behaviour (top-layer reset, sub-menu contexts, anchored container queries, AIM entry morphing) and the known browser limitations with workarounds. Read it before answering anything about attribute syntax.
## Notes for LLMs assisting a developer with this library
- Every attribute is namespaced `data-⚓️-*`, with the literal ⚓️ emoji in the name. That's on purpose (it keeps layout attributes visually apart from styling classes like Tailwind). It is not a typo or a placeholder to remove.
- A value starting with `--` (e.g. `data-⚓️-below="--header"`) targets the anchor named by `data-⚓️-name="--header"` elsewhere. The boolean form (`data-⚓️-below` with no value) targets whatever anchor `data-⚓️-to="--x"` names on the same element.
- Don't suggest JavaScript (ResizeObserver, portals, Popper-style libraries) for anything the library already covers.
- Before recommending an attribute combination, check the "Known Browser Limitations" section of SPEC.md. Some combinations have confirmed browser gaps that aren't library bugs, e.g. an automatic `flip-block`/`flip-inline` fallback on `[popover]`/`<dialog>` targets in specific configurations.
## On this site
- [/llms-full.txt](/llms-full.txt): llms.txt, SPEC.md, and the attribute reference generated from the CSS (every attribute, every value, the exact declarations it applies, and the custom properties) as one plain-text file. Fetch this one if you can only fetch one.
- [/SPEC.md](/SPEC.md): SPEC.md as raw markdown (rendered at [/docs/spec/](/docs/spec/)).
- [/anchored-auto-layout.css](/anchored-auto-layout.css): The library, the same file the npm package ships.
- [/anchored-auto-layout.html-data.json](/anchored-auto-layout.html-data.json): Every `data-⚓️-*` attribute with a description and its value suggestions, in VS Code's HTML custom data format.
## Docs pages
- [Getting started](/docs/)
- [Concepts](/docs/concepts/)
- [Attributes](/docs/reference/)
- [Browser support](/docs/browser-support/)
- [Full spec](/docs/spec/)
- [Playground](/playground/)
## Recipes
Each link is a complete standalone HTML page: the demo's markup, CSS and JS with the library linked from `/anchored-auto-layout.css`. Copy one whole as a working starting point. The annotated page for each is at `/recipes/<slug>/`.
- [DevTools dock side with data-⚓️-side](/recipes-live/01-devtools-dock/): A DevTools panel docked before/below/after the page it inspects.
- [Drag to dock: chat-head snapping with data-⚓️-side](/recipes-live/02-drag-to-dock/): Drag a picture-in-picture camera bubble and release: it snaps to the nearest side of the call and swings there.
- [RTL mirror: logical anchor sides](/recipes-live/03-rtl-mirror/): A chat UI whose tooltips, timestamps, reaction badge, presence dot, hint and menu are all placed with logical data-⚓️-* sides (before/after/align-trailing).
- [Chat sides](/recipes-live/04-chat-sides/): Chat bubbles placed with data-⚓️-side="before|after" around dots on a centre spine.
- [Compass menu](/recipes-live/05-radial-menu/): A radial/compass action menu: four items placed above/after/below/before a hub with data-⚓️-side, opening out of the hub with data-⚓️-morph-from.
- [The tooltip that argues](/recipes-live/06-argumentative-tooltip/): Click to cycle the requested side, or drag the button into a corner: data-⚓️-try="flip-all" lets the browser overrule the request, and @container anchored(fallback) queries report asked vs. got.
- [Coach-mark tour that walks around each target](/recipes-live/07-coach-mark-tour/): A product tour whose one coach mark hops between targets and sides (below, after, above, before) with data-⚓️-to + data-⚓️-side + data-⚓️-tween, and a data-⚓️-fill spotlight that follows along.
- [Corner toasts that pick a side](/recipes-live/08-corner-toasts/): Toasts that stack below top-corner anchors and above bottom-corner anchors.
- [Filter, sort & drag grid that glides](/recipes-live/09-filter-sort-grid/): Filter chips hide cells, sort buttons and drag/Alt+arrow reorder only change CSS order; every swatch is anchored to its grid cell with data-⚓️-fill + data-⚓️-transition="glide" + data-⚓️-scope-name, so it glides to it…
- [Masonry that glides](/recipes-live/10-masonry-reflow/): A CSS multi-column masonry board whose cards glide to their new column when the column width changes or the board is resized.
- [Card ↔ list view toggle](/recipes-live/11-card-list-toggle/): Switch a music library between cards and a list: only the invisible grid changes, and three anchored layers per item (background, cover, text) morph to their new slots with data-⚓️-fill + data-⚓️-transition="morph".
- [Resizable heat-map that re-flows](/recipes-live/12-resizable-heatmap/): A GitHub-style contribution calendar: drag the handle and the weeks wrap into bands while 371 day squares glide to their new spots (data-⚓️-fill + data-⚓️-transition="glide", one scoped --day name per cell).
- [iOS app shell: nav bar, tab bar, push, sheet and split view](/recipes-live/13-ios-app-shell/): A UITabBarController + UINavigationController shell built from constraints.
- [iOS profile with proportional constraints](/recipes-live/14-ios-profile-proportional/): A UIKit-style profile screen built from Auto Layout constraints written as data-⚓️-* attributes, with proportional widths from sync-width and --⚓️-mult-x.
- [iOS sign-up form + keyboardLayoutGuide](/recipes-live/15-ios-form-keyboard/): A UIKit-style sign-up form built as a constraint chain, with the primary button anchored data-⚓️-side="above" a simulated keyboardLayoutGuide so it rides the keyboard up.
- [iOS adaptive dashboard: size classes, readable guide & priorities](/recipes-live/16-ios-adaptive-dashboard/): A Health-style summary built like a UIKit screen, with widget cards that go from one column to two by swapping one data-⚓️-side value and their width multipliers.
- [Magnetic table columns: values glide to new anchors](/recipes-live/17-split-table/): Recreates the 'tables that split, stretch and snap into place' interaction (Operate, Alvish Baldha).
- [Barrel roll number counter: digits glide between anchored slots](/recipes-live/18-barrel-counter/): A live count up/count down number where every digit is a ten-numeral barrel.
- [Archive an email: the row's height glides shut and the rest slide up](/recipes-live/19-archive-list/): An email list where each message is an invisible slot with a visible card data-⚓️-fill on it and data-⚓️-transition=glide.
- [Animated grid reflow (after Bramus)](/recipes-live/bramus-grid-reflow/): Bramus's animated CSS grid technique rebuilt with the data-⚓️-* attribute library: anchor-scope + data-⚓️-fill, zero JS.