Collective #26
Inspirational Website of the Week

From the Front 2012: The Treasure of FrontEnd Island, Front-End Conference is our pick this week. Awesome animations and transitions.
Get inspiredDark UI Music Player Design (PSD)

A beautifully detailed free design resource by Pixeden.
Get itTowards A Retina Web

Reda Lemeden explains the basics and the challenges that are arising from the new wave of high-resolution display standards and how to tackle the challenges when designing for multiple display densities.
Read itFree Font: Casper

Michael Chereda shares his latest font experiment with us: the Casper typeface. It's a delicate, clean and readable font with some beautiful ligatures.
Get itParallax Background Builder

A great WYSIWYG tool for creating your own parallax background. It has a great user interface and is easy-to-use.
Built itDoodle Jump HTML5 Game

A re-creation of the Doodle Jump using HTML5 Canvas. It does not have all the features like the original game but it's a great experiment and a lot of fun!
PlayoriDomi: Fold up the DOM like paper

Dan Motzenbecker developed this great script that lets you fold up elements like paper. It has no dependencies and is very light-weight.
Check it outFitWeird Bookmarklet

Paravel gives us yet another useful tool: a bookmarklet that tells you the dimensions of your window in PX and EM. Simple, but very useful when developing responsive websites.
Get itRealty: Free Wordpress Theme

Realty is a powerful, responsive and feature-rich WordPress theme for real estate websites.
Get itTooltipster: jQuery Tooltip Plugin

Tooltipster is a lightweight (4,813 bytes minified) jQuery plugin that enables you to easily create clean, HTML5 validated tooltips.
Get itHigh DPI Images for Variable Pixel Densities

Boris Smus explains the challenges of pixel density variation among devices and shows how application developers can use several techniques and best practices to tackle the problems.
Read itFree Font: Znikomit No. 25

Grzegorz Luk shares this creative typeface for free. It is very artistic and beautifully ornamented.
Get itWorld's Cheapest Camera (PSD)

Adrien Olczak shares this freebie of an IKEA camera that will be given away for free in the end of this year.
Get itDate Range Picker for Twitter Bootstrap

If you are using Twitter Bootstrap, you'll find this date range picker by Dan Grossman very useful. It creates a drop down menu from which a user can select a range of dates.
Get itDrawing Game with Node.js
Martin Angelov shows you how to create a real-time online drawing game with node.js.
Read itIdeal Forms: Responsive HTML5 Forms

Ideal Forms is a great framework for building and validating responsive HTML5 forms.
Try it13-inch Apple MacBook Air (PSD)

A free, fully scalable Apple Macbook Air PSD from PremiumPixels by UI designer Koy Carraway.
Get itBigVideo.js: Background Videos for Websites

This plugin by John Polacek allows it to it easily add a fit-to-fill background video to a websites. BigVideo.js is built on top of Video.js from zencoder.
Get itHappy Little Button Freebie (PSD)

Chris Farina shares this cute and detailed little button with us.
Get itjsPlumb: Visually Connect Elements

If you did not know it already, jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and below.
Get itSiteCake CMS

SiteCake is a easy-to-use, simple CSS editor that allows you to edit your existing website on-the-fly.
Try itTimelines with Chronoline.js

Chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale. It only requires raphael.js to work.
Check it out