GriDesign (v0.1)

Test your web page design with GriDesign.

Author: Giovanni Manuel Toppi

Installation

Search GriDesign from the Google Chrome extensions manager and install it.

Once the extension is installed, be sure to activate it, writing in the address bar "chrome://extensions/" and searching for GriDesign.

Using

This extensions has two main buttons: Show/hide grid and config. When the extension is activated and you click on the Show/hide grid you will see a default grid. In order to add you personal grid you have to click on the config button. A drop area will appears. So, now it's time to create your personal grid.

Write and use a personal grid

To write a customized grid you have only to create a JSON file with a content like this and save it to the disk.

							
								{
									"backgroundColor": "rgba(200,100,100,0.5)",
									"displayOnInit": false,
									"cellWidth": 80,
									"cellHeight": 80,
									"gridWidth": 600,
									"gutter": 5
								}
							
						

backgroundColor
Specify a background color for your grid. Note that an alpha value should be used in order to see the page. The background value is not fundamental!
displayOnInit
If true the grid is showed immediately, otherwise you have to click on the Show/hide button.
cellWidth
It represents the width of a single cell of the grid (px)
cellHeight
It represents the height of a single cell of the grid (px)
gridWidth
It represents the width of the entire grid. If this parameter is not specified the grid will be the 100% of the page.
gutter
The space between a cell and another.

After you saved the file drag and drop it to the drop area and the grid will be activated.