I love using OOCSS grid names like .size1of2
or .size3of5
, they are really handy. The problem I have with them though is that they make no sense in a responsive design where a grid of .size1of3
on a big screen might be a grid of .size1of2
on a slightly smaller screen.
Use the same classNames and don't care about the exact width. So a .size1of3
can actually be 33% wide on a big screen and 50% wide on a smaller screen and probably 100% on a very small screen. I have a problem with this, you might understand that.
What you could do is use different classNames for different resolutions. That might result in classes like .xl1of2
, .l1of2
, .m1of2
, .s1of2
and xs1of2
which would result in HTML like this:
<div class="xl1of8 l1of6 m1of3 s1of2 xs1of1">
</div>
It looks a bit dirty. And it assumes that it's possible to create a predefined set of grids.
I'm not really happy with these two options. That's why I wrote this gist. I hope you have better ideas for this issue. Please let me know.
If "the grid" is agnostic of its content, how do we even know whether it's still a grid? How many (semi) fluid/liquid layouts are you looking at supporting, as in, how many, for want of a better word, steps (?), are there? Doesn't it as @davidhund said, make more sense to base class names on content?