Article
Containers, a 960 Grid System plugin
Prior to using the 960 Grid System, I didn’t care much for CSS frameworks. But when I tried 960, it all made sense. I was faster, and the code made more sense. I liked it so much I implemented a similar system at work. (I had to make changes to fit various grid and design requirements). Due to certain code requirements, sometimes I was unable to add the alpha and omega classes when nesting grid units. This was also a problem I sometimes faced when working on personal projects — not for any lack in the system itself, but rather for my lack of back-end programming skills. I came up with a workaround that I thought may be useful to other users, which I thought might be useful as — for lack of a better term — a plugin for the 960 Grid System. I’ve come to use a very original name for this bit of code: 960 Containers.
What Containers basically does is add an extra class container to the parent div. Not automatically, of course, you’d still have to add it by hand. What the extra class does is eliminate the need for the alpha and omega classes by expanding the parent div into its margins. A graphical presentation might explain this better:
Figure 1. Sometimes you might not be able to add the <code>alpha</code> and <code>omega</code> class to nested grids. By adding a class to the parent div, we can accommodate standard grid units.
Simply download and call the css file in the <head> of the page, or copy the css into 960.css. Just be sure all code is after the 960 code. To use, add a container class to the parent div: <class="grid_4 container">. Note that for IE6, you’ll need to use the IE6 compatible version and use a different convention: <class="grid_4_container">
That’s it! Hope this might be useful for some. Download away:
Comments
Wow! What a great idea. One potential problem I see, though: If the container object has a background color, it will cross into the column “padding” area (the space between the columns).
Here’s an alternate solution: You could use the original 960.gs code, but add a clause something like this:
.container:first-child { (code equivalent to “alpha”); }
.container:last-child { (code equivalent to “omega”); }
Again, just a thought; I haven’t yet tried it.
Hey Taldar. You’re right, that is the limitation of the code. But in that case, the default 960 code should handle it just fine. The pseudo-classes you suggested wouldn’t work in IE6, and is problematic in IE7 as well.
Excellent posts, thank’s.
960 Grid solved so many problems for my site dev, and I even started to get CSS positioning. I then got very frustrated over child grids. Your contribution here is making that headache disappear. Thanks a lot. BTW, I just grabbed the two blocks of CSS code from the page source — downloading the zip seemed unnecessary and I guess it turns out it was.
Scott, glad it’s helping. Yeah, the download is there just in case someone is interested in doing that.
Glad for you. You made a nice job. It proves once again, that when you spend good time you’ll get good results.
Leave a Comment