Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@ritterim/skellycss

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ritterim/skellycss - npm Package Compare versions

Comparing version 0.0.5 to 0.1.0

dist/style.css

175

dist/skelly.js

@@ -1,169 +0,10 @@

// modules are defined as an array
// [ module function, map of requires ]
//
// map of requires is short require name -> numeric require
//
// anything defined in a previous bundle is accessed via the
// orig method which is the require for previous bundles
parcelRequire = (function (modules, cache, entry, globalName) {
// Save the require from previous bundle to this closure if any
var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
var nodeRequire = typeof require === 'function' && require;
/*
SkellyCSS v0.1.0 | @ritterim/skellycss
function newRequire(name, jumped) {
if (!cache[name]) {
if (!modules[name]) {
// if we cannot find the module within our internal map or
// cache jump to the current global require ie. the last bundle
// that was added to the page.
var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
if (!jumped && currentRequire) {
return currentRequire(name, true);
}
A light-weight CSS framework to quickly implement skeletons into your projects. (https://github.com/ritterim/skellyCSS#readme)
©2022 Ritter Insurance Marketing (https://rimdev.io)
https://github.com/ritterim/skellyCSS/issues
Released under the MIT license.
*/
// If there are other bundles on this page the require from the
// previous one is saved to 'previousRequire'. Repeat this as
// many times as there are bundles until the module is found or
// we exhaust the require chain.
if (previousRequire) {
return previousRequire(name, true);
}
// Try the node require function if it exists.
if (nodeRequire && typeof name === 'string') {
return nodeRequire(name);
}
var err = new Error('Cannot find module \'' + name + '\'');
err.code = 'MODULE_NOT_FOUND';
throw err;
}
localRequire.resolve = resolve;
localRequire.cache = {};
var module = cache[name] = new newRequire.Module(name);
modules[name][0].call(module.exports, localRequire, module, module.exports, this);
}
return cache[name].exports;
function localRequire(x){
return newRequire(localRequire.resolve(x));
}
function resolve(x){
return modules[name][1][x] || x;
}
}
function Module(moduleName) {
this.id = moduleName;
this.bundle = newRequire;
this.exports = {};
}
newRequire.isParcelRequire = true;
newRequire.Module = Module;
newRequire.modules = modules;
newRequire.cache = cache;
newRequire.parent = previousRequire;
newRequire.register = function (id, exports) {
modules[id] = [function (require, module) {
module.exports = exports;
}, {}];
};
var error;
for (var i = 0; i < entry.length; i++) {
try {
newRequire(entry[i]);
} catch (e) {
// Save first error but execute all entries
if (!error) {
error = e;
}
}
}
if (entry.length) {
// Expose entry point to Node, AMD or browser globals
// Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
var mainExports = newRequire(entry[entry.length - 1]);
// CommonJS
if (typeof exports === "object" && typeof module !== "undefined") {
module.exports = mainExports;
// RequireJS
} else if (typeof define === "function" && define.amd) {
define(function () {
return mainExports;
});
// <script>
} else if (globalName) {
this[globalName] = mainExports;
}
}
// Override the current require with this new one
parcelRequire = newRequire;
if (error) {
// throw error from earlier, _after updating parcelRequire_
throw error;
}
return newRequire;
})({"LGxd":[function(require,module,exports) {
},{}],"VXhu":[function(require,module,exports) {
var skeletons = document.querySelectorAll(".skeleton");
if (skeletons) {
skeletons.forEach(function (skelly) {
var lineCount = parseInt(skelly.dataset.lines);
var animation = skelly.dataset.animation === "true";
if (!lineCount && skelly.innerHTML.trim().length == 0) {
lineCount = 1;
}
for (var i = 0; i < lineCount; i++) {
var line = document.createElement("span");
line.classList.add("skeleton__line");
if (animation === true) {
var animationElement = document.createElement("span");
animationElement.classList.add("skeleton--animation");
line.append(animationElement);
}
skelly.append(line);
}
});
}
var skeletonImages = document.querySelectorAll(".skeleton-image");
if (skeletonImages) {
skeletonImages.forEach(function (skelly) {
var animation = skelly.dataset.animation === "true";
if (animation === true) {
var animationElement = document.createElement("span");
animationElement.classList.add("skeleton--animation");
skelly.append(animationElement);
}
});
}
},{}],"fRuA":[function(require,module,exports) {
"use strict";
require("./assets/scss/style.scss");
require("./assets/javascript/index.js");
},{"./assets/scss/style.scss":"LGxd","./assets/javascript/index.js":"VXhu"}]},{},["fRuA"], null)
//# sourceMappingURL=dist/skelly.js.map
(function(s){typeof define=="function"&&define.amd?define(s):s()})(function(){"use strict";var s="";const c=document.querySelectorAll(".skeleton");c&&c.forEach(t=>{let a=parseInt(t.dataset.lines),e=t.dataset.opacity?parseFloat(t.dataset.opacity):null,o=t.dataset.color?t.dataset.color:null;!a&&t.innerHTML.trim().length==0&&(a=1);for(let i=0;i<a;i++){const n=document.createElement("span");if(n.classList.add("skeleton__line"),t.dataset.animation==="true"){const r=document.createElement("span");r.classList.add("skeleton--animation"),n.append(r)}t.append(n)}e&&e<=1&&t.querySelectorAll(".skeleton__line").forEach(n=>n.style.opacity=e),o&&t.querySelectorAll(".skeleton__line").forEach(n=>n.style.setProperty("--skelly-color",o))});const l=document.querySelectorAll(".skeleton-image");l&&l.forEach(t=>{let a=t.dataset.animation==="true",e=t.dataset.opacity?parseFloat(t.dataset.opacity):null;if(a===!0){const o=document.createElement("span");o.classList.add("skeleton--animation"),t.append(o)}e&&e<=1&&(t.style.opacity=e)})});

27

package.json
{
"name": "@ritterim/skellycss",
"version": "0.0.5",
"version": "0.1.0",
"description": "A light-weight CSS framework to quickly implement skeletons into your projects.",

@@ -10,7 +10,5 @@ "main": "dist/skelly.js",

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel src/skelly.js",
"build": "npm run build:full && npm run build:minify",
"build:minify": "parcel build src/skelly.js --out-file skelly.min.js --public-url ./dist/",
"build:full": "parcel build src/skelly.js --no-minify --public-url ./dist/"
"start": "vite",
"build": "vite build",
"preview": "vite preview"
},

@@ -31,11 +29,16 @@ "repository": {

},
"browserslist": [
"defaults",
"not IE 11",
"maintained node versions"
],
"homepage": "https://github.com/ritterim/skellyCSS#readme",
"devDependencies": {
"cssnano": "^4.1.10",
"parcel-bundler": "^1.12.4",
"sass": "^1.30.0"
},
"dependencies": {
"assets": "^3.0.1"
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"postcss-cli": "^9.1.0",
"sass": "^1.49.0",
"vite": "^2.7.13",
"vite-plugin-banner": "^0.2.0"
}
}

52

README.md

@@ -27,2 +27,4 @@ <div style="display:flex; align-items:center; justify-content:center; height:300px;">

- [JavaScript Utility](#javascript-utility)
- [JavaScript Data Attributes](#javascript-data-attributes)
- [All Data Attributes](#all-data-attributes)

@@ -38,5 +40,5 @@ <br />

### CSS
Include the skelly.css file wherever you add your CSS:
Include the Skelly css file wherever you add your CSS:
``` html
<link rel="stylesheet" href="../dist/skelly.css">
<link rel="stylesheet" href="..@ritterim/skellycss/dist/style.css">
```

@@ -47,3 +49,3 @@

``` html
<script src="../dist/skelly.js"></script>
<script src="..@ritterim/skellycss/dist/skelly.js"></script>
```

@@ -159,3 +161,3 @@

### Images
You can create an image skeleton by adding the `.skeleton-image` class to an img tag -- do not include the `src` attribute. By default this will apply the image skeleton at 100% height and width of the parent container.
You can create an image skeleton by using the `.skeleton-image` class. By default this will apply the image skeleton at 100% height and width of the parent container.

@@ -189,12 +191,16 @@ #### Sizes

| ------------ |------------ | ------------|
| Landscape Rectangle | Sets the width of the image to 100% | `.skeleton-image--landscape` |
| Portrait Rectangle | Sets the height of the image to 100% | `.skeleton-image--portrait` |
| Square | Sets the image aspect ratio to 1/1 (default) | `.skeleton-image--square` |
| Circle | Sets the border radius to 50% | `.skeleton-image--circle` |
| Landscape Rectangle | Sets the image aspect ratio to 4/3 | `.skeleton-image--landscape` |
| Portrait Rectangle | Sets the image aspect ratio to 3/4| `.skeleton-image--portrait` |
| Wide Rectangle | Sets the image aspect ratio to 16/9 | `.skeleton-image--wide` |
| Tall Rectangle | Sets the image aspect ratio to 9/16 | `.skeleton-image--tall` |
![Image Shapes](images/image-shapes.png)
``` html
<img class="skeleton-image skeleton-image--lg skeleton-image--landscape" />
<img class="skeleton-image skeleton-image--lg skeleton-image--portrait" />
<img class="skeleton-image skeleton-image--lg skeleton-image--circle" />
<div class="skeleton-image skeleton-image--lg skeleton-image--square"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--circle"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--landscape"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--portrait"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--wide"></div>
<div class="skeleton-image skeleton-image--lg skeleton-image--tall"></div>
```

@@ -247,2 +253,24 @@

<p class="skeleton" data-lines="7" data-animation="true"></p>
```
```
<br />
### JavaScript Data Attributes
You can alter the way skeleton looks by utilizing other data-attributes as well, including opacity and color:
``` html
<!-- Opacity -->
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="7" data-opacity="0.3"></p>
<!-- Color -->
<h2 class="skeleton skeleton--md" data-animation="true"></h2>
<p class="skeleton" data-lines="7" data-color="tomato"></p>
```
#### All Data Attributes
| Attribute | Description | Type |
| ------------ |------------ | ------------|
| `data-lines` | Determines how many lines to output | Integer |
| `data-animation` | Adds animation to the skeleton lines | Boolean |
| `data-opacity` | Sets the opacity of the skeleton lines (sets opacity between 0 and 1) | Float |
| `data-color` | Sets the color of the skeleton lines | Color |
dist/skelly.css
dist/skelly.css.map
dist/skelly.js.map
dist/skelly.min.css
dist/skelly.min.css.map
dist/skelly.min.js
dist/skelly.min.js.map
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc