I’ve been using 960.gs on a few sites recently. Without wanting to get into a discussion about the pros/cons of using css grid frameworks, I find them useful for some sites.
The 960.gs framework comes with a handy demo that shows a grid overlay, but the GIF images used have no transparency, so it is difficult to add a nice grid overlay to sites when developing them.
On the 960.gs home page there is a button by the thumbnail examples that dynamically adds a grid to the image. I Googled around for a similar solution, but didn’t find one that quite did what I wanted. So, I decided to build a simple jQuery plugin of my own.
Here’s a demo of the plugin in action.
To use the plugin, simply add the following code to your pages for a 12 column grid:
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.960grid-1.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("body").addGrid(12);
});
</script>
Once the plugin is activated, a small toggle link will be visible in the top left-hand corner of the page. Unsurprisingly, if you change the input parameter from 12 to 16, you get a 16 column grid available!
The plugin relies on a couple of PNGs and by default the image path is set to /images/. You can override this setting, along with several others, by passing in some options as follows:
var options= {
img_path: 'img/',
z_index: 999,
opacity:.6
};
$("body").addGrid(12, options);
As well as the image path, it is possible to override the default z-index used by the overlay, in case there is a conflict. You can also alter the opacity of the PNG if you require.
Please feel free to download the plugin for your own use. Let me know of any problems or suggested enhancements.
Tags: CSS, grid, JQuery, linkedin
Ian commented on 
robert commented on 
David commented on 
Faramarz commented on 
ling commented on 
Daniel Shanahan commented on 
Alun commented on 
Amsterdam commented on 
dpmguise commented on 
Finally a solution for IE8, but for me it doesn’t respect the background colors of parent containers so I am seeing rounded corners with the cut out parts being white instead of transparent or the parent’s background-color :( This makes the plugin useless for me. I am just about to give up on IE8.
@1008. Have you tried setting the background colour as one of the options?
e.g. $(‘.myclass’).cornerz( {
‘radius’ : 12,
‘corners’ : ‘bl’,
‘background’ : ‘#000′
} )
I had the same problem as 1001 Fonts.
It won’t work well with a background..
Setting the color doesn’t work because the background is an image not just a color.
Guess I’ll have to wait. There’s not good solution for rounded corners on IE8 today.
I was able to get DD_Roundies working in IE8 without the 1 pixel issue occurring by commenting out lines 226 to 232 – the if statement starting with):
if (DD_roundies.IE8) {