Creating an iOS-like Home Screen with CoffeeScript


Today we are going to create an iOS-like home screen using CoffeeScript – a new JavaScript based language, and the jQuery library. CoffeScript has a clean syntax that lies somewhere in between Ruby and Python. If you haven’t used any of them, don’t worry – it is not required. However you will need to be familiar with JavaScript so you can better understand the concepts behind the language.

We are also going to use the Touchable plugin, so we can listen for touch-based events.

First, what is CoffeeScript?

CoffeeScript is a neat programming language meant to enhance the good parts of JavaScript, while working around the not so good. It makes OOP easy and introduces a number of useful additions such as comprehensions, new syntax for functions and scope handling, along with numerous small improvements.

CoffeeScript works in every browser out there, and is compatible with all your existing JavaScript code (including libraries like jQuery and plugins). But how does this work if it is a different language? Simple –CoffeeScript compiles down to JavaScript, so it works in any browser that supports it.

Before you start following this tutorial, I would suggest that you read through the examples on theCoffeeScript website (be sure to check out the “Try CoffeeScript” tab), and The Little Book on CoffeeScriptfor an introduction to the language.

iOS -like Home Screen with CoffeeScript

iOS -like Home Screen with CoffeeScript


Lets start with the HTML markup of our iOS-like home screen. As usual, this is a regular HTML5 document with stylehseets in the head and JS includes before the closing body tag.


<head><meta charset="utf-8"/> <title>iOS Home Screen with CoffeeScript Tutorialzine Demo</title>

<!--Our CSS stylesheet file-->
<link rel="stylesheet" href="assets/css/styles.css"/> 
<!--[if lt IE9 language="><!DOCTYPE]>

<script type="text/javascript" src=""></script>
 <section id="homeScreen">
 <div id="mask">
 <div id="allScreens"></div>
 <div id="dock"></div>
 <!-- JavaScript includes --><script type="text/javascript" src=""></script>
 <script type="text/javascript" src="assets/js/touchable.js"></script><script type="text/javascript" src="assets/js/coffee-script.js"></script>
<script type="text/javascript">// <![CDATA[
# Our Code Goes Here

// ]]></script>

We have the #homeScreen section, which is the main container of our experiment. Inside it is the#mask, which uses overflow:hidden to show only one screen at the time. The #allScreens div inside it, as the name suggests, contains all the dynamically generated .screen divs with icons.

Following is the indicators UL, which shows the little dots with the currently shown screen, and the#dock div. As mentioned previously, CoffeeScript requires an extra compilation step, which will convert the source code to JavaScript.

You can do this with the coffeescript package for node.js (as explained on their website), or with coffeescript.exe for windows, which is standalone and ready for use executable.

For small scripts, you can also include the compiler directly in your page and write your code inline in a <script> tag – which we will be using today. At the bottom of the page, you can see our script includes. These are the jQuery library, the Touchable plugin, which will help us work with touch events, and the CoffeeScript compiler – coffee-script.js. The compiler will look for