Skip to content

Instantly share code, notes, and snippets.

@burnsjeremy

burnsjeremy/responsive-oocss-grid-names.md

Forked from vasilisvg/responsive-oocss-grid-names.md
Created October 3, 2012 20:01
Show Gist options
  • Save burnsjeremy/3829472 to your computer and use it in GitHub Desktop.
Save burnsjeremy/3829472 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.

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