@appsweet-co/bones-css
v0.2.1
Published
A lightweight utility for working with skeleton text and images
Downloads
3
Readme
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.