From 3bda22af4239f84d62d0c957e05b4b14bdd663d8 Mon Sep 17 00:00:00 2001
From: Phap Dieu Duong <d2phap@gmail.com>
Date: Sat, 2 Jun 2018 18:26:53 +0800
Subject: [PATCH] added readme to npm

---
 Source/package-lock.json |   2 +-
 Source/package.json      |   2 +-
 source/README.md         | 105 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 source/README.md

diff --git a/Source/package-lock.json b/Source/package-lock.json
index 9217857..a18fb78 100644
--- a/Source/package-lock.json
+++ b/Source/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "fluent-reveal-effect",
-	"version": "0.5.3",
+	"version": "0.9.1",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/Source/package.json b/Source/package.json
index 3fb49e6..75e82d1 100644
--- a/Source/package.json
+++ b/Source/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "fluent-reveal-effect",
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"description": "Reveal Effect (Fluent Design)",
 	"main": "../Dist/js/[name].js",
 	"scripts": {
diff --git a/source/README.md b/source/README.md
new file mode 100644
index 0000000..32c7ee2
--- /dev/null
+++ b/source/README.md
@@ -0,0 +1,105 @@
+# Reveal Effect library (Fluent Design System)
+Apply reveal effect to border and background of elements.
+
+![Screenshot](https://github.com/d2phap/fluent-ui/raw/master/docs/screenshot.png)
+
+### Demo
+https://d2phap.github.io/fluent-reveal-effect/
+
+## Install
+Run the command
+```
+npm i fluent-reveal-effect@latest
+```
+
+## Usage
+
+### Import the library
+```js
+import { FluentRevealEffect } from "fluent-reveal-effect"
+```
+
+
+### Basic CSS
+```css
+.btn {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+	padding: 1rem 2rem;
+	background-color: #333;
+	color: #fff;
+	border: 0;
+	
+	transition: all 200ms ease;
+}
+.btn-border {
+	display: inline-block;
+	margin: 5px;
+}
+.btn-border .btn {
+	display: block;
+	margin: 2px;
+}
+```
+
+
+### Apply background effect
+#### HTML mockup
+```html
+<button class="btn">Button 1</button>
+```
+#### JavaScript
+```js
+FluentRevealEffect.applyEffect(".btn", {
+	lightColor: "rgba(255,255,255,0.1)",
+	gradientSize: 150
+})
+```
+
+#### Enable Ripple click effect
+````js
+FluentRevealEffect.applyEffect(".btn", {
+	clickEffect: true
+})
+````
+
+### Apply border and background effect
+#### HTML mockup
+```html
+<div class="effect-group-container">
+    <div class="btn-border">
+        <button class="btn">Button 2</button>
+    </div>
+    <div class="btn-border">
+        <button class="btn">Button 3</button>
+    </div>
+    <div class="btn-border">
+        <button class="btn">Button 4</button>
+    </div>
+</div>
+```
+
+#### JavaScript
+```js
+FluentRevealEffect.applyEffect(".effect-group-container", {
+	clickEffect: true,
+	lightColor: "rgba(255,255,255,0.6)",
+	gradientSize: 80,
+	isContainer: true,
+	children: {
+		borderSelector: ".btn-border",
+		elementSelector: ".btn",
+		lightColor: "rgba(255,255,255,0.3)",
+		gradientSize: 150
+	}
+})
+```
+
+## Donate
+If you feel this little library useful to you, it would go a great way to ensuring that I can afford to take the time to continue to develop it.
+
+Thanks for your gratitude and finance help!
+
+<a href="https://www.paypal.me/d2phap" target="_blank" title="Buy me a beer?">
+<img src="https://img.shields.io/badge/PayPal-Donate%20$10%20-009be1.svg?maxAge=3600" height="30" alt="Buy me a beer?">
+</a>
+