Skip to content

Instantly share code, notes, and snippets.

@vasilisvg

vasilisvg/responsive-oocss-grid-names.md

Created October 14, 2011 09:39
Show Gist options
  • Save vasilisvg/1286691 to your computer and use it in GitHub Desktop.
Save vasilisvg/1286691 to your computer and use it in GitHub Desktop.
Download ZIP
OOCSS grid names in a responsive site
Raw
responsive-oocss-grid-names.md

OOCSS grid names in a responsive site

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.

Solution 1: use desktop sizes

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.

Solution 2: use different classNames for different resolutions

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.

Solution 3: ask you

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.

@jreading
Copy link

jreading commented Jan 3, 2013

** resurrecting thread

+1 sunpig

I don't see how you could ever use these in markup in a responsive site:
https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment