Skeleton

Jump To:

Placeholder component for skeleton (ie. loading state

Demos

Skeleton Text

Placeholder lines for text content during loading.

<div style="max-width: 400px;">
  <div class="skeleton skeleton--text skeleton--width-large"></div>
  <div class="skeleton skeleton--text"></div>
  <div class="skeleton skeleton--text"></div>
  <div class="skeleton skeleton--text skeleton--width-small"></div>
</div>

Skeleton Media

A placeholder for images or video assets.

<div style="max-width: 300px;">
  <div class="skeleton skeleton--media">
    <span aria-hidden="true">🖼️</span>
  </div>
</div>

Composite Skeleton (Card)

Combining different skeleton elements to represent a complex UI component.

<article class="card" style="max-width: 300px;">
  <div class="card__image">
    <div class="skeleton skeleton--block" style="aspect-ratio: 16/9;"></div>
  </div>
  <div class="card__body">
    <div class="card__title">
      <div class="skeleton skeleton--text skeleton--width-large"></div>
    </div>
    <div class="card__main">
      <div class="skeleton skeleton--text"></div>
      <div class="skeleton skeleton--text skeleton--width-small"></div>
    </div>
  </div>
</article>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "animation" : UluPulse 2s cubic-bezier(0.4,0,0.6,1) infinite,
  "color" : "type-disabled",
  "background-color" : #e2e2e2,
  "background-color-alt" : #bababa,
  "border-radius": true,
  "inline-margin" : 0.35em,
  "media-ratio" : list.slash(4, 3),
  "media-font-size" : 2rem,
  "text-border-radius" : 3em,
  "widths": (
    "small-xxx" : 10%,
    "small-xx" : 20%,
    "small-x" : 30%,
    "small" : 40%,
    "large" : 70%,
    "large-x" : 85%,
    "large-xx" : 100%
  ),
);

File Information

File: _skeleton.scss
Group: skeleton
Type: variable
Lines (comments): 25-35
Lines (code): 37-56

Map Properties

Name	Type	Default	Description
animation	CssValue	pulse 2s cubic-bezier(0.4,0,0.6,1) infinite	The animation applied to skeleton elements.
color	Color	type-disabled	The base color for skeleton elements.
background-color	Color	#cbcbcb	The primary background color for skeleton elements.
background-color-alt	Color	#aeaeae	An alternative background color for skeleton elements, used for variations.
border-radius	Dimension	true	The border-radius for skeleton blocks and text. If set to true, uses the element.scss property for "border-radius".
inline-margin	Dimension	0.35em	The margin between inline skeleton text elements.
media-ratio	Number	(4/3)	The aspect ratio for skeleton media blocks (width/height).
text-border-radius	Dimension	3em	The border-radius for skeleton text lines.
widths	Map	Map	A map defining various width percentages for skeleton text lines (or used to size blocks/etc)

Mixins

set()

Mixin

Change modules $config

File Information

File: _skeleton.scss
Group: skeleton
Type: mixin
Lines (comments): 58-61
Lines (code): 63-65

Examples

@include ulu.component-skeleton-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _skeleton.scss
Group: skeleton
Type: mixin
Lines (comments): 77-80
Lines (code): 82-126

Demo

View

Examples

@include ulu.component-skeleton-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _skeleton.scss
Group: skeleton
Type: function
Lines (comments): 67-70
Lines (code): 72-75

Examples

@include ulu.component-skeleton-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config