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