Downloading & Installing Famo.us

Famo.us offers several ways to get your local workstation set up so you can start building. Which approach you choose depends on your own development experience and the complexity of your project.

Starter Kit — for total newbies

The fastest way to get started with Famo.us is via the starter kit. Just download it, unzip, and go. The starter kit comes packaged with a bunch of other goodies, including sample projects. Take a look »

Simple setup — for beginners & simple projects

The following method is simplest way of setting up a new Famo.us project from scratch. It resembles the approach used in the starter kit project. This method works best if you’re new to web development or just want to get up and running quickly, but it’s not so great if you’re building a complex project that has many moving parts. It assumes a basic familiarity with HTML and JavaScript.

First, create a folder. In the folder, create a new file, index.html. Populate the index.html file with the following content:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Famo.us App</title>
        <meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
        <script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
        <link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3/famous.css" />
        <script type="text/javascript" src="http://code.famo.us/famous/0.3/famous-global.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </head>
    <body></body>
</html>

In the same folder, create another new file, main.js. This is where you’ll begin to write Famo.us code. Copy and paste the following snippet into that file:

var Engine = famous.core.Engine;
var Modifier = famous.core.Modifier;
var Transform = famous.core.Transform;
var Surface = famous.core.Surface;

var mainContext = Engine.createContext();

var surface = new Surface({
    size: [200, 200],
    properties: {
        backgroundColor: '#fa5c4f'
    }
});

mainContext.add(surface);

Now open index.html in your browser. You should see a red square at the top-left corner of the viewport. If so, you’re ready to start coding!

Next: Starter Kit »