Hello F2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/F2/1.3.3/f2.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container">
    <div class="hero-unit">
        <h1>Hello F2</h1>
    </div>
    <div class="row"><!--apps go here--></div>
</div>

CSS

body {
    margin: 20px;
}

JavaScript

var helloWorldManifest = 'https://gist.github.com/markhealey/5585967/raw/c83fdae4a40fefa1aec9e3938d2d3a810008917b/com_openf2_examples_javascript_helloworld.manifest.js',
    //define AppConfigs
    _appConfigs = {
    appId: 'com_openf2_examples_javascript_helloworld',
    description: 'Hello World',
    name: 'F2 App',
    manifestUrl: helloWorldManifest
};

//Setup ContainerConfig
F2.init({
    beforeAppRender: function(app){
        var appRoot = '<section class="well span12"></section>';
        return $(appRoot).appendTo('div.row');
    },
    afterAppRender: function (app, html) {
        //app.root is `appRoot` from beforeAppRender()
        return $(app.root).append(html);
    }
}); 
F2.registerApps(_appConfigs); //pass _appConfigs to initialize apps