empty-state

Empty state skeleton builder scss mixins

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
empty-state
12170.1.34 years ago7 years agoMinified + gzip package size for empty-state in KB

Readme

empty-state
empty-state is a mix of Sass mixins and function to simplify the process drawing empty state skeleton backgrounds. These states are often used to provide an indication how the content that is loading is looking and it will be replaced when content is loaded.
A detailed introduction you can find here:
Installation
npm install empty-state

Usage

Import

@import '~empty-state/skeleton';

Drawing

lines (function)

lines(
    $count: 3,
    $color: #fcfcfc,
    $width: 100%,
    $height: 10px,
    $gutter: 10px,
    $x: 0,
    $y: 0,
    $lastWidth: 100%,
    $outline: false,
    $outline-width: 1px,
    $outline-fill: #ffffff
)

// @returns: [<shape>,<shape>,...]

circle (function)

circle(
    $color,
    $diameter,
    $x,
    $y
)

// @returns: <shape>

circle-outline (function)

circle-outline(
    $color,
    $diameter,
    $x,
    $y,
    $outline: 1px,
    $fill : #ffffff
)

// @returns: [<shape>,<shape>]

rect (function)

rect(
    $color,
    $width,
    $height,
    $x,
    $y
)

// @returns: <shape>

rect-outline (function)

rect-outline(
    $color,
    $width,
    $height,
    $x,
    $y,
    $outline: 1px,
    $fill: #ffffff
)

// @returns: [<shape>,<shape>]

shape (function)

A shape is mostly just internally used to unify the format of the shapes like circles or rects
shape(
    $background,
    $background-size,
    $background-position
)

// @returns { bg, size, position }

Collecting and rendering

skeleton (mixin)

skeleton($shapes...)

Example:
empty-state
.s-text-lines {
    $shapes: join(
        lines(2, #B8B8B8, 90%, 20px, 10px, center, 0px, 50%, true, 2px, white),
        lines(5, #D8D8D8, 100%, 14px, 7px, center, 80px, 90%)
    );

    @include skeleton($shapes...);
    height: 190px;
}

results in:
.s-text-lines {
    background: linear-gradient(180deg, white, white),
        linear-gradient(180deg, #B8B8B8, #B8B8B8),
        linear-gradient(180deg, white, white),
        linear-gradient(180deg, #B8B8B8, #B8B8B8),
        linear-gradient(180deg, #D8D8D8, #D8D8D8),
        linear-gradient(180deg, #D8D8D8, #D8D8D8),
        linear-gradient(180deg, #D8D8D8, #D8D8D8),
        linear-gradient(180deg, #D8D8D8, #D8D8D8),
        linear-gradient(180deg, #D8D8D8, #D8D8D8);
    background-size: calc(90% - 4px) calc(20px - 4px),
        90% 20px,
        calc(50% - 4px) calc(20px - 4px),
        50% 20px,
        100% 14px,
        100% 14px,
        100% 14px,
        100% 14px,
        90% 14px;
    background-position:
        center calc(0px + 2px),
        center 0px,
        center calc(30px + 2px),
        center 30px,
        center 80px,
        center 101px,
        center 122px,
        center 143px,
        center 164px;
    background-repeat: no-repeat;
    height: 190px;
}