breaking out of a fluid grid

Question

In RWD, we work with fluid grids. One example would be onepcssgrid. Lets say, I choose the 1200px for the target screen of 1280px. So we have

.onepcssgrid-1200 {
    max-width: 1220px;
}

Including the margins for gutters and some padding, my content area is 1200px. Now lets say, I want a big fat header or footer for that matter, at the top or bottom. There is no way I can do that. Main reason is that every element is going to a child/decendant of .onepcssgrid, .onerow, .col(n). Or maybe I can!

1. Change the styles in the onepcssgrid.css itself.
2. Override them in my main style sheet.
3. Make a <header> element, give it width: 100%, and than use the .onepcssgrid, .onerow, .col(n). The <footer> will be the same or an image gallery.

Which way is better? Why are there not any CSS Grids or classes within these grids that allow that, or are there? In some Grids, I have seen .push and .pull classes. Are they used for this situation? Is this a good case for breaking out of the grid on purpose? Are these only my options? How do the pros do it?

My target layout.

Answer 1

thank you for using my grid system.

Unfortunately it been almost 2 years since I've made it and it hasn't been updated for a very long time so yes it is little bit outdated. I don't have an intention to maintain or update it in the future because I started using little bit modified and improved version for my own purposes. Maybe in the future if I find free time I will release it.

If there is something missing or what you don't like about my grid fell free to update / change it. It's up to you. The best is probably keep original grid as it is and extend it in your own CSS file.

Maybe if there are more things for you to change you could try to check other grids / frameworks. I'm sure you will find one you will fit to your needs better.

Cheers Matt

Answer 2

I would say that option three is the best in this situation. You should always try to avoid refactoring a framework especially if you work with a team of developers. Its important to understand that a CSS framework is just a set of classes that are useful and exist to speed up your development - they do not need to constrain you to what you can create. Look under the hood of the framework and see how they do their queries and selectors and try to extend on that in your own styles.

Let me know if this helps or if you have another question :)