What is the jQuery {css} designerGrid Plugin?

{css} designerGrid is A jQuery Plugin developed for website interface developers who use the grid system of layout. {css} designerGrid is intended to assist these developers with CSS prototyping.

The plugin is not a tool that will dynamically write any CSS, after all, how will we develop our CSS skills by doing that?

{css} designerGrid is implemented on this page, and can be toggled on and off at the bottom right hand corner...
jQuery {css}
designerGrid
Plugin
Example

The source code of this document can be explored to see a working implementation.

Features

The {css} designerGrid jQuery plugin enables a web designer to view their design work in a standard browser with rulers and grids. When the grid z-index is toggled to the front, the designer can click the grid to get the exact screen coordinates for that position enabling more precise positioning of elements on the screen.

Dependencies

The jQuery library
A browser that natively supports HTML 5's canvas element (*!IE: this is why {css} designerGrid will not work with IE browsers)

Version Releases

Version 1.7.5:  Friday 26 Febr.
Fixed: 'Columns are incorrectly centred' bug.

Download {css} designerGrid 1.7.5 minified
Download {css} designerGrid 1.7.5 full version

Version 1.7.0:  Tuesday 16th Febr. 2010
Added runtime control panel features and coordinate feedback system when grid z-index is toggled to top.

Version 1.6.0:  Monday 15th Febr. 2010
Correction to mathematical formulae bug in v 1.5.0.

Version 1.5.0:  Thursday 11th Febr. 2010
Code clean up, modularization and exposure of new overrideable options whilst removing redundant options. (Still not working in IE)

version 1.0:  Monday 8th Febr. 2010
Currently not working in IE, but working toward a solution.




Please login to the jQuery plugins page to report any bugs, request a feature or simply request support.
Implementation

Declare this inside a DOM ready() function, before the ending "<⁄head>" tag and after your reference to the jQuery library and the {css} designerGrid script e.g.:

type="text/javascript">
$(function()
{
    $(document).designerGrid();
});
</script>

How To Override The Defaults in Your Declaration

Here is an example where only some of the overrides are being overriden:

<script type="text/javascript">
$(function()
{
    $(document).designerGrid({
        colColor : '#eee',
        opacity : 0.6,
        colCount : 4,
        colWidth : 175,
        centred  : true,
        gutter    : 60
    });
});
</script>

Overridable Properties (v. 1.7.5)

Property Description
   
docWidth Width of document to emulate
docHeight Height of document to emulate
opacity Background canvas opacity (default = 0.75)
centred Centre the columns (default : true)
colCount Number of columns (default = 2)
colColor Color of positioning columns
colWidth Width of positioning columns
col_Z_index z-index of positioning columns (default = -9999)
grid_Z_index z-index of grid canvas (default = - 9999)
colHeight Height of positioning columns (default = document height)
gutter Column gutter measurement (default = 20px)
marginLeft Left margin (only used if centred = false)
marginTop Document top margin (default = 20px)