csshake - npm Package Compare versions

Comparing version 1.5.3 to 1.7.0

package.json

 {
   "name": "csshake",
-  "version": "1.5.3",
+  "version": "1.7.0",
   "description": "Some CSS classes to move your DOM!",
   "main": "dist/csshake.css",
   "scripts": {
-    "start": "npm run build && npm run gzip && npm run gzip:all",
-    "watch": "node-sass --watch scss/csshake.scss -o docs",
+    "start": "npm run build",
+    "watch": "sass --watch scss/csshake.scss:docs/csshake.css",
     "build": "npm run build:raw && npm run build:min && npm run build:docs && node downloadIndex.js",
-    "build:docs": "node-sass scss/csshake.scss -o docs --output-style compressed",
-    "build:raw": "node-sass scss/ -o dist/",
-    "build:min": "mkdir -p dist/min && node-sass --output-style compressed scss/ -o dist/min && npm run suffix && npm run move",
+    "build:docs": "sass scss/csshake.scss:docs/csshake.css --style compressed",
+    "build:raw": "sass scss/:dist/",
+    "build:min": "mkdir -p dist/min && sass --style compressed scss/:dist/min && npm run suffix && npm run move",
     "suffix": "for file in dist/min/*.css; do mv \"$file\" \"${file%.css}.min.css\"; done",
@@ -26,2 +26,9 @@ "move": "mv dist/min/*.css dist && rm -r dist/min"
   "author": "Lionel T <[e-mail]> (http://elrumordelaluz.com)",
+  "contributors": [
+    {
+      "name": "Peter Nyari",
+      "url": "https://github.com/netwarex",
+      "email": "[e-mail]"
+    }
+  ],
   "license": "MIT",
@@ -33,7 +40,7 @@ "bugs": {
   "devDependencies": {
-    "gzip-size": "4.1.0",
-    "node-sass": "4.7.2",
-    "pretty-bytes": "4.0.2",
-    "pug": "2.0.0-rc.4"
+    "gzip-size": "5.1.1",
+    "pretty-bytes": "5.2.0",
+    "pug": "^3.0.2",
+    "sass": "1.51.0"
   }
 }

README.md

@@ -1,12 +0,22 @@
-# Csshake [![npm version](https://badge.fury.io/js/csshake.svg)](http://badge.fury.io/js/csshake)
-Some CSS classes to move your DOM!
-[Live Demo](http://elrumordelaluz.github.io/csshake/)
+# CSShake [![npm version](https://badge.fury.io/js/csshake.svg)](http://badge.fury.io/js/csshake)
 
-### Origins
+> Some CSS classes to move your DOM!
+
+### [Live Demo](http://elrumordelaluz.github.io/csshake/)
+
+### [Download Center](https://csshake.surge.sh/)
+
+You could download the complete `csshake.css` file or separated files for each shake animation (i.e `csshake-little.css`).
+Each one expanded or minified.
+
+## Why
+
 I had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS.
 After finish it I discover [this](http://jackrugile.com/jrumble/) cool jQuery plugin by [@jackrugile](https://twitter.com/jackrugile).
-Then I started to think in made *[this little CSS project](http://elrumordelaluz.github.io/csshake/)*
+Then I started to think in made _[this little CSS project](http://elrumordelaluz.github.io/csshake/)_
 
-### Install
+## Install
+
 Fork this repo
+
 ```
@@ -17,2 +27,3 @@ $ git clone https://github.com/elrumordelaluz/csshake.git
 or via Bower
+
 ```
@@ -23,2 +34,3 @@ $ bower install csshake
 or via npm
+
 ```
@@ -29,2 +41,3 @@ $ npm i csshake
 #### scripts
+
 ```
@@ -36,30 +49,30 @@ $ npm run watch
 
-#### Download Center http://csshake.surge.sh/
-You could download the complete `csshake.css` file or separated files for each shake animation (i.e `csshake-little.css`).
-Each one expanded or minified.
+### CDN
 
-### CDN
 Now is also available in `cdnjs` for each shake animation: https://cdnjs.com/libraries/csshake
 
+## How to use
 
-### How to use
 First include the CSS file
+
 ```html
-  <link rel="stylesheet" type="text/css" href="csshake.css">`
+<link rel="stylesheet" type="text/css" href="csshake.css" />`
 ```
 
-Then call the diffetent classes on the element you want to shake!
+Then call the different classes on the element you want to shake!
+
 ```html
-  <div class="shake"></div>
-  <div class="shake shake-hard"></div>
-  <div class="shake shake-slow"></div>
-  <div class="shake shake-little"></div>
-  <div class="shake shake-horizontal"></div>
-  <div class="shake shake-vertical"></div>
-  <div class="shake shake-rotate"></div>
-  <div class="shake shake-opacity"></div>
-  <div class="shake shake-crazy"></div>
+<div class="shake"></div>
+<div class="shake shake-hard"></div>
+<div class="shake shake-slow"></div>
+<div class="shake shake-little"></div>
+<div class="shake shake-horizontal"></div>
+<div class="shake shake-vertical"></div>
+<div class="shake shake-rotate"></div>
+<div class="shake shake-opacity"></div>
+<div class="shake shake-crazy"></div>
 ```
 
 Add also classes to control the `animation-play-state`.
+
 ```html
@@ -74,19 +87,22 @@ <!-- Freeze the animation at that point when :hover -->
 
-### Customize
+## Customize
+
 You could customize the Sass @mixins to create new shaking animations, yeah!
 Editing the `do-shake` mixin in `scss/_tools.scss` file
+
 ```scss
 .my-custom-shake {
   @include do-shake(
-        $name: 'my-custom-shake',
-        $h: 5px,
-        $v: 5px,
-        $r: 3deg,
-        $dur: 100ms,
-        $precision: .02,
-        $opacity: false,
-        $q: infinite,
-        $t: ease-in-out,
-        $delay: null,
-        $chunk: 100%);
+    $name: 'my-custom-shake',
+    $h: 5px,
+    $v: 5px,
+    $r: 3deg,
+    $dur: 100ms,
+    $precision: 0.02,
+    $opacity: false,
+    $q: infinite,
+    $t: ease-in-out,
+    $delay: null,
+    $chunk: 100%
+  );
 }
@@ -118,10 +134,15 @@ ```
 ### Use with Webpack 2.x
+
 When installed with `npm`, import `csshake` inside your css|stylus|sass files with `~` prefix to trigger webpack's module resolving:
+
 ```scss
 @import '~csshake';
 ```
+
 This will get you non-minified plain css.
 
 ##### Import source sass files
+
 Include full path relative to your `node_modules` folder with csshake installation
+
 ```scss
@@ -134,3 +155,5 @@ @import '~csshake/scss/csshake-hard.scss';
 ### Changelog
+
 #### [v1.5.0](https://github.com/elrumordelaluz/csshake/releases/tag/v1.5) (October 5, 2015)
+
 - Improve the core mixin for a better output code
@@ -137,0 +160,0 @@ - Generate the entire 'shake' animation from only one [@mixin](https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss#L30). Easier to cerate custom shakes animations classes.

No alert changes

Improved metrics

Total package byte prevSize

204329

increased by14.51%

Number of package files

50

increased by25%

Lines of code

3491

increased by29.3%

Number of lines in readme file

162

increased by16.55%

No dependency changes