allow the media query to be "opt-in" by using a different class name.

[neonstalwart]

@media screen and (max-width: 319px) {.unit{float: none !important; width: auto !important;}} could be a little too coarse at times.

for example, i might have a number of modules which have their layout controlled by a grid - for the sake of argument, let's say there's 4 columns of modules. in those modules i might also use the grid to layout some content. if the screen size reduces, i'd like the grid of modules to reduce to a single column but i don't want to affect the content in the modules.

keeping with the oo philosophy, maybe the media rule should extend unit by using another class name rather than completely overriding it. for example (use whatever class name makes sense - i chose narrow): @media screen and (max-width: 319px) {.narrow{float: none !important; width: auto !important;}} and then the media query would be an optional extension of unit. i realize that it's more classes to add but i'm not sure how else to achieve the scenario i described. i'm open to suggestions...

[stubbornella]

I agree, I've moved the whole media query into a separate stylesheet so we can work out the kinks without impacting existing styles. I don't want to add classes to every unit to make this work, but perhaps there is a way to make it cascade down, so you add the class at any level and it works on all units below that? Not sure it is a good idea... hmm.

[neonstalwart]

i agree that adding classes to every unit that you want to have 'collapse' is maybe not ideal.

perhaps there is a way to make it cascade down, so you add the class at any level and it works on all units below that

with what i'm trying to achieve, i would need the added class to protect anything below that class - ie the class would need to reverse the effect of the media query so that the media query would work just as it does now but i could prevent the media query from affecting a block of content by adding a class that would do what unit does without the media query being in play. for example, the content in the first block (with the protectFromMedia class) would need to appear to be unaffected by the media query.

<div class="line">
    <div class="unit size1of2 protectFromMedia">
        <div class="unit size1of3">Not affected</div>
        <div class="unit size1of3">by</div>
        <div class="unit size1of3 lastUnit">media query</div>
    </div>
    <div class="unit size1of2 lastUnit">
        <div class="unit size1of2">affected by</div>
        <div class="unit size1of2 lastUnit">media query</div>
    </div>
</div>

i don't mean to suggest that the class should be called protectFromMedia - that was just to make it clear