Number of columns depending on container size?

[shur]

I want to use Salvattore script in plugin which can be placed in any area on site pages, e.g. in central area or left or right side area. Since you never know in which page area the plugin can be used, you cannot use media queries to set the number of columns. I cannot rely on widow size because when I set the number of columns depending on the window size in one page area the script looks good, while in another page area it looks awful.

That's why I'm forced to rely on parent container size (area size), not window size. To do this I use Responsive Elements script (http://kumailht.com/responsive-elements/). Responsive elements makes it possible for any element to adapt and respond to the area they occupy.

Salvattore works correctly with predefined CSS class names and media queries, but it fails to work with CSS class names dynamically added by Responsive Elements script. Could you help me find the solution to make them work together?

works:

.grid[data-columns]::before {
    content: '3 .column.size-1of3';
}

doesn't work:

.lt800[data-columns]::before {
    content: '4 .column.size-1of4';
}
.lt600[data-columns]::before {
    content: '3 .column.size-1of3';
}

Test example: http://jsfiddle.net/shur/qEJc2/

[shur]

Could anybody give me a working advice or some guidelines how to make Salvattore script change the number of columns depending on container size, not window size? This would make the script much more flexible when using on responsive sites or themes.

[ugogo]

What about something like that ?

.container {
  width: 100%;
  .colums {
    width: 33%;
    @media screen and (max-width: $break-small) {
      width: 50%;
    }
  }
}

[shur]

I've explained in the first post that styles that depend on window size do not work for extensions like plugins or modules. The same block can be placed in central part (wide) or side bar (very narrow) and these two blocks can be on the same page. In case window size is not important, only the block container size is important.

I don't know how to explain it shortly. This problem is well-illustrated in these articles:

Media Queries are a Hack http://ianstormtaylor.com/media-queries-are-a-hack/

Why Element Queries matter http://hugogiraudel.com/2014/04/22/why-element-queries-matter/

Working around a lack of element queries http://filamentgroup.com/lab/element-query-workarounds.html

All that is needed is to assign to container size, not widow size.

[ugogo]

Oups, sorry for that.

I tried in local, and i got "Salvattore doesn't work with CSS class names added by another script" Also, do not use

<script src="https://raw.github.com/rnmp/salvattore/master/dist/salvattore.js"></script>

but include the file directly in your project