famous-sizeconstraint

SizeConstraint makes it possible to set the following constraints on renderables:

Demos

• Site demo (demonstrates maximum-width to create a site-layout with borders)
• Photo demo (demonstrates aspect-ratio)
• Scale demo (demonstrates scaling)
• Padding demo (demonstrates padding)

Getting started

Install using bower or npm:

bower install famous-sizeconstraint

npm install famous-sizeconstraint

If necessary, add to the requirejs paths config:

require.config({
    paths: {
        ...
        'famous-sizeconstraint': 'bower_components/famous-sizeconstraint/SizeConstraint',
        ...
    }
});

Create a surface with a width 20px less than its parent:

var SizeConstraint = require('famous-sizeconstraint');

var sizeConstraint = new SizeConstraint({
	padding: [20, undefined]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Create a surface which is 50% its parent size:

Note: this is different from Transform.scale, as it does not apply a scale-matrix, but it merely changes the size.

var sizeConstraint = new SizeConstraint({
	scale: [0.5, 0.5]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Create a surface with a maximum-width of 400px, and a minimum-height of 100px:

var sizeConstraint = new SizeConstraint({
    max: [400, undefined],
    min: [undefined, 100]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Create a surface with an aspect ratio of 4/3:

var sizeConstraint = new SizeConstraint({
    ratio: [4, 3]
});
this.add(sizeConstraint);
var surface = new Surface({ properties: { backgroundColor: 'blue' }});
sizeConstraint.add(surface);

Documentation

• API Reference

Using multiple constraints

All of the constraints can be combined. When using multiple constraints, the following execution order is in effect:

size -> scale -> padding -> max -> min -> aspect-ratio

Contribute

Feel free to contribute to this project in any way. The easiest way to support this project is by giving it a star.

Contact

• @IjzerenHein
• http://www.gloey.nl
• [email protected] (for hire)

© 2014 - Hein Rutjes