Skeleton Elements

• Installation
• Styles
  • CSS
  • SCSS
  • CSS Custom Properties (Variables)
• Skeleton Block
• Skeleton Text
• Custom Fonts
• Loading Effects

Installation

You can install Skeleton Elements via npm:

npm i skeleton-elements --save

Styles

CSS

Skeleton Elements requires stylesheet to be included:

<link rel="stylesheet" href="path/to/skeleton-elements.css" />

With bundler (like webpack) you can import styles directly from JavaScript:

import 'skeleton-elements/skeleton-elements.css';

Or it can be included for each component separately:

• skeleton-elements/skeleton-block.css - Block component
• skeleton-elements/skeleton-text.css - Text component
• skeleton-elements/skeleton-effect.css - Effects

SCSS

SCSS styles are also included:

• skeleton-elements/skeleton-elements.scss - All styles
• skeleton-elements/skeleton-block.scss - Block component
• skeleton-elements/skeleton-text.scss - Text component
• skeleton-elements/skeleton-effect.scss - Effects

CSS Custom Properties (Variables)

There are following CSS Variables available:

• --skeleton-color (default #ccc) - used as text color for skeleton text, and background color of skeleton block, avatar and image
• --skeleton-icon-color (default rgba(0, 0, 0, 0.25)) - used as icon color in skeleton avatar and image

Skeleton Block

Skeleton block is just a usual block element with gray background color, that can be in any required size.

To make Skeleton Block, we need to add skeleton-block class to element:

Skeleton Text

Skeleton text uses custom Skeleton font for making responsive text placeholders.

Special Skeleton font renders every character as small gray rectangle. When we wrap text with skeleton-text class, it converts text to gray blocks/lines. Advantage over Skeleton Block is that such "skeleton text" can be fully responsive and its size will reflect actual text size.

Skeleton text font supports following characters set (including "space"):

0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z _ -   . , : ; / ! / * & ' " | ( ) { } [ ]

Custom Fonts

As mentioned above Skeleton Text support specific subset of Latin characters and numbers. In addition to this there are following language fonts available:

• skeleton-elements/fonts/skeleton-ar.(ttf|woff|woff2) - font containing Arabic characters
• skeleton-elements/fonts/skeleton-fa.(ttf|woff|woff2) - font containing Farsi characters
• skeleton-elements/fonts/skeleton-il.(ttf|woff|woff2) - font containing Hebrew (Israel) characters
• skeleton-elements/fonts/skeleton-ru.(ttf|woff|woff2) - font containing Russian (Cyrillic) characters

For example, to add Russian language support, register the font in your CSS:

@font-face {
  font-family: 'skeleton-ru';
  src: url('/path-to/skeleton-elements/fonts/skeleton-ru.woff2') format('woff2'),
    url('/path-to/skeleton-elements/fonts/skeleton-ru.woff') format('woff');
}

.skeleton-text-ru {
  font-family: 'skeleton-ru';
}

And then use in your layout along with skeleton-text class:

<div class="skeleton-text skeleton-text-ru">Текст на русском</div>

Loading Effects

There are following loading effects available:

• pulse
• fade
• wave

To add loading effect to any element just add skeleton-effect-${effectName} class, e.g.

<!-- skeleton block with "pulse" loading effect -->
<div class="skeleton-block skeleton-effect-pulse"></div>

<!-- skeleton text with "fade" loading effect -->
<p class="skeleton-text skeleton-effect-fade">...</p>

<!-- custom block with "wave" loading effect -->
<div class="skeleton-effect-wave">
  <h1 class="skeleton-text">...</h1>
  <h2 class="skeleton-text">...</h1>
  <p class="skeleton-text">...</p>
  <p class="skeleton-text">...</p>
  <div class="skeleton-block">...</div>
</div>