Ember-cli-gridster

This README outlines the details of collaborating on this Ember addon.

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Example

{{#gridster-grid grid=gridObj isEditing=isEditing width="1000"}}
        {{#each gridItems as |item|}}
        {{#gridster-item row=item.row col=item.col x=item.x y=item.y}}
          item
        {{/gridster-item}}
        {{/each}}
{{/gridster-grid}}

How to use

The main grid object

{{#gridster-grid grid=gridObj isEditing=isEditing width="1000"}}

grid

the grid property is the dom object that is set up on init you cab see all of the things that can be done with the gridster see: http://gridster.net/#usage for the useage.

isEditing

this is a property that will add the editing class to the main grid if set to true. this is useful to add a specific style to the gridster-items if set to true.

Ex.

div .editing ul li{
	-webkit-box-shadow: 0 7px 4px #777;
	-moz-box-shadow: 0 7px 4px #777;
	box-shadow: 0 7px 4px #777;
}

width

this is the property to set the width of the container. the container will be centered automatically.

item

the grid item

{{#gridster-item row=item.row col=item.col x=item.x y=item.y}}

row

the item's vertical position

col

the item's horizontal position

x

the item's width

y

the item's height