Yannis Chatzikonstantinou

Freetile is a plugin for jQuery that enables the organization of webpage content in an efficient, dynamic and responsive layout. It can be applied to a container element and it will attempt to arrange it's children in a layout that makes optimal use of screen space, by "packing" them in a tight arrangement. Freetile has been the layout engine behind Assemblage and Assemblage Plus for almost two years, and now it becomes available as an independent Open Source project.

Features

Freetile is inspired by similar, existing efforts such as Masonry, vGrid and Wookmark. However, it differs from these solutions in some aspects:

• It allows for any size of elements to be packed without using a fixed-size column grid, so you don't have to worry about specifying a column width appropriate to the size of your elements.

• The algorithm that evaluates each possible insertion position is easily customizable, allowing for different preferences to be expressed, e.g. a preference to left- or right-alignment of elements, or proximity between certain elements.

Additionally, Freetile has the following key features:

• A smart animation routine allows distinguishing between elements that is meaningful to be animated and ones that are not (e.g. elements that have been just added to the arrangement, or those that are not visible). Special classes allow for explicitly limiting animation to select elements.

• It has been battle-tested through it's use in the many hundreds sites that make use of the Assemblage and Assemblage Plus templates. Furthermore, it has been used for layout in projects such as Properietary Polymers and Reffffound.

Usage

Default usage:

$('#container').freetile();

Enable animation, with an element delay of 30ms:

$('#container').freetile({
    animate: true,
    elementDelay: 30
});

Specify a custom element selector:

$('#container').freetile({
    selector: '.thumbs'
});

More instructions are available at the Freetile Github page!

Wordpress plugin

Damien Saunders has built a plugin to enable easy use of Freetile with Wordpress.

License

Freetile is licensed under the BSD License.

Get it!

Head over to the Freetile GitHub project page for more info and downloads, or to the Freetile discussion page at the forum, if you have any questions.

Donate!

Freetile is free software. However, it's development requires a significant amount of time and effort. If you find it useful in any way, please consider supporting by donating.

Links