flex-columns v0.3.52

FlexColumns

A column layout system for web development in Famous.

##Current Features

• Create and specify as many columns as needed.
• Add surfaces or views to columns for layout.
• You cannot add a surface to a column when the surface width is larger than the column width.
• You can specify gutter rows and columns.

##TODOS

• Responsive layouts.

##Getting Started npm install flex-columns;

//Code Example
var FlexColumns = require('flex-columns');

var flexColumn = new FlexColumns({
  gutterCol: 20,
  gutterRow: 20
});

var colOneWidth = 100;
var colTwoWidth = 150;

var bigSurface = new Surface({
  size: [100, 100],
  content: "I'm a big surface.",
  properties: {
    backgroundColor: 'red'
  } 
});

var smallSurface = new Surface({
  size: [50, 50],
  content: "I'm a small surface.",
  properties: {
    backgroundColor: 'blue'
  } 
});
flexColumn.createCol(colOneWidth).addSurfaceToCol(0, bigSurface);
flexColumn.addSurfaceToCol(0, smallSurface);

var veryLargeSurface = new Surface({
  size: [125, 125],
  content: "I'm a small surface.",
  properties: {
    backgroundColor: 'blue'
  } 
}); 

flexColumn.createCol(colTwoWidth).addSurfaceToCol(1, veryLargeSurface);