Please also see grid960 – a grid overlay bookmarklet for 960.gs
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.
Why not convert this to a bookmarklet – seems like a perfect candidate so that anyone can plug it to their site on the fly to check it matches the grid.
You can easily toggle it via the bookmarklet too, but just checking for a particular id in the body.
Thanks, this looks pretty handy. I’ll second Remy’s suggestion of making it a bookmarklet, too.
- jason
Thanks for the feedback. A bookmarklet is on it’s way
Multumesc! (that means thank you very much, in Romanian :P )
[...] I’ve been trying out for the last little while, there’s a new jQuery plug-in called 960.gs grid overlay that does as the name implies — it overlays a semi-transparent 960 grid over your layout as [...]
[...] I saw a link on Twitter for a jQuery plugin written by badlyDrawnToy that allows you to toggle the grid overlay when using [...]
[...] 960.gs grid overlay – a jQuery plugin [...]
[...] basas tus diseños web en columnas utilizando el Framework de CSS 960.gs, 960.gs grid overlay, un plugin para jQuery puede resultarte bastante [...]
Hey! Looks neat, I have been working on a very similar project for two months now (check the link), just to let you know. :-)
[...] jQuery plug-in for the 960gs grid overlay [...]
1000 thanx
badlyDrawnToy,
most convenient tool for me!!
I love this. Need I say more? :)
I like this very much – thank you for making it available. I found what may be a bug. I was not able to implement the plugin, even though I followed the instructions to the letter. I ended up duplicating the demo and started from scratch, as the demo worked. Then, as I was marking up the demo.html I came across this behavior: within the container div I have a sidebar div. I gave the sidebar div an id of ‘sidebar’. So far, so good. However, when I gave that same div a class of ‘grid_4′, the grid no longer worked.
Perhaps this isn’t a bug and I am just unclear on the expected behavior. Any thoughts?
Daniel. Glad you like the plugin. Not sure if what you describe is a bug. The plugin simply overlays the grid. It will not affect your own grid classes. More likely you haven’t quite got your own markup correct. Hard for me to say without you showing me your code.
Thanks for the quick reply. Yes, the problem could very well be my markup. Would you mind taking a look? I have two simple Lorem Ipsum sites: one where the grid works (http://www.gridoveryes.newleafdata.com/demo.html) and one where it does not (http://www.gridoverno.newleafdata.com/demo.html). All the files (css, images, js) are the exact same as the demo downloaded here, though I changed the content in the html file. The only difference between the one that works and the one that does not work is an added a class: grid_4 to the sidebar div.
Any ideas why it doesn’t work here (http://www.gridoverno.newleafdata.com/demo.html)?
Thanks.
Daniel. I think the problem is that you have a 12 column container within which you only define a 4 column grid. You need to specify what happens with the other 8 columns e.g. make the content div 8 cols wide
also, lose the footer tags in the HTML
Good luck
Thanks Howie. I added grid_8 to the content div, but no luck on getting the grid to show. (I also removed the footer tags). Any other suggestions?