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.
@matijs I don't know the size of a content item. For instance, a small component with a heading, an image and a list of links can be placed anywhere on the page, it does not have a width in itself, it just adapts to its parent. It is perfectly possible that an item like this is placed in a sidebar and in the main content area. On a large screen this might mean that this item is 200 and 600px wide. Separating layout from content keeps things manageable.
The other question you ask is how many "steps" there will be. I don't know yet. I will add as many steps as needed. If the layout is too cramped in a certain area a new step is created for that part of the layout. I think steps is not the right word though: they are layout/content conflicts and I solve them per item.