node package manager

tyler

Metro-style tiling UI implemented in CSS and CoffeeScript

tyler

Metro-style tiling UI implemented in CSS (Webkit only!)

http://performancejs.com/tyler/

new tyler(data, element, options)

Add tyler.css to your page's <head>:

<html>
<head>
<link rel="stylesheet" href="css/tyler.css" />
</head>
<body></body>
</html>

Add tyler.js and its dependency, umodel, to the bottom of your <body> (or load with any CommonJS or AMD-compatible module loader):

<html>
<head>
<link rel="stylesheet" href="css/tyler.css" />
</head>
<body>
<script src="dependencies/umodel.js"></script> 
<script src="tyler.js"></script> 
</body>
</html>

Then initialize Tyler with a final <script> (be sure to link to it after Tyler and its dependencies):

<html>
<head>
<link rel="stylesheet" href="css/tyler.css" />
</head>
<body>
<script src="dependencies/umodel.js"></script> 
<script src="tyler.js"></script> 
<script>
new tyler([
{ name: 'Foo', weight: .9 },
{ name: 'Bar', weight: .4 },
{ name: 'Baz', weight: .7 }
]);
</script> 
</body>
</html>
options = {
 
/*
{Number} how many tiles should fit side-by-side
 */
columns: 2,
 
/*
{Number} visual horizontal offset for tiles
 */
offsetX: 0,
 
/*
{Number} visual vertical offset for tiles
 */
offsetY: 0,
 
/*
{Boolean} whether or not tiles should be flippable
 */
flippable: true,
 
/*
{Function} a template that returns a string
HTML template for the front of a tile, bound to any data from the `data` object passed when Tyler is instantiated
 */
templateFrontfunction(){
return '<div class="tile-front">' + this.foo + '</div>'
},
 
/*
{Function} a template that returns a string
HTML template for the back of a tile, bound to any data from the `data` object passed when Tyler is instantiated
 */
templateBackfunction(){
return '<div class="tile-back">' + this.bar + '</div>'
},
 
classNames: {
 
/*
{String} class for each tile element
 */
tile: 'tile'
 
/*
{String} class appended to a tile element when it's flipped
 */
tileFlipped: 'flipped'
 
},
 
animation:
 
/*
{Number} Flip animation duration, in milliseconds
 */
duration: 500,
 
/*
{String} CSS transition timing function for flip animation, see http://www.w3.org/TR/css3-transitions/#single-transition-timing-function
 */
fn: 'ease-out'
}
tyl = new tyler()

pass some data to tyler, overiding any existing data and forcing a re-render

tyl.data({ ... })

call a function when a view event is triggered (currently only supports click)

tyl.on('click', function (tileElementevent) {
// this = tyler instance 
});
npm install
grunt