About
This is a jQuery plugin that displays a visual layout grid. The horizontal layout grid is based on a 60px/24px grid, so it’s perfect for xy.css, and works great for other grid systems as well.
The script displays a toggle button in the top-right corner of the browser window. Designed for easy drop-in-anywhere functionality. If you can improve anything in the script, let me know. To see a live demo, click the “layout grid” button in the corner of the screen. Works great in all modern browsers (i.e., not old IE).
How to use
See the demo HTML file to see how it works and all fits together. Basically just make sure to include layout-grid.js in your document’s <head> section (or just before the closing </body> tag). See the jQuery code for some basic options and/or to modify grid/gutter increments. Includes base64-encoded background image for better performance and plug-n-playability.
Download
The download ZIP file contains the following files:
layout-grid.htmllayout-grid.jsxy.css