add README

README.md

@@ -0,0 +1,19 @@
+# Facebook Zombies
+
+An example application showing how to use the Facebook friend API and create a friend selector using [Spine](http://spinejs.com).
+
+See the blog post for more information.
+
+## Interesting code
+
+The most interesting code is under [assets/javascripts/app/controllers/friend_selector.coffee](https://github.com/maccman/zombies/blob/master/assets/javascripts/app/controllers/friend_selector.coffee). This is a Spine Controller that creates a Facebook friend selector, allowing users to toggle multiple selected friends.
+
+## Usage
+
+1. Setup env variables
+1. Run: `bundle install`
+1. Run: `be rackup`
+
+## Env variables
+
+You'll need to set the env variables `FACEBOOK_APP_ID` and `FACEBOOK_SECRET` as detailed in the [Heroku Facebook guide](https://devcenter.heroku.com/articles/facebook).

assets/stylesheets/app/friend_selector.css.styl

@@ -5,29 +5,28 @@
   margin 30px auto
   border: 1px solid rgba(0, 0, 0, 0.2)
   -webkit-user-select: none
-  border: 10px solid rgba(255, 255, 255, 0.4)
-
+
   &.loading .items::after
     content: 'Loading...'
     display: block
     padding: 8px 0 3px
     text-align: center
-  
+
   header
     height: 30px
     line-height: 30px
     padding: 0 10px
     vbg-gradient(#FDFDFD, #EAEBEB)
     border-bottom: 1px solid rgba(0, 0, 0, 0.2)
-    
+
     .status
       float: right
       font-size: 12px
       color: #668EC6
       font-weight: bold
       line-height: 31px
       text-shadow: 0 1px #FFF
-    
+
     input
       width: 140px
 
@@ -37,7 +36,7 @@
     font-size: 12px
     padding: 0 0 5px 5px
     background: #FFF
-  
+
     div
       float: left
       width: 150px
@@ -46,11 +45,11 @@
       cursor: pointer
       ellipsis()
       padding: 5px
-      
+
       img
         float: left
         margin-right: 8px
-      
+
       &.selected
         background: #668EC6
         color: #FFF

assets/stylesheets/app/team_selector.css.styl

@@ -5,56 +5,55 @@
   margin 30px auto
   border: 1px solid rgba(0, 0, 0, 0.2)
   -webkit-user-select: none
-  border: 10px solid rgba(255, 255, 255, 0.4)
-
+
   &.empty .items::after
     content: 'Empty...'
     display: block
     padding: 8px 0 3px
     text-align: center
-  
+
   header
     height: 30px
     line-height: 30px
     padding: 0 10px
     vbg-gradient(#FDFDFD, #EAEBEB)
     border-bottom: 1px solid rgba(0, 0, 0, 0.2)
-    
+
     h2
       font-weight: bold
       font-size: 13px
       color: #515151
       text-shadow: 0 1px #FFF
-    
+
   .items
     font-size: 12px
     padding: 0 0 5px 5px
     background: #FFF
     overflow: hidden
-  
+
     div
       margin: 5px 5px 0 0
       padding: 5px
       overflow: hidden
-      
+
       span.left
         display: block
         float: left
-        
+
       span.name
         display: block
         ellipsis()
         width: 150px
-        
+
       a.remove
         display: block
-        
+
       input
         float: left
         font-size: 13px
         padding: 5px
         width: 300px
-      
+
       img
         float: left
         margin-right: 8px

assets/stylesheets/theme.css.styl

@@ -1,15 +1,12 @@
 @import './mixins'
 
-#article
-  background: url('http://images.alphacoders.com/145/145407.jpg') no-repeat;
-
 a
   cursor: pointer
   font-size: 12px
   color: #668EC6
   font-weight: bold
   text-shadow: 0 1px white
-  
+
   &:hover
     text-decoration: none
 
@@ -46,7 +43,7 @@ input[type=text]
 
 input[type=search]
   outline: none
-  
+
 button, a.cta
   line-height: 1em
   display: inline-block
@@ -65,7 +62,7 @@ button, a.cta
   vbg-gradient(lighten(#F4F4F4, 10%), darken(#F4F4F4, 5%))
 
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), color-stop(0.5, rgba(255, 255, 255, 0.5)), color-stop(0.5, rgba(255, 255, 255, 0))), darken(#F4F4F4, 5%)
-  -webkit-box-shadow: inset 0 1px 0 #FFF, 0 1px 2px rgba(0, 0, 0, 0.2)  
+  -webkit-box-shadow: inset 0 1px 0 #FFF, 0 1px 2px rgba(0, 0, 0, 0.2)
 
   &.default
     border-color: rgba(104, 189, 244, 0.8)
@@ -78,6 +75,6 @@ button, a.cta
     -webkit-box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.1)
     -moz-box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.1)
     box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.1)
-    
+
   &:disabled
     opacity: 0.5