Skip to content

v0.1.0 — DOM snapshot skeletons with Tailwind (vanilla JS)

Latest

Choose a tag to compare

@JanzenDC JanzenDC released this 08 Apr 06:06

First packaged release of boneyard-tailwind: snapshot real UI in the browser, get matching skeleton placeholders using Tailwind CSS only. No React required—works with plain HTML, PHP, Vue, etc.

Highlights

  • snapshotBones(element) — reads layout from the live DOM → bone rects (x/w in %, y/h in px).
  • mountSkeleton / skeletonHTML — renders placeholders with Tailwind (animate-pulse, arbitrary positions).
  • pickBreakpoint — choose the right snapshot when you store multiple widths under breakpoints.
  • IIFE bundle for script tags and CDNs: dist/boneyard-tailwind.min.js → global BoneyardTailwind.

CDN (jsDelivr + GitHub)

Load Tailwind on the page first, then this script:

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/gh/JanzenDC/skeleton-loading@v0.1.0/dist/boneyard-tailwind.min.js"></script>