{"_id":"skeleton-screen-css","_rev":"3-7fc3afdf069c6576166728063ccec84f","name":"skeleton-screen-css","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"skeleton-screen-css","version":"1.0.0","description":"Skeleton screen elements on pure css","main":"dist/index.min.css","scripts":{"watch":"parcel src/index.html --no-cache --out-dir build","build":"npm run build-no-minify && npm run build-minify && npm run copy-source","build-no-minify":"parcel build src/index.scss --no-content-hash --no-cache --out-dir dist --no-minify --out-file index.css","build-minify":"parcel build src/index.scss --no-content-hash --no-cache --out-dir dist --out-file index.min.css","copy-source":"cp src/index.scss dist/index.scss","pages":"rm -rf pages && parcel build src/index.html --out-dir pages --no-cache --public-url '.'"},"repository":{"type":"git","url":"git+https://github.com/nullilac/skeleton-screen-css.git"},"keywords":["skeleton","skeleton screen","ghost","lazy","lazy-loading","loader","placeholder","performance"],"author":{"name":"x.o.esdes@gmail.com"},"license":"MIT","browserslist":["> 0.1%","ie 11","not dead"],"bugs":{"url":"https://github.com/nullilac/skeleton-screen-css/issues"},"homepage":"https://github.com/nullilac/skeleton-screen-css#readme","devDependencies":{"autoprefixer":"^9.8.6","parcel-bundler":"^1.12.4","postcss-preset-env":"^6.7.0","sass":"^1.26.10"},"gitHead":"8dd4efb5caa05de5cf94777202c35b95313692f7","_id":"skeleton-screen-css@1.0.0","_nodeVersion":"12.18.3","_npmVersion":"6.14.7","dist":{"integrity":"sha512-vgmEGyMtRLWh2k9CD7LDPcG/gN6NqqrrYTVXNVW55zy7yrO+2EmJM4K0KieXL3z5pdAoNOiRuzOLhXRwfJQehw==","shasum":"3a571f0c632cbacc15a12c23e4eac58a5de6d776","tarball":"https://registry.npmjs.org/skeleton-screen-css/-/skeleton-screen-css-1.0.0.tgz","fileCount":8,"unpackedSize":25580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSQO1CRA9TVsSAnZWagAAJEYP/3loHCJGMJQxfOiRlWfn\nh6JWBFtxlNFvnHI5DO3s2z3bvE4vC6fZHZonZawApK1z+ZWB7i/Ch9YHQMKL\nnnAApwwRlwXIOBCUpRpkUoUaoPMBdAkI806JEK5hPj4El6gSt7SUxbYPgscx\nd41MUf+ovjYAkeF3/TUpdeRrPKUwhJeEoSMZhR3FP8QU+1w+165vCf5UAZVC\n9I28U4SRsoSJiNxBe78MSO3GsDgDEEWhO9ai6d4/4Ug7nZyrxgRD5IDIg//y\nmNFBi4UTQDTtuKPaV67GXiPwPx9VLWIy8GyDNRNttWF2UmguKNOxtkMeUDMZ\ng3g2XLTNeGkseOxA+2n6Rc3MRjIt+TfmQzwEsoOqJvNA0SKD5XW1PT9QO7e6\nV5ie8xqZRR87ntBnR8lxXMltSVfpJxxKEbJFgV/Pl8jA7PsewSNeiB89+YlY\n7/2UpDwpp3ukzFpZxqsAKdXY/vwBsO12vZRgvdFImB85IXo6vQ8ylQtE6wLV\nK854FLh+H/vSEyog4O5E/dL8rPbmZFy8bwdV+M34o3bty2lqCCb2WGll3Fx/\nsxYtzAdRpUcPAb/1TGia/c7tsfE7Ycu2Sj8Jr3BwtHMi1D69206qCyVSbp2k\nE2DQvNaL4pMn4KE4SvKfs22/Nh9+cGFVb7bm21QGumkQ6dDDUWdWbgLEs4/h\ngJA9\r\n=aRkF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAkLt2S/CJpg7RQNFrhHEowttRhqCNx7qk4jWu+GVZgAiBD+ZvMq7uolkzfSQrA+eZaTCahliZHHKzgW5CzyqOEwg=="}]},"maintainers":[{"name":"esdes","email":"x.o.esdes@gmail.com"}],"_npmUser":{"name":"esdes","email":"x.o.esdes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/skeleton-screen-css_1.0.0_1598620597167_0.6654525301200109"},"_hasShrinkwrap":false},"1.0.1":{"name":"skeleton-screen-css","version":"1.0.1","description":"A minimalistic complete set of elements for a skeleton screen consisting of pure css. Includes scss source, minified and non-minified compiled css files with browser vendor prefixes.","main":"dist/index.min.css","scripts":{"watch":"parcel src/index.html --no-cache --out-dir build","build":"npm run build-no-minify && npm run build-minify && npm run copy-source","build-no-minify":"parcel build src/index.scss --no-content-hash --no-cache --out-dir dist --no-minify --out-file index.css","build-minify":"parcel build src/index.scss --no-content-hash --no-cache --out-dir dist --out-file index.min.css","copy-source":"cp src/index.scss dist/index.scss","pages":"rm -rf pages && parcel build src/index.html --out-dir pages --no-cache --public-url '.'"},"repository":{"type":"git","url":"git+https://github.com/nullilac/skeleton-screen-css.git"},"keywords":["skeleton","skeleton screen","ghost","lazy","lazy-loading","loader","placeholder","performance"],"author":{"name":"x.o.esdes@gmail.com"},"license":"MIT","browserslist":["> 0.1%","ie 11","not dead"],"bugs":{"url":"https://github.com/nullilac/skeleton-screen-css/issues"},"homepage":"https://github.com/nullilac/skeleton-screen-css#readme","devDependencies":{"autoprefixer":"^9.8.6","parcel-bundler":"^1.12.4","postcss-preset-env":"^6.7.0","sass":"^1.26.10"},"gitHead":"363bbc9f2f410abde2050b2db7aa602d789cb100","_id":"skeleton-screen-css@1.0.1","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-aU/c1m4I5YSmZ2i19a5ZuPAi/Kq8wajs3IttyfnlUQk1gka1mOMNgX3wZ+yimtYjPDFF3fgqT0irCA5J2Iuimw==","shasum":"22ccee5e4fb55bb515c5a30ef01e5ca85ec387c3","tarball":"https://registry.npmjs.org/skeleton-screen-css/-/skeleton-screen-css-1.0.1.tgz","fileCount":8,"unpackedSize":31554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfS71eCRA9TVsSAnZWagAAkJIP/jbg7gc/Xht2XwSrq9dV\nH1s3dCjLRodbD2EmEhlK/zDO6t59TmVspBRjShQMB3Eu7mKPEvpZc6x6h4MU\nTus8Spyb6u8etvPQ7FbpYrL8NghLpEtdxadxhc3kGuA5+3CMjUEON0hRq2h/\nne/6MeTpKR/EyoetsrOxTCYOd8ZTXmEtLpQuq7ScF1+qWa1LwzQ44sVNX++S\nVO9I1QwhyQLfk86Jp6PvCTYx4+IGl8XLh2Z+zgtCbaaw6VP7GNc0Dpfn3L2V\n/MqfQJUl5UkFpIAkHr4nKyyrFwPiauEqgwrf6xFufUtGU9cQYzASZwHn9vV0\n7R9viYZ85fACNzsfsibJRAMFmp4QbNguGCyUnNW2rUrP7/f00D6znVwTQ/kT\ncagscBs6+fL8igMFWFYOImsrjA/GsVhcJ8ZGsVad+e7wyWytDYDtNwhiNRsR\n4/muOc7FFFqEgIlTH5Ghq+AOLQITPZULvUD4mVv41InMdwY96nML8rYFyMx3\nSrotaV4PJz96lCEeluzP0noxoMT7TFgoDyhbUG3nAzQfioVEzKtu6k9DoKs4\nZkfxP3EDUJRla6Ikamc2uOFR/thSeRvqDcEIA4LkGGiAgL2GiUbMFKeLD2TH\ns3Nc54K2GdAiuBAUynCi232wvH+Fg6j0VMN57I8c7ABRHhd0I4YNPCoOy2On\npvXA\r\n=J1lp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsQLfZvCgB6gVNWs/EhHEvfkX/ZKJOpHJBBMLg8KwZnAiABp8gz4uG234UQMNfEK4ofN90fdKK1CkgRW7e2bObJZQ=="}]},"maintainers":[{"name":"esdes","email":"x.o.esdes@gmail.com"}],"_npmUser":{"name":"esdes","email":"x.o.esdes@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/skeleton-screen-css_1.0.1_1598799198406_0.7812987764563541"},"_hasShrinkwrap":false},"1.1.0":{"name":"skeleton-screen-css","version":"1.1.0","description":"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.","main":"dist/index.min.css","scripts":{"watch":"parcel src/index.html --no-cache --out-dir build","build":"npm run build-no-minify && npm run build-minify && npm run copy-source","build-no-minify":"parcel build src/index.scss --no-content-hash --no-cache --out-dir dist --no-minify --out-file index.css","build-minify":"parcel build src/index.scss --no-content-hash --no-cache --out-dir dist --out-file index.min.css","copy-source":"cp src/index.scss dist/index.scss","pages":"rm -rf pages && parcel build src/index.html --out-dir pages --no-cache --public-url '.'"},"repository":{"type":"git","url":"git+https://github.com/nullilac/skeleton-screen-css.git"},"keywords":["skeleton","skeleton screen","skeleton screen css","ghost","lazy","lazy-loading","loader","placeholder","performance"],"author":{"name":"x.o.esdes@gmail.com"},"license":"MIT","browserslist":["> 0.1%","not dead"],"bugs":{"url":"https://github.com/nullilac/skeleton-screen-css/issues"},"homepage":"https://github.com/nullilac/skeleton-screen-css#readme","devDependencies":{"autoprefixer":"^9.8.6","parcel-bundler":"^1.12.5","postcss-preset-env":"^6.7.0","sass":"^1.54.9"},"gitHead":"411128975d7360e5046163c14e59650acc26abdd","_id":"skeleton-screen-css@1.1.0","_nodeVersion":"16.14.2","_npmVersion":"8.5.0","dist":{"integrity":"sha512-lk5fHivmKKvK1g+VbvPgW5vro2aNwAIzTiF3RTKhv35e/p8MscVlkcziDY5kqCNWrFGF3fUL8f0djg6mMRtGDQ==","shasum":"27f7566164a0229a6f51427bc9f15dba3e2166a0","tarball":"https://registry.npmjs.org/skeleton-screen-css/-/skeleton-screen-css-1.1.0.tgz","fileCount":8,"unpackedSize":30477,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHDYZiZhvcIl0pBSsMaZ9EiEtD8O/sa/oMD3/rlojNwAIgZVNJpbd67UmT9XNsJxTgbhr0ElrINVL9gwvUe4/sY5s="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKNqwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpClQ/+NPtgGwpu6syPN5MA4BS+N8TcJ9qYChygMkJTO3McetvtMb1I\r\njSDNK5RIVf3EoN73jYtbxGk9342Gm3Q/NzZ4CyRUyaqS6L2mCvAPmDZVj1II\r\nrppM94NAbRry/KvewiDrdY5gEF/kx20Ah7wTlHufl+7TQR0saihd9NoVfSND\r\nFsHVeV34bBK7BaYBn92xHUOqKWvqDrNW5GtgkU/S2vkfgFKjdHYUyTY8HQwT\r\nx1TO56UFnHFOVUjCSJPtpfMKOe4BFsZyFmri9wlwkOLKgcIKG08CU/NFuRAO\r\nAVDL72L++kaOQ288h1ZQNmt99APVNnu4v4hp3oG/JGRZEE9bZh2OMwLy+p5O\r\nIPLLJaE8HX2npsRDHh5ENl1wGgLnlad1c9quDpJD5dR6i4yvvT0OLukf+p5D\r\nbcLgPvGlYvnWCC7eWyDYGkhIJh3SU3t3nDLLbRejCLH0P5/zwbsPTzcuBB02\r\n+L2NdliPvmLvzdauIMz0qNScA7mVl3vvx3Z1omEbfq+GTNJPKxQ3BdUxV2aK\r\njSxFsaDDI8TRVlx+i8+IPDiPvhAoBUjKP6HDYFclicfZxWo7kUW1SPBOO3mv\r\nABDxTrxfzLJqTcoy2RLqJhK0YKLK3p7iYnGDyCuqLf+jgX2DfggIka5eLgr6\r\n1Prb1ewpa6m5xcgu5XA+4VhsVeJzerK1nJA=\r\n=oSrQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"esdes","email":"x.o.esdes@gmail.com"},"directories":{},"maintainers":[{"name":"esdes","email":"x.o.esdes@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/skeleton-screen-css_1.1.0_1663621808374_0.8175989555744465"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-28T13:16:37.166Z","1.0.0":"2020-08-28T13:16:37.332Z","modified":"2022-09-19T21:10:08.611Z","1.0.1":"2020-08-30T14:53:18.516Z","1.1.0":"2022-09-19T21:10:08.536Z"},"maintainers":[{"name":"esdes","email":"x.o.esdes@gmail.com"}],"description":"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.","homepage":"https://github.com/nullilac/skeleton-screen-css#readme","keywords":["skeleton","skeleton screen","skeleton screen css","ghost","lazy","lazy-loading","loader","placeholder","performance"],"repository":{"type":"git","url":"git+https://github.com/nullilac/skeleton-screen-css.git"},"author":{"name":"x.o.esdes@gmail.com"},"bugs":{"url":"https://github.com/nullilac/skeleton-screen-css/issues"},"license":"MIT","readme":"[![NPM version](https://img.shields.io/npm/v/skeleton-screen-css)](https://www.npmjs.com/package/skeleton-screen-css) [![Build Status](https://travis-ci.com/nullilac/skeleton-screen-css.svg?branch=master)](https://travis-ci.com/github/nullilac/skeleton-screen-css) ![npm bundle size](https://img.shields.io/bundlephobia/min/skeleton-screen-css) ![NPM](https://img.shields.io/npm/l/skeleton-screen-css) [![](https://data.jsdelivr.com/v1/package/npm/skeleton-screen-css/badge)](https://www.jsdelivr.com/package/npm/skeleton-screen-css)\n\n<p align=\"center\">\n    <img src=\"logo.png\"></img>\n</p>\n\n<h1 align=\"center\">SKELETON SCREEN CSS</h1>\n\n<p align=\"center\">\n    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.\n</p>\n\n## What is it:\n\nA 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.\n\n**[See example](https://nullilac.github.io/skeleton-screen-css/)**\n\n## How to install:\n\nwith npm\n\n```bash\nnpm i skeleton-screen-css --save\n```\n\nor yarn\n\n```bash\nyarn add skeleton-screen-css\n```\n\nor you can download the archive with the project and manually transfer the necessary files to your project folder.\n\n### Included files:\n\n-   **index.scss** - source code with default variables;\n-   **index.css** - non-minified compiled css with browsers vendor prefixes;\n-   **index.min.css** - minified compiled css with browsers vendor prefixes (default with importing via modules);\n\n## How to use:\n\n\nVia browser:\n\n```html\n<link rel=\"stylesheet\" href=\"index.min.css\" />\n```\n\nVia webpack, rollup, parcel or any other bundler:\n\n```javascript\nimport \"skeleton-screen-css\";\n\n/* or */\n\nrequire(\"skeleton-screen-css\");\n```\n\nVia import from css/scss\n\n```scss\n/* May required path to file or alias if bundler used.\nSee the documentation for the bundler */\n\n@import \"skeleton-screen-css\";\n```\n\n## How to override default variables\n\n```scss\n/* Override default variable */\n$skeleton-element-color: #cecece;\n\n/* Then import scss source file */\n@import \"skeleton-screen-css/dist/index.scss\";\n```\n\n### Variables\n\n```scss\n$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;\n\n$skeleton-loading-animation-time: 1.3s !default;\n\n$skeleton-margin-standart: 16px !default;\n\n$skeleton-wrapper-padding: $skeleton-margin-standart !default;\n\n$skeleton-margin-small: calc($skeleton-margin-standart / 2) !default;\n\n$skeleton-card-box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17) !default;\n$skeleton-card-background-color: #ffffff !default;\n$skeleton-card-border-radius: 5px !default;\n\n$skeleton-circle-size: 50px !default;\n\n$skeleton-hr-height: 2px !default;\n\n$skeleton-line-border-radius: 15px !default;\n$skeleton-line-height: 12px !default;\n\n$skeleton-headline-height: calc($skeleton-line-height * 2) !default;\n\n$skeleton-square-height: 150px !default;\n```\n\n## Basic elements\n\n```html\n<!-- Elements classes -->\n<div class=\"ssc-circle\"></div>\n\n<div class=\"ssc-head-line\"></div>\n\n<div class=\"ssc-line\"></div>\n\n<div class=\"ssc-square\"></div>\n\n<div class=\"ssc-hr\"></div>\n\n<!-- Card class -->\n<div class=\"ssc-card\"></div>\n\n<!-- Wrapper class for padding -->\n<div class=\"ssc-wrapper\">Card with content</div>\n\n<!-- Main parent class -->\n<div class=\"ssc\"></div>\n```\n\n## Helpers\n\n```scss\n/** Helpers classes */\n.ssc {\n    .mb {\n        margin-bottom: $skeleton-margin-standart;\n    }\n\n    .mt {\n        margin-top: $skeleton-margin-standart;\n    }\n\n    .mr {\n        margin-right: $skeleton-margin-standart;\n    }\n\n    .ml {\n        margin-left: $skeleton-margin-standart;\n    }\n\n    .mbs {\n        margin-bottom: $skeleton-margin-small;\n    }\n\n    .mts {\n        margin-top: $skeleton-margin-small;\n    }\n\n    .mrs {\n        margin-right: $skeleton-margin-small;\n    }\n\n    .mls {\n        margin-left: $skeleton-margin-small;\n    }\n\n    .w-10 {\n        width: 10%;\n    }\n\n    .w-20 {\n        width: 20%;\n    }\n\n    .w-30 {\n        width: 30%;\n    }\n\n    .w-40 {\n        width: 40%;\n    }\n\n    .w-50 {\n        width: 50%;\n    }\n\n    .w-60 {\n        width: 60%;\n    }\n\n    .w-70 {\n        width: 70%;\n    }\n\n    .w-80 {\n        width: 80%;\n    }\n\n    .w-90 {\n        width: 90%;\n    }\n\n    .w-100 {\n        width: 100%;\n    }\n\n    .flex {\n        display: flex;\n    }\n\n    .inline-flex {\n        display: inline-flex;\n    }\n\n    .flex-column {\n        flex-direction: column;\n    }\n\n    .flex-column-reverse {\n        flex-direction: column-reverse;\n    }\n\n    .flex-row {\n        flex-direction: row;\n    }\n\n    .flex-row-reverse {\n        flex-direction: row-reverse;\n    }\n\n    .align-center {\n        align-items: center;\n    }\n\n    .align-start {\n        align-items: flex-start;\n    }\n\n    .align-end {\n        align-items: flex-end;\n    }\n\n    .align-stretch {\n        align-items: stretch;\n    }\n\n    .justify-start {\n        justify-content: start;\n    }\n\n    .justify-center {\n        justify-content: center;\n    }\n\n    .justify-end {\n        justify-content: end;\n    }\n\n    .justify-between {\n        justify-content: space-between;\n    }\n\n    .justify-around {\n        justify-content: space-around;\n    }\n}\n```\n\n## Example - card\n\n\n```html\n<div class=\"ssc ssc-card\" style=\"max-width: 300px\">\n    <div class=\"ssc-wrapper\">\n        <div class=\"ssc-square mb\"></div>\n        <div class=\"flex align-center justify-between\">\n            <div class=\"w-40\">\n                <div class=\"ssc-line w-70 mbs\"></div>\n                <div class=\"ssc-line w-100 mbs\"></div>\n            </div>\n            <div class=\"ssc-head-line w-50\"></div>\n        </div>\n    </div>\n    <div class=\"ssc-hr\"></div>\n    <div class=\"ssc-wrapper\">\n        <div class=\"ssc-line w-90 mbs\"></div>\n        <div class=\"ssc-line w-30 mbs\"></div>\n        <div class=\"ssc-line w-70 mbs\"></div>\n        <div class=\"ssc-line w-50 mbs\"></div>\n    </div>\n    <div class=\"ssc-hr\"></div>\n    <div class=\"ssc-wrapper\">\n        <div class=\"ssc-head-line\"></div>\n    </div>\n</div>\n```\n\n**[See more live examples](https://nullilac.github.io/skeleton-screen-css/)**\n","readmeFilename":"README.md"}