How to properly layout in Famo.us/ famous-views?

Question

I am using meteor.js and the gadicohen:famous-views and mjn:famous packages.

I would like to list projects to be displayed in the layout pattern above. The first project is twice the height of the subsequent two, and takes half of the screen. The subsequent two split the height of the first and take the other half of the screen.

Would the best way to tackle this be to create a custom grid view and add surfaces with explicit size, origin, and align properties? Can the surfaces be styled through CSS nth-child rules?

Answer 1

You could use 2 GridLayout's. One on the outside that has 2 horizontal cells, and one on the second cell that has 2 vertical cells. Like this:

var horzGrid = new GridLayout({
    dimensions: [2, 1]
});
var vertGrid = new GridLayout({
    dimensions: [1, 2]
});
vertGrid.sequenceFrom([
    new Surface({properties: {backgroundColor: 'blue'}}),
    new Surface({properties: {backgroundColor: 'red'}})
]);
horzGrid.sequenceFrom([
    new Surface({properties: {backgroundColor: 'gray'}}),
    vertGrid
]);
this.add(horzGrid); // add to parent view

Answer 2

The working code based on a template named nestedGridProjectLayout

Template.nestedGridProjectLayout.rendered = function() {
    var Engine = famous.core.Engine;
    var Surface = famous.core.Surface;
    var GridLayout = famous.views.GridLayout;

    var context = Engine.createContext();

    var innerGrid = new GridLayout({
        dimensions: [1, 2]
    });

    innerGrid.sequenceFrom([
        new Surface({
            properties: {
                backgroundColor: 'blue'
            }
        }),
        new Surface({
            properties: {
                backgroundColor: 'red'
            }
        })
    ]);

    var outerGrid = new GridLayout({
        dimensions: [2, 1]
    });

    outerGridContents = [];
    outerGridContents.push(new Surface({ 
            properties: {
                backgroundColor: 'gray'
            } 
        })
);
    outerGrid.sequenceFrom(outerGridContents);

    outerGridContents[1] = innerGrid;

    context.add(outerGrid);
}