!npm bundle size !NPM 

SKELETON SCREEN CSS

Zero dependencies, framework agnostic, a minimalistic set of skeleton screen elements consisting of pure css. Includes scss source, minified and non-minified compiled css files with browser vendor prefixes.

What is it:

A skeleton screen is a visual placeholder that appears before the page content renders completely. It provides a low-fidelity preview of the fully rendered page in order to give the impression of a faster load time. A skeleton screen comprises lightly colored shapes, lines, and text that outline the structure of the page before the final content loads in its place.

See example

How to install:

with npm

``bash
npm i skeleton-screen-css --save
`

or yarn

`bash
yarn add skeleton-screen-css
`

or you can download the archive with the project and manually transfer the necessary files to your project folder.

$3

- index.scss - source code with default variables;
- index.css - non-minified compiled css with browsers vendor prefixes;
- index.min.css - minified compiled css with browsers vendor prefixes (default with importing via modules);

How to use:


Via browser:

`html

`

Via webpack, rollup, parcel or any other bundler:

`javascript
import "skeleton-screen-css";

/ or /

require("skeleton-screen-css");
`

Via import from css/scss

`scss
/* May required path to file or alias if bundler used.
See the documentation for the bundler */

@import "skeleton-screen-css";
`

How to override default variables

`scss
/ Override default variable /
$skeleton-element-color: #cecece;

/ Then import scss source file /
@import "skeleton-screen-css/dist/index.scss";
`

$3

`scss
$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;

$skeleton-loading-animation-time: 1.3s !default;

$skeleton-margin-standart: 16px !default;

$skeleton-wrapper-padding: $skeleton-margin-standart !default;

$skeleton-margin-small: calc($skeleton-margin-standart / 2) !default;

$skeleton-card-box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17) !default;
$skeleton-card-background-color: #ffffff !default;
$skeleton-card-border-radius: 5px !default;

$skeleton-circle-size: 50px !default;

$skeleton-hr-height: 2px !default;

$skeleton-line-border-radius: 15px !default;
$skeleton-line-height: 12px !default;

$skeleton-headline-height: calc($skeleton-line-height * 2) !default;

$skeleton-square-height: 150px !default;
`

Basic elements

`html



`scss
/* Helpers classes /
.ssc {
.mb {
margin-bottom: $skeleton-margin-standart;
}

.mt {
margin-top: $skeleton-margin-standart;
}

.mr {
margin-right: $skeleton-margin-standart;
}

.ml {
margin-left: $skeleton-margin-standart;
}

.mbs {
margin-bottom: $skeleton-margin-small;
}

.mts {
margin-top: $skeleton-margin-small;
}

.mrs {
margin-right: $skeleton-margin-small;
}

.mls {
margin-left: $skeleton-margin-small;
}

.w-10 {
width: 10%;
}

.w-20 {
width: 20%;
}

.w-30 {
width: 30%;
}

.w-40 {
width: 40%;
}

.w-50 {
width: 50%;
}

.w-60 {
width: 60%;
}

.w-70 {
width: 70%;
}

.w-80 {
width: 80%;
}

.w-90 {
width: 90%;
}

.w-100 {
width: 100%;
}

.flex {
display: flex;
}

.inline-flex {
display: inline-flex;
}

.flex-column {
flex-direction: column;
}

.flex-column-reverse {
flex-direction: column-reverse;
}

.flex-row {
flex-direction: row;
}

.flex-row-reverse {
flex-direction: row-reverse;
}

.align-center {
align-items: center;
}

.align-start {
align-items: flex-start;
}

.align-end {
align-items: flex-end;
}

.align-stretch {
align-items: stretch;
}

.justify-start {
justify-content: start;
}

.justify-center {
justify-content: center;
}

.justify-end {
justify-content: end;
}

.justify-between {
justify-content: space-between;
}

.justify-around {
justify-content: space-around;
}
}
`

Example - card


`html


See more live examples