The Famo.us Stylesheet

Famo.us comes with a special stylesheet ↓ that includes styles that are necessary for Famo.us to render elements correctly. You must link this stylesheet to use Famo.us.

If you prefer including vendor code wholesale, you can download the stylesheet source ↓. If you would rather link to a stylesheet hosted on a CDN, include this snippet in your page’s <head>:

<link rel="stylesheet" href="https://code.famo.us/famous/0.3/famous.css">

How the Famo.us stylesheet works

The Famo.us stylesheet’s role is to set up several primary styles for rendering elements “the Famo.us way”. Without the stylesheet, in fact, Famo.us cannot render elements correctly. Including it is a requirement for every Famo.us application.

.famous-root

The famous-root class is assigned to the top-level context of the application (when appMode has been set to true, the default). It allows for full-viewport presentation, allowing your application to fill the full window, hiding any overflow, and allowing for 3D-aware positioning and rotation.

.famous-container

The element with class famous-container is the container for renderable elements. 3D rendering and backface visibility are both enabled.

.famous-surface

All surfaces are given the class famous-surface. This class enables surfaces to be transformed in 3D space. It also sets border-box-style box-sizing so that sizing surfaces according to a width and a height has the most commonly expected effect.

Next: The render tree & render nodes »