Sizes transforms

Responsive transforms

You can dynamically transform grid item sizes with Gridifier. If you are using media-queries per grid items(and in most cases you are), you should create separate class per each sizes transform, and use them with one of responsive sizes change functions:

Parameters:

• domCollection - DOM object, array of DOM objects or jQuery collection.
• classNames - string with classname or array with class names.

Notices:

• toggleCss function should be used to toggle item sizes between 2 states - for example default and big size.
• addCss and rmCss functions should be used to change item sizes between custom count of states - for example default, 2x, 4x.
• don't change responsive sizes with manual adding/removing classes and triggering window resize - this can be slow and can produce bugs.

What about width & height transitions?

• setting width and height transitions directly on grid items when using responsive transform functions will break Gridifier reposition algorithm.
• of course, you can use grid items as wrappers and add transition classes to grid item childs when calling responsive transform functions.
• we think it is not very good solution too - applying CSS3 transitions to any properties besides item position(like width and height) looks 'shaky' and slow almost on all touch devices.

Demo grid:

var demoGrid = document.getElementById("#demo-grid");
var grid = new Gridifier(demoGrid);

TouchClickEvent.listen(demoGrid, ".grid-item", function(event) {
    grid.toggleCss(event.target, "big-grid-item");

    // In some cases toggled state can depend on many classes:
    // grid.toggleCss(event.target, ["big-grid-item1", "big-grid-item2"]);
});
        

.grid-item {
    /* ... Other styles */
    width: 90px;
    height: 90px;
    margin: 10px;
    /* Of course you can use percentage sizes instead.
       For example in demo on Gridifier homepage we are using:
       width: 20%;
       height: 0;
       padding-bottom: 20%;
       margin: 0rem; */
}

.big-grid-item {
    /* ... Other styles */
    width: 200px;
    height: 200px;
}
        

@media(max-width: 979px) {
    .grid-item {
        /* ... Other styles */
        width: 50px;
        height: 50px;
        margin: 5px;
    }

    .big-grid-item {
        /* ... Other styles */
        width: 110px;
        height: 110px;
    }
}

/* ... Other media-queries */
        

Alternatively, if you are required to change between more than 2 sizes, you can use addCss / rmCss functions: (Css is similar to upper example, except that there are 3 classes instead of 2)

var demoGrid = document.getElementById("#demo-grid");
var grid = new Gridifier(demoGrid);

TouchClickEvent.listen(demoGrid, ".grid-item > .shrink-to-def", function(event) {
    grid.rmCss(event.target, ["big-grid-item", "extra-big-grid-item"]);
});

TouchClickEvent.listen(demoGrid, ".grid-item > .grow-to-big", function(event) {
    grid.rmCss(event.target, "extra-big-grid-item");
    grid.addCss(event.target, "big-grid-item");
});

TouchClickEvent.listen(demoGrid, ".grid-item > .grow-to-extra-big", function(event) {
    grid.rmCss(event.target, "big-grid-item");
    grid.addCss(event.target, "extra-big-grid-item");
});
        

Events

What events are emitted during sizes transform operations?