Event callbacks.

<div class="thegrid">
    <div class="loading"></div>
    <div class="cell" data-width="1" data-height="4"><div></div></div>
    <div class="cell" data-width="1" data-height="1"><div></div></div>
    <div class="cell" data-width="2" data-height="1"><div></div></div>
    <div class="cell" data-width="2" data-height="1"><div></div></div>
    <div class="cell" data-width="2" data-height="1"><div></div></div>
    <div class="cell" data-width="2" data-height="1"><div></div></div>
    <div class="cell" data-width="3" data-height="1"><div></div></div>
    <div class="cell" data-width="1" data-height="3"><div></div></div>
    <div class="cell" data-width="2" data-height="1"><div></div></div>
    <div class="cell" data-width="1" data-height="2"><div></div></div>
    <div class="cell" data-width="1" data-height="1"><div></div></div>
    <div class="cell" data-width="1" data-height="2"><div></div></div>
    <div class="cell" data-width="1" data-height="2"><div></div></div>
    <div class="cell" data-width="3" data-height="1"><div></div></div>
    <div class="cell" data-width="1" data-height="2"><div></div></div>
    <div class="cell" data-width="1" data-height="2"><div></div></div>
    <div class="cell" data-width="1" data-height="1"><div></div></div>
    <div class="cell" data-width="1" data-height="1"><div></div></div>
    <div class="cell" data-width="1" data-height="1"><div></div></div>
    <div class="cell" data-width="2" data-height="1"><div></div></div>
</div>

.thegrid .cell > div {
        border: 1px solid orange;
        background-image: radial-gradient(circle at top right, yellow, #f06d06);
    }
    .message {
        background: #ffb;
        color: #666;
        padding: 15px;
        margin: 30px 0;
        display: none;
    }
    /* And the rest is irrelevant. */

// When DOM is ready.

// Just to clear timeout that hides message if playing fast around breakpoint.
var timeoutId;

// Do the event binding first before init the grid. Otherwise the library is so lightweight
// that the init will be complete before you even bind the event.
$('.thegrid')
    // The callback receives 1 param: e, the event object.
    .on('ready', function(e)
    {
        $(this).before('
The Grid is ready.
');
        $('.message').slideDown(1200, 'easeOutElastic');
    })
    // The callback receives 2 params: e is the event object, bp is the current breakpoint value.
    .on('breakpointChange', function(e, bp)
    {
        $('.message').html(
            'The Grid has detected a breakpoint change.\n
New breakpoint config:\n
' + bp + ': {\n'
            + '    cellsPerRow: ' + $(this)[0].grid.options.breakpoints[bp].cellsPerRow + ',\n'
            + '    cellHeight: ' + $(this)[0].grid.options.breakpoints[bp].cellHeight + '\n}
');
        clearTimeout(timeoutId);
        $('.message').stop(true, true).slideDown(700, 'easeOutCirc');
        timeoutId = setTimeout(function(){$('.message').stop(true, true).slideUp(400, 'easeOutCirc')}, 3000);
    })
    // Now init the grid.
    .grid(
    {
        cellHeight: 100,
        cellsPerRow: 7,
        breakpoints:
        {
            1199:
            {
                cellsPerRow: 5,
                cellHeight: 100
            },
            767:
            {
                cellsPerRow: 4,
                cellHeight: 130
            },
            479:
            {
                cellsPerRow: 2,
                cellHeight: 160
            },
        }
    });