0.3.1 • Published 9 years ago

flexcolumn v0.3.1

Weekly downloads
2
License
MIT
Repository
github
Last release
9 years ago

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);