skelly-wc

A collection of custom elements to quickly build skeletons. This is based on the skellyCSS package created by RIMdev.

• skelly-wc
  • Installation
  • Components
    • skelly-image
    • skelly-text
  • Examples
  • Development

Installation

Install via npm:

npm install @mrtrimble/skelly-wc

Install via CDN:

<script 
  type="module" 
  src="https://cdn.jsdelivr.net/npm/@mrtrimble/skelly-wc/dist/skelly-wc.js"
>
</script>

Components

skelly-image

Import component into your project.

import { SkellyImage } from '@mrtrimble/skelly-wc/lib/components/SkellyImage';

Add <skelly-image></skelly-image> to your HTML document wherever you need a placeholder image.

<figure>
  <skelly-image></skelly-image>
</figure>

Add a label by passing text into the default slot.

<figure>
  <skelly-image>
    Placeholder Text
  </skelly-image>
</figure>

skelly-image contains five attributes for customization.

• aspect-ratio - sets the aspect ratio of the placeholder image (default: 4/3)
• height - sets height of the placeholder image (default: auto)
• width - sets width of the placholder image (default: auto)
• image-color - sets the color of the line (default: #CCCCCC)
• label-color - sets number of lines (default: #000000)

<figure>
  <skelly-image
    height="300px"
    width="300px"
    aspect-ratio="1"
    image-color="blue"
    label-color="orange">
    Placeholder Text
  </skelly-image>
</figure>

skelly-text

Import component into your project.

import { SkellyText } from '@mrtrimble/skelly-wc/lib/components/SkellyText';

Add <skelly-text></skelly-text> to your HTML document wherever you need a skeleton.

<p>
  <skelly-text></skelly-text>
</p>

skelly-text contains two attributes for customization.

• line-color - sets the color of the line (default: #CCCCCC)
• line-count - sets number of lines (default: 5)

<p>
  <skelly-text line-count="3" line-color="tomato"></skelly-text>
</p>

Examples

• skelly-image demo on CodePen
• skelly-text demo on CodePen

Development

Clone repository:

git clone https://github.com/mrtrimble/skelly-wc

Install dependencies:

npm install

Start development server:

npm run dev