Famo.us

by Tony Alves

HTML

<script src="http://famousco.de/fiddle/famousBox.js"></script>

CSS

.card-box {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: orange;
}
.card-box-inner {
	padding: 5px;
}
.subject {
    line-height: 25px;
}

JavaScript

define('main', function (require, exports, module) {
    var Engine = require('famous/core/Engine');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var Easing = require('famous/transitions/Easing');
    var Surface = require('famous/core/Surface');
    var ContextualView = require('famous/views/ContextualView');
    var ContainerSurface = require('famous/surfaces/ContainerSurface');
    var SequentialLayout = require("famous/views/SequentialLayout");

    var mainContext = Engine.createContext();
    var surfaces = [];
    var sequentialLayout = new SequentialLayout();
    
    sequentialLayout.sequenceFrom(surfaces);

    var card = new ContainerSurface({
        classes: ['card-box','card-box-inner']
    });
    
    var cardSubjectSurface = new Surface({
        classes: ['subject'],
        content: 'Subject:'
    });

    surfaces.push(cardSubjectSurface);

    var cardDescriptionSurface = new Surface({
        size: [undefined, true],
        content: 'Curabitur venenatis neque vel est pharetra semper. Cras eget tristique erat. Ut blandit nisl eros, et molestie elit scelerisque vel. Pellentesque non sapien odio. Donec quis dolor at mi gravida auctor. Nunc ligula quam, blandit eu urna non, porttitor fringilla magna. Sed nec viverra massa. Cras a tincidunt lorem, quis dapibus nibh. Proin imperdiet leo et mi facilisis ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec consequat, sem ut blandit volutpat, neque ligula lacinia augue, eget ornare velit turpis ornare leo. Ut lobortis a risus non hendrerit. Aliquam sodales aliquet lacinia. Phasellus sem enim, elementum a faucibus vel, mattis non ipsum. Aliquam quis laoreet urna, eu fermentum ante. Aliquam erat volutpat.'
    });
    
    surfaces.push(cardDescriptionSurface);
    
    card.on('deploy', function() {
        var y = 0;
        for (var i=0; i<surfaces.length; i++){
            var s...