CSS Grids and Responsive Design

Question

I am planning to use a Grid system for a site, but I'd like to be able to break the grid selectively. This would mean, for example, turning an OOCSS size1of2 into a size1of1). Ideally, the html would look something like this:

<div class="line">
    <div class="unit size1of2 respond-480">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="unit size1of2 respond-480 lastUnit">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Then I'd have something like the following css:

@media screen and (max-device-width: 480px) {
    .respond-480 {
        /* something to linearize the box */
    }
}

Does anyone know of a way to do this with OOCSS, or another grid system? I'm looking for this level of control, as opposed to a simpler responsive grid.

Answer 1

Turns out it makes more sense to add the respond480 class to the line rather than the unit. Not surprising. The following code works rather well for modern browsers. I used the child selector to simplify things -- though it may be possible to do a workaround, older browsers (IE<6) don't support these media queries anyway.

@media screen and (max-width: 480px) {
    .respond480 > .unit {
        width: auto;
        float: none;
    }
}

I was digging through the OOCSS source, and came across grids/grids_iphone.css. This lends some credibility to my strategy. Anyone know if !important is mandatory? Selectivity seems work for me without it -- probably due to the two class selectors.

@media screen and (max-width: 319px) {
    .unit {
        float: none !important;
        width: auto !important;
    }
}

And here's a page showing it in action. I used Nicole Sullivan's grid test from Arnaud Gueras, but with more filler text. Note that I left one 2of2 segment purposefully un-linearized, to demonstrate that it's not necessary to linearize everything.

Answer 2

Because she said to avoid !important unless it's a leaf node at Velocity conference, it's odd how she would put that in her code.

Answer 3

Check out Cascade Framework. It has an OOCSS architecture and supports responsive design out of the box (although it is optional and can be left out if you want).

With Cascade Framework, you'd implement your example like this :

<div class="col">
    <div class="col size1of2">
        <div class="cell">
            <h3>1/2</h3>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
    <div class="col sizefill">
        <div class="cell">
            <h3>1/2</h3>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
</div>