Anchored Auto Layout
npm

Hover or focus a box to measure it. Click its tag, or press ] and [, to pin one. Esc unpins.

    Legend
    • Anchor: a box with data-⚓️-name
    • Placed by anchors: out of flow
    • Gap from the anchor's edge, in px
    • Edges of the box you're inspecting

    Every tag, line and number here is itself placed by data-⚓️-* attributes. JS only measures.

    DevTools dock side with data-⚓️-side

    A DevTools panel docked before/below/after the page it inspects.

    Full page
    <main class="demo">
  <header class="intro">
    <h1>Dock to side</h1>
    <p>
      DevTools is anchored to the page with one attribute,
      <code>data-⚓️-side</code>. Pick a dock side and the panel swings round;
      its size comes from the page via <code>data-⚓️-sync-*</code>,
      the swing from <code>data-⚓️-tween</code>. The script only swaps attribute values.
    </p>
  </header>

  <div class="controls">
    <fieldset class="seg">
      <legend>Dock side</legend>
      <label title="Dock to left">
        <input type="radio" name="dock" value="before">
        <svg viewBox="0 0 20 16" aria-hidden="true"><rect x="1" y="1" width="18" height="14" rx="2"/><rect class="fill" x="1" y="1" width="7" height="14" rx="2"/></svg>
        <span>before</span>
      </label>
      <label title="Dock to bottom">
        <input type="radio" name="dock" value="below">
        <svg viewBox="0 0 20 16" aria-hidden="true"><rect x="1" y="1" width="18" height="14" rx="2"/><rect class="fill" x="1" y="9" width="18" height="6" rx="2"/></svg>
        <span>below</span>
      </label>
      <label title="Dock to right">
        <input type="radio" name="dock" value="after" checked>
        <svg viewBox="0 0 20 16" aria-hidden="true"><rect x="1" y="1" width="18" height="14" rx="2"/><rect class="fill" x="12" y="1" width="7" height="14" rx="2"/></svg>
        <span>after</span>
      </label>
    </fieldset>
    <label class="xray-toggle"><input type="checkbox" id="xray"> X-ray</label>
  </div>

  <div class="window">
    <div class="chrome" aria-hidden="true">
      <span class="dots"><i></i><i></i><i></i></span>
      <span class="url">https://anchored.example/</span>
    </div>

    <div class="viewport" data-⚓️-root>
      <article class="page" data-⚓️-name="--page">
        <nav class="site-nav"><b>anchored</b><span>Docs</span><span>Blog</span><span>Play</span></nav>
        <section class="hero">
          <h2>Layout that holds on.</h2>
          <p>This page reflows as DevTools takes its space. The panel never measures anything.</p>
        </section>
        <ul class="cards">
          <li>Pins</li><li>Edges</li><li>Side</li><li>Fill</li><li>Tween</li><li>Glide</li>
        </ul>
      </article>

      <section
        class="devtools"
        aria-label="DevTools"
        data-⚓️-to="--page"
        data-⚓️-side="after"
        data-⚓️-align-top
        data-⚓️-sync-width
        data-⚓️-sync-height
        data-⚓️-tween
        data-⚓️-transition="morph"
      >
        <div class="dt-tabs" aria-hidden="true">
          <span class="on">Elements</span><span>Console</span><span>Sources</span><span>Network</span>
        </div>
        <div class="dt-body"><div class="dt-grid">
          <pre class="dom" aria-hidden="true"><span class="t">&lt;body&gt;</span>
  <span class="t">&lt;article</span> <span class="a">data-⚓️-name</span>=<span class="v">"--page"</span><span class="t">&gt;</span>…<span class="t">&lt;/article&gt;</span>
  <span class="sel"><span class="t">&lt;section</span> <span class="a">class</span>=<span class="v">"devtools"</span>
    <span class="a">data-⚓️-to</span>=<span class="v">"--page"</span>
    <span class="a">data-⚓️-side</span>=<span class="v live"></span><span class="t">&gt;</span></span>
<span class="t">&lt;/body&gt;</span></pre>
          <div class="styles" aria-hidden="true">
            <p class="pane-title">Styles</p>
            <pre><span class="s">[data-⚓️-side="<span class="live-raw"></span>"]</span> {
  <span class="p">inset-*</span>: <span class="v">anchor(…)</span>;
}
<span class="s">[data-⚓️-sync-height]</span> {
  <span class="p">height</span>: <span class="v">anchor-size(block)</span>;
}</pre>
          </div>
        </div></div>
      </section>
    </div>
  </div>
</main>

    data-⚓️-align-leadingdata-⚓️-align-topdata-⚓️-namedata-⚓️-rootdata-⚓️-sidedata-⚓️-sync-heightdata-⚓️-sync-widthdata-⚓️-todata-⚓️-transitiondata-⚓️-tween

    Copied