From 69be28d102def9dc123592d7d4187ec4dd614ac0 Mon Sep 17 00:00:00 2001
From: Dugan Knoll <ddknoll@gmail.com>
Date: Wed, 14 May 2014 13:35:42 -0700
Subject: [PATCH] Adding better documentation

---
 About-Ractive.md           | 40 +++++++++++++++++++++++++++++++
 README.md                  | 49 ++++++++++++++++++++++++++++++++++++--
 templates/twitter-feed.rac |  4 ++--
 3 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 About-Ractive.md

diff --git a/About-Ractive.md b/About-Ractive.md
new file mode 100644
index 0000000..f0721a4
--- /dev/null
+++ b/About-Ractive.md
@@ -0,0 +1,40 @@
+# Ractive - Declarative, Model-driven Documents
+
+
+## The Naive Approach
+
+Too many javascript applications contain repetitive code.  First, you select a an element using its ID, `var myNode = $('#something-to-use')` then update its content `myNode.html('<p>add this content to the node.</p>')`; and repeat this until everything is up to date.
+
+I love jQuery, but this is bad practice. Too many lines of code and searching by css selectors will slow down your code.
+
+## The JS Framework approach
+
+There are plenty of shiny new javascript frameworks to help you be organized and efficient while writing code:
+
+[ToDoMVC - JS Frameworks listing](http://todomvc.com/)
+
+These frameworks provide methods for ajax requests, templating, code-compiling, testing, data-binding, and much more.  
+
+## The Ractive Approach
+
+Ractive does one thing and it does one thing wonderfully.  Binding a JSON data object to an HTML model.  Take a quick look at this sample code.
+
+#### HTML
+
+    <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
+
+    <script id='template' type='text/ractive'>
+        <h1>{{title}}</h1>
+        <p>{{x}} * {{y}} == {{ x * y }}!</p>
+    </script>
+
+    <div id='container'>Attempting to load template...</div>
+
+
+#### Javascript
+
+    ractive = new Ractive({
+      el: 'container',
+      template: '<p>{{greeting}}, {{recipient}}!</p>',
+      data: { x: 5, y:6 , title: 'Multiplying Numbers'}
+    });
diff --git a/README.md b/README.md
index 6c440f3..875e3a0 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,48 @@
-# [Instagram Infinite Scroll](https://github.com/DDKnoll/Instagram-Infinite-Scroll)
+# [Instagram Infinite Scroll](http://ddknoll.github.io/Instagram-Infinite-Scroll/)
 
-In progress... Functional, but not yet documented.
+[Demo](http://ddknoll.github.io/Instagram-Infinite-Scroll/)
+
+Instagram Infinite Feed
+
+Sample Usage:
+
+    <script src="js/ractive/Ractive-legacy.0.3.9.min.js"></script><!-- Get Ractive-->
+    <script src="js/instagram.js"></script> <!-- Get Instagram extension -->
+    <script id='template' type='text/ractive' src='templates/twitter-feed.rac'></script>
+
+
+    /** This code is just for the infinite scroll.  You don't have to use this. */
+    var infiniteScrollBinding = function(){
+        //Infinite Scroll Window Bindings
+        $(window).scroll(function(evt){
+          var bod = $('body')[0];
+          pageHeight = bod.offsetHeight;
+          bottomScroll = window.scrollY + bod.clientHeight;
+          if(pageHeight - bottomScroll < 200){
+              insta.load('after');
+          }
+        });
+    }
+
+    //Create New Instagram Feed
+    insta = new instagramFeed({
+      el: 'template-target',
+      template: template,
+      clientID: 'Your Instagram Client ID',
+      hashtag: 'webdesign',
+      complete: infiniteScrollBinding
+    });
+
+Function Reference
+
+    insta.load('replace'); // Replace the current data (Reload)
+    insta.load('before');  // Check for newer posts
+    insta.load('after');   // Load Older Posts
+    insta.set('search', 'yolo'); //Set Value of Search
+    insta.get() //Inspect the Data
+
+
+TODO:
+
+1. Minify JS
+2. Finish Documentation
diff --git a/templates/twitter-feed.rac b/templates/twitter-feed.rac
index 8606be7..b25b655 100644
--- a/templates/twitter-feed.rac
+++ b/templates/twitter-feed.rac
@@ -1,9 +1,9 @@
 <!-- BANNER -->
 <div class="pure-g-r title">
-		<div class="pure-u-4-5">
+		<div class="pure-u-2-3">
 			<span class='heading-text'>#</span><input class='hashtag heading-text' type='text' value='{{search}}'/>
 		</div>
-		<div class="pure-u-1-5 icons">
+		<div class="pure-u-1-3 icons">
 			<a class='icon' href='https://github.com/DDKnoll/Instagram-Infinite-Scroll'><i class="icon-github"></i></a>
 			<a class='icon' href='https://twitter.com/DDKnoll'><i class="icon-twitter"></i></a>
 			<a class='icon' href='https://plus.google.com/share?url=http://ddknoll.github.io/Instagram-Infinite-Scroll/'><i class="icon-gplus"></i></a>