grid-composer

A plugin for putting elements in a grid.

See the demo.

Installation

1. Make sure you have Node.js installed, or else download and install from nodejs.org

2. If you do not have Bower installed yet, run the following command and install it globally:

   npm install -g bower

3. Run the following commands in terminal to install gulp, it's plugins, external jQuery plugins and build the minified files:

   npm install

   bower install

   gulp

Now you are ready to code and make awesome tricks!

Documentation

Parameters

Name	Description	Default
dimension	Space that each square in the grid will occupy.	--
columns	Number of columns of the grid. May be passed as width as well.	--
lines	Number of lines of the grid. May be passed as height as well.	--
width	Width of the grid. Consider passing a value divisible by the dimension parameter.	--
height	Height of the grid. Consider passing a value divisible by the dimension parameter.	--
showGrid	Whether show a representative background grid or not.	true
components	Elements to be inserted into the grid. Parameters: Name Description id A Unique identifier. name A name for appering in the tooltip. elements An array containing which images should be put inside. Name Description image An URL to the image. css An object with CSS styles (optional). columns Number of columns that will occupy in the grid. lines Number of lines that will occupy in the grid. resize An array with the coordinates that will be resizable. overlay Whether it can be overlayed or not. immobile Whether it can be draggable or not. onDrop Callback for dropping the component into the grid. Return event and the current component as parameters to the function.	--