@appsweet-co/bones-css

A lightweight utility for working with skeleton text and images

Quick Start

Install

npm i @appsweet-co/bones-css

Add the CSS file to your HTML as needed.

<link rel="stylesheet" href="./node_modules/@appsweet-co/bones-css/dist/bones.min.css">

You can also import Spock CSS directly from a CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@appsweet-co/bones-css@latest/dist/bones.min.css">
  
<!-- OR -->
  
<link rel="stylesheet" href="https://unpkg.com/@appsweet-co/bones-css@latest/dist/bones.min.css">

Remember to replace latest with a specifc version number when using the CDN. See Unpkg and jsDelivr for details.

Usage

Add the bones class to any element.

<h1 class="bones" style="--bones-inline-size: 65%;">Hidden Text Here</h1>
<p class="bones">Also hidden here</p>
<p class="bones">And here</p>

Include the animated class to animate the elements.

<h1 class="bones animated" style="--bones-inline-size: 65%;">Hidden Text Here</h1>
<p class="bones animated">Also hidden here</p>
<p class="bones animated">And here</p>

You can also add custom CSS as needed.

Customize

Use CSS Variables to modify the look at feel of your skeleton placeholders.