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.
@vasilisvg but, as you've discovered, a grid is not static. What once was a column could suddenly become a row. What in one context is a half-width column could in another context be a 25opx absolutely positioned element ;)
I think, therefore, that naming your elements with 'static' appearance-names (
div.col-2-of-4
) is just as silly ash1.red
.In this sense semantics should not be based on appearance but on content. The 'grid' is in your head, not fixed in the structure (
< / morpheus>
)