Add documentation and demo

peachananr · Aug 2, 2013 · a78d526 · a78d526
1 parent 0ae7af6
commit a78d526
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,54 @@
-flat-shadow
-===========
-
+#Flat Shadow by Pete R.
 A small jQuery plugin that will automatically cast a shadow creating depth for your flat UI elements 
+Created by [Pete R.](http://www.thepetedesign.com), Founder of [BucketListly](http://www.bucketlistly.com)
+
+## Usage
+To use `jquery.flatshadow.js` on your website, simply include the latest jQuery library found here together with `jquery.flatshadow.js` into your document's `<head>` and call the function like this:
+
+````html
+<div class="flat-icon"> FLAT </div>
+<div class="flat-icon"> UI </div>
+...
+````
+
+````javascript
+$(".flat-icon").flatshadow({
+  color: "#2ecc71",
+  angle: "SE",
+  fade: true,
+  boxShadow: "#d7cfb9"
+});
+````
+
+### Color
+The color option allows you to assign a background color to all your elements at once. Color will be random if empty.
+
+### Angle
+The angle option allows you to assign the direction (N, NE, E, SE, S, SW, W and NW ) of the shadow of the elements inside. Angle will be random if empty.
+
+### Fade
+The fade option will turn the flat shadow effect into a gradient shadow effect.
+
+### boxShadow
+The boxShadow allows you to apply the same shadow effect to the container of the elements. The option accept a 6 hex color code. For example, "#000000".
+
+## Further Customization
+With `jquery.flatshadow.js`, you can apply each individual elements with different effect by simply add a `data-color` and `data-angle` to your mark up as follows:
+
+````html
+<div data-color="#2ecc71" data-angle="NE" class="flat-icon"> FLAT </div>
+<div data-color="#1ABC9C" data-angle="NW" class="flat-icon"> UI </div>
+````
+and remove the color and angle global options as seen here:
+
+````javascript
+$(".flat-icon").flatshadow({
+  fade: true,
+  boxShadow: "#d7cfb9"
+});
+````
+
+Now, each individual element will have its own effect without you calling the function multiple times.
+
+## Other Resources
+- Tutorial (Coming Soon)
diff --git a/demo.html b/demo.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>jQuery Flat Shadow by Pete R.</title>
+	<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
+  <script type="text/javascript" src="jquery.flatshadow.js"></script>
+  <style>
+
+    body {
+      background: #f9af4e;
+      padding: 170px 0;
+      text-align: center;
+    }
+
+		.flat-icon {
+		  text-align: center;
+      font-family: 'open sans';
+      padding:23px 28px;
+      font-weight: bold;
+      display: inline-block;
+      line-height: 100%;
+      overflow: hidden;
+      text-transform: uppercase;
+      margin-right: 15px;
+      width: 40px;
+      font-size: 50px;
+      border-radius: 50px;
+      -moz-border-radius: 50px;
+      -webkit-border-radius: 50px;
+    }
+	</style>
+	<script>
+	  $(document).ready(function(){
+			$(".flat-icon").flatshadow({
+        fade: true,
+        boxShadow: "#ce892f"
+      });
+		});
+
+	</script>
+</head>
+<body>
+	<div data-angle="N" class="flat-icon"> A </div>
+  <div data-angle="NE" class="flat-icon"> B </div>
+  <div data-angle="E" class="flat-icon"> C </div>
+  <div data-angle="SE" class="flat-icon"> D </div>
+  <div data-angle="S" class="flat-icon"> E </div>
+  <div data-angle="SW" class="flat-icon"> F </div>
+  <div data-angle="W" class="flat-icon"> G </div>
+  <div data-angle="NW" class="flat-icon"> H </div>
+</body>
+</html>