Has anyone combined OOCSS with another grid framework?

747 Views Asked by At

I'm sold on the benefits of using Nicole Sullivan's Object-Oriented CSS philosophy/coding methodology/whatever. In particular, I'm keen to use principles such as the "media block" in the sites I'm building at the moment.

However, it comes bundled with a liquid-style grid system and our designers are currently building to a strict 960 grid width system. The 960 grid system uses a fixed 12 or 16 column layout, each consisting of either 40 or 60 pixels. OOCSS seperates a layout into fluid divisions of 1/2, 1/3, 1/4 or 1/5 portions.

960.gs has inherent "gutter" margins built in between columns at 10px each. OOCSS has no margins between columns as they can be any width and instead the margins are provided between content elements so as to seperate content and container.

Is it a bad idea to mix and match the best of both these 2 frameworks into our company CSS boilerplate? Does the fluid nature of the OOCSS grid framework make it poorly suited to a rigid 960 page width? We're using the HTML5 boilerplate as well.

I'm asking this as I have already found that when trying to incorporate certain frameworks with OOCSS (such as SASS) that two approaches can be orthagonal toward each other and it's better to just pick one and stick with it - but this may not always be the case.

2

There are 2 best solutions below

0
On BEST ANSWER

The main advantage of a grid system is that it gives a visual unity to your page -- you have consistent divisions throughout. I would hesitate to use two different grids, because that would mean you are working to two different sets of lines, resulting in a far less consistency. Additionally, if these grid systems were not built to work with each other, mixing them might have surprising effects for some edge cases (or even normal cases). You don't want to run into that after a month of working on a project, and have to tear one or the other out.

0
On

Two CSS frameworks that apply OOCSS principles throughout the framework :

AFAIK, Cascade Framework is the only CSS framework that includes a media object implementation fully integrated into the grid. That makes Cascade Framework's grid system the most flexible grid system of all CSS frameworks.

Some other frameworks are slowly adopting OOCSS concepts, typically including the media object as a seperate UI element. For example, check out Bootstrap's implementation.