Bootstrap 3 and Freewall

[ghost]

I'm trying to integrate Freewall with Bootstrap 3, I want Freewall to respond to the same media queries that Bootstrap 3 uses - these media queries are:

@media(max-width:767px){} @media(min-width:768px){} @media(min-width:992px){} @media(min-width:1200px){}

Is it possible to vary the height and width of a 'brick' based on a media query or by specifying additional options for the 'cellW' & 'cellH' based on screen size?

Maybe I need to calculate the scale based on screen size, then specify the 'brick' height/width vaules based on that scale? I only really need 'bricks' based on percentage width, so a 100% brick, 75% brick, 50% brick and a 25% brick.

But I also need to enable drag support, so I need to ensure when the bricks are dragged and dropped they maintain there original percentage width. For instance I don't want a 100% brick shrinking when it's moved to be a 25% width brick.

Is there a way to specify the scale based on screen size in a responsive layout, and specify the width for a specific range of bricks (100, 75, 50, 25) based on the scale?

I've put together a really rough sample using Bootstrap and Freewall: http://jsfiddle.net/yr2PJ/

Trying to use percentage widths with all the settings I need enabled but any help would be appreciated.

[ghost]

Bit further with this, using the following code:

        $(function() {
            wallwidth = $('.free-wall').width();
            console.log('wall width = ' + wallwidth);

            wallwidthscale = wallwidth / 4;
            console.log('wall width scale = ' + wallwidthscale);

            wall = new freewall('.free-wall');

            wall.reset({
                selector: '> div',
                animate: false,
                cellW: wallwidthscale,
                cellH: 190,
                gutterY: 12,
                gutterX: 12,
                draggable: true,
                onResize: function() {
                    wall.fitWidth();
                }
            });
            wall.fitWidth();
        });

But I need to vary 'wallwidthscale' when the window is resized, I also need to refresh the block widths on resize. So If I have an event for resize I should be able to recalculate the 'cellW' value and reset and refresh the wall.

[kombai]

Hi, you can using cellW with function and cache option

wall.reset({
  cache: false,
  cellW: function(width) {
    // width is the width of container;
    return width/10;
  }
});

see more with https://github.com/kombai/freewall/issues/30 https://github.com/kombai/freewall/issues/47