Hello Framework

The Famous Framework provides a structured API for controlling UI elements with the Famous Engine. As a framework, its goals are to bring composability, extensibility, and consistency to UI applications.

The basics

The bulk of a project lives within the module definition, where we list our behaviors, events, states, and tree as members of an object (see Core Concepts for an intro to the BEST architectural pattern).

A simple project

Check out the 'Hello World' example below. When reading through the code, think of the tree as Famous-enhanced HTML and the behaviors as CSS styles on steroids.

Note how we use CSS selectors (#background, #text) to target behaviors to elements that are declared in the tree.

While the tree sets up the structure of our app, the behaviors tell the module how each element should be displayed. The result: a 'Hello Framework!' message centered and styled in front of a CSS gradient background.

Creating your component

In a framework project, create a new component directory within lib/core-components called my-name.

Create a subdirectory within that one for your new component called hello-framework.

In that subdirectory, create the file hello-framework.js. The result should be like this: