GriDesign (v0.1)

Test your web page design with GriDesign.

Author: Giovanni Manuel Toppi


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.


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

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!
If true the grid is showed immediately, otherwise you have to click on the Show/hide button.
It represents the width of a single cell of the grid (px)
It represents the height of a single cell of the grid (px)
It represents the width of the entire grid. If this parameter is not specified the grid will be the 100% of the page.
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.