To extend the White Paper Bible site, I asked Kerry Layton to design a calendar for the Advent season. You can view it here: http://www.whitepaperbible.org/advent.

Initially I was thinking Advent Sausage (http://lovelypackage.com/konecke-advent-sausage/), but I’m glad Kerry designed a beautiful, clean calendar. Kerry, btw, loves to design calendars and you can see some of his work over at Design Audit (http://www.designaudit.net).

I only had a few days to pull it together. Like everything else, it was a last minute idea. I wanted simple, feature Bible passages relevant to Advent, and a cool reveal animation.

So, I went on the hunt. First up, what in the world is Advent and what does that have to do with an Advent Calendar?! I’m not overly religious in the liturgical sense, so Wikipedia to the rescue.

Advent: http://en.wikipedia.org/wiki/Advent
Advent Calendar: http://en.wikipedia.org/wiki/Advent_calendar

To do the flip animation I new I wanted jQuery. I needed to both flip and resize the tile to display the passage. I found a bunch of stuff out there, but the one that really did the trick is the Flip! jQuery plugin found here: http://lab.smashup.it/flip/.

The recipe for the flip plus the scale I found over on the Work [at] Play blog: http://think.workatplay.com/content/workatplaycom-how-it-was-made-flip-and-scale-effect. Great stuff!

As I added the content, I either needed to add a scrollbar or let the content run. The scrollbar proved to be the best solution, so I went with my favorite, the jScrollPane plugin (http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html). Make sure to use the source on Google code (http://code.google.com/p/jscrollpane/) or the examples. The ZIP file is somewhat outdated. For adding mousescroll functionality, I use the same plugin posted with the jScrollPane examples, but the updated version at http://plugins.jquery.com/project/mousewheel.

I should also mention that this site is Ruby on Rails, and the advent calendar is really just a static html. The way I implemented this is using my Pages controller which serves up the less dynamic content on the site (like the About page). I added a route for /advent and then put all my advent specific assets (js, css, images) into public/advent to keep things a bit cleaner. I could probably keep the js all together with my core js files. Then in my view/advent.html I updated all the asset references to pull from the /advent sub dir. Merging static content into a Rails app isn’t really hard, it’s just that Rails developers like do know the right or approved way, and there doesn’t seem to be much consensus on that for static content. If you have a better way, let me know.

And that’s about it. Checkout the final result (well…final until I think of something to enhance it). http://www.whitepaperbible.org/advent.

Enjoy.