Jump To:

  1. Variables
    1. $config
  2. Mixins
    1. set()
    2. styles()
  3. Functions
    1. get()

Skeleton

Placeholder component for skeleton (ie. loading state

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

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

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