font-awesome-animation - npm Package Compare versions

Comparing version 0.4.2 to 1.0.0

package.json

 {
   "name": "font-awesome-animation",
-  "version": "0.4.2",
+  "version": "1.0.0",
   "dependencies": {},
   "author": "l-lin",
   "license": "MIT",
+  "main": "$npm_package_name.scss",
   "repository": {
@@ -16,5 +17,9 @@ "type": "git",
   "devDependencies": {
+    "autoprefixer": "~10.2.3",
+    "clean-css-cli": "~4.3.0",
     "concat": "~1.0.3",
     "handlebars": "~4.7.6",
-    "myth6": "~1.5.0",
+    "node-sass": "~5.0.0",
+    "postcss": "^8.1.0",
+    "postcss-cli": "~8.3.1",
     "rimraf": "~3.0.2"
@@ -26,12 +31,18 @@ },
   "scripts": {
-    "build": "npm run clean && npm run init:folders && npm run transform && npm run transform:compress && npm run generate:banner && npm run concat:banner",
-    "clean": "rimraf -f build dist",
-    "concat:banner": "concat build/banner.css build/$npm_package_name.css -o dist/$npm_package_name.css && concat build/banner.css build/$npm_package_name.min.css -o dist/$npm_package_name.min.css",
-    "generate:banner": "node scripts/generate_banner.js build/banner.css",
-    "init:folders": "mkdir -p build && mkdir -p dist",
-    "transform": "myth src/font-awesome-animation.css build/$npm_package_name.css --sourcemap",
-    "transform:compress": "myth src/font-awesome-animation.css build/$npm_package_name.min.css --sourcemap --compress",
-    "version": "npm run build",
+    "build": "npm run clean && npm run generate:main && npm run build:sass && npm run build:autoprefixer && npm run build:cleancss && npm run generate:banner && npm run concat:banner",
+    "build:autoprefixer": "postcss --use autoprefixer  --map false --output css/$npm_package_name.css css/$npm_package_name.css",
+    "build:cleancss": "cleancss -o css/$npm_package_name.min.css css/$npm_package_name.css",
+    "build:sass": "node-sass --output-style expanded --source-map true $npm_package_name.scss css/$npm_package_name.css",
+    "clean": "rimraf -f build css",
+    "concat:banner": "concat build/banner.css css/$npm_package_name.css -o css/$npm_package_name.css && concat build/banner.css css/$npm_package_name.min.css -o css/$npm_package_name.min.css",
+    "generate:banner": "mkdir -p build && node scripts/generate_banner.js build/banner.css",
+    "generate:main": "node scripts/generate_main.js scss $npm_package_name.scss",
+    "version": "npm run build && git add -A css",
     "postversion": "git push && git push --tags"
-  }
+  },
+  "files": [
+    "css",
+    "scss",
+    "font-awesome-animation.scss"
+  ]
 }

README.md

@@ -1,9 +0,14 @@
-# font-awesome-animation ![build](https://github.com/l-lin/font-awesome-animation/workflows/build/badge.svg) [![npm version](https://badge.fury.io/js/font-awesome-animation.svg)](https://badge.fury.io/js/font-awesome-animation)
+# font-awesome-animation 
 
 > Simple animations using some CSS3 I found on the web.
-> Best used on glyphicons like [FontAwesome](http://fortawesome.github.io/Font-Awesome/).
+> Best used on glyphicons like [FontAwesome][]
 
+![build](https://github.com/l-lin/font-awesome-animation/workflows/build/badge.svg)
+[![npm](https://img.shields.io/npm/v/font-awesome-animation.svg)][npm-link]
+[![npm](https://img.shields.io/npm/dm/font-awesome-animation.svg)][npm-link]
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/font-awesome-animation/badge?style=rounded)][cdn-link]
+
 ## Getting started
 
-Add
+Install from NPM:
 
@@ -14,4 +19,8 @@ ```bash
 
-Include CSS file in your index.html file: 
+Or with a CDN:
 
+[https://www.jsdelivr.com/package/npm/font-awesome-animation][cdn-link]
+
+Include CSS file in your index.html file:
+
 ```html
@@ -22,12 +31,63 @@ <link rel="stylesheet" href="font-awesome-animation.min.css">
 ## Usage
+### On DOM load
 
-See [live demo](https://l-lin.github.com/font-awesome-animation).
+Add the desired CSS class `faa-xxx` along with `animated` to the icon (or any element of your DOM):
 
-## Development
+```html
+<i class="fa fa-wrench faa-wrench animated"></i>
+```
 
-This project is using:
+### On hover
 
-- the CSS preprocessor [Myth](http://www.myth.io/) to generate the prefixes for common browsers
+Instead of using `animated`, use the `animated-hover` CSS class:
 
+```html
+<i class="fa fa-wrench faa-wrench animated-hover"></i>
+```
 
+### On parent element hover
+
+For parent hover, add the CSS class `faa-parent` and `animated-hover` on the parent element:
+
+```html
+<a href="#" class="faa-parent animated-hover">
+  <i class="fa fa-wrench faa-wrench"></i>
+</a>
+```
+
+You can regulate the speed of the animation by adding the CSS class `faa-fast` or `faa-slow`:
+
+```html
+<i class="fa fa-wrench faa-wrench animated faa-fast"></i>
+<i class="fa fa-wrench faa-wrench animated faa-slow"></i>
+```
+
+## Animation list
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation/css/font-awesome-animation.min.css">
+<link rel="stylesheet" href="http://localhost:8080/css/font-awesome-animation.min.css">
+
+| On DOM Load | On hover | On parent hover |
+|-------------|----------|-----------------|
+|<a href="#"><i class="fa fa-wrench faa-wrench animated"></i>&nbsp;faa-wrench animated</a>|<a href="#"><i class="fa fa-wrench faa-wrench animated-hover"></i>&nbsp;faa-wrench animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-wrench faa-wrench"></i>&nbsp;faa-wrench</a>|
+|<a href="#"><i class="fa fa-bell faa-ring animated"></i>&nbsp;faa-ring animated</a>|<a href="#"><i class="fa fa-bell faa-ring animated-hover"></i>&nbsp;faa-ring animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-bell faa-ring"></i>&nbsp;faa-ring</a>|
+|<a href="#"><i class="fa fa-envelope faa-horizontal animated"></i>&nbsp;faa-horizontal animated</a>|<a href="#"><i class="fa fa-envelope faa-horizontal animated-hover"></i>&nbsp;faa-horizontal animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-horizontal"></i>&nbsp;faa-horizontal</a>|
+|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated"></i>&nbsp;faa-vertical animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>&nbsp;faa-vertical animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-vertical"></i>&nbsp;faa-vertical</a>|
+|<a href="#"><i class="fa fa-warning faa-flash animated"></i>&nbsp;faa-flash animated</a>|<a href="#"><i class="fa fa-warning faa-flash animated-hover"></i>&nbsp;faa-flash animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-warning faa-flash"></i>&nbsp;faa-flash</a>|
+|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated"></i>&nbsp;faa-bounce animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>&nbsp;faa-bounce animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-bounce"></i>&nbsp;faa-bounce</a>|
+|<a href="#"><i class="fa fa-spinner faa-spin animated"></i>&nbsp;faa-spin animated</a>|<a href="#"><i class="fa fa-spinner faa-spin animated-hover"></i>&nbsp;faa-spin animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-spinner faa-spin"></i>&nbsp;faa-spin</a>|
+|<a href="#"><i class="fa fa-plane faa-float animated"></i>&nbsp;faa-float animated</a>|<a href="#"><i class="fa fa-plane faa-float animated-hover"></i>&nbsp;faa-float animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-plane faa-float"></i>&nbsp;faa-float</a>|
+|<a href="#"><i class="fa fa-heart faa-pulse animated"></i>&nbsp;faa-pulse animated</a>|<a href="#"><i class="fa fa-heart faa-pulse animated-hover"></i>&nbsp;faa-pulse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-heart faa-pulse"></i>&nbsp;faa-pulse</a>|
+|<a href="#"><i class="fa fa-envelope faa-shake animated"></i>&nbsp;faa-shake animated</a>|<a href="#"><i class="fa fa-envelope faa-shake animated-hover"></i>&nbsp;faa-shake animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-shake"></i>&nbsp;faa-shake</a>|
+|<a href="#"><i class="fa fa-trophy faa-tada animated"></i>&nbsp;faa-tada animated</a>|<a href="#"><i class="fa fa-trophy faa-tada animated-hover"></i>&nbsp;faa-tada animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-trophy faa-tada"></i>&nbsp;faa-tada</a>|
+|<a href="#"><i class="fa fa-space-shuttle faa-passing animated"></i>&nbsp;faa-passing animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing animated-hover"></i>&nbsp;faa-passing animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing"></i>&nbsp;faa-passing</a>|
+|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated"></i>&nbsp;faa-passing-reverse animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i>&nbsp;faa-passing-reverse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing-reverse"></i>&nbsp;faa-passing-reverse</a>|
+|<a href="#"><i class="fa fa-circle-o faa-burst animated"></i>&nbsp;faa-burst animated</a>|<a href="#"><i class="fa fa-circle-o faa-burst animated-hover"></i>&nbsp;faa-burst animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-circle-o faa-burst"></i>&nbsp;faa-burst</a>|
+|<a href="#"><i class="fa fa-star-o faa-falling animated"></i>&nbsp;faa-falling animated</a>|<a href="#"><i class="fa fa-star-o faa-falling animated-hover"></i>&nbsp;faa-falling animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-falling"></i>&nbsp;faa-falling</a>|
+|<a href="#"><i class="fa fa-star-o faa-rising animated"></i>&nbsp;faa-rising animated</a>|<a href="#"><i class="fa fa-star-o faa-rising animated-hover"></i>&nbsp;faa-rising animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-rising"></i>&nbsp;faa-rising</a>|
+
+## Development
+### Build
+
 ```bash
@@ -41,2 +101,20 @@ # install dependencies
 
+### Local preview
+
+To test in local, you can use:
+
+- [http-server][]: server local http server to the `css/` folder
+- any markdown preview to serve this README.md as a webpage (e.g. [markdown-preview.nvim][])
+
+### Release
+
+```sh
+# this will create a new version and push to remote repository
+npm version [<newversion> | major | minor | patch]
+```
+
+Then go to the [release page](https://github.com/l-lin/font-awesome-animation/releases) and manually
+create a new release. There is an automatic [Github action](./.github/workflows/publish.yml) that
+publishes automatically to NPM repository.
+
 ## License
@@ -46,1 +124,7 @@
 
+[cdn-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation
+[FontAwesome]: https://fontawesome.com/
+[http-server]: https://www.npmjs.com/package/http-server
+[markdown-preview.nvim]: https://github.com/iamcco/markdown-preview.nvim
+[npm-link]: https://www.npmjs.com/package/font-awesome-animation
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

23

increased by228.57%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

127

increased by195.35%

Worsened metrics

Total package byte prevSize

63403

decreased by-78.42%

Dev dependency count

8

increased by100%

Lines of code

820

decreased by-42.38%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes