gridster-bootstrap's Introduction

gridster-bootstrap

An attempt to generate boostrap-based responsive layouts using gridster.js. Check out the demo.

#Set up

For the moment, we need underscore.js as a dependency. So you'll need to add that to your project.
```
	bower install underscore
```
Then simply include the gridster-bootstrap.js to your bootrap enabled project, and you're good to go.

#Usage

Initialise your gridster layout, do your magic, and serialise it like this:
```
var serialized = gridster.serialize();
```
Pass your serialized gridster layout to a new bsgridster object:
```
var bootstrapLayout = new bsgridster(serialized, unitHeight, boxClass);
```
As you can see, bsgridster constructor takes 3 arguments.
- serialized - your gridster serialzation from step 1.
- unitHeight (optional - defaults to 50) - a Number value depicting how tall a single box should be, in pixels.
- boxClass (optional) - a string for the name of a custom css that would be appended to all boxes.
Render the HTML for the layout
```
bootstrapLayout.getHtml();
```
Profit!

#Example

var b = new bsgridster(s, 50, 'graybox');
var v = b.getHtml();
document.getElementById('myContainer').innerHTML = v;

#Demo Feel free to git clone and play around in the demo directory.

#Contributions Please!

#TODOs

Remove underscore as a dependency.
Support all the screen sizes. (Currently only col-md is supported)
Better row utilization with nested gridster layouts
- Currently, the responsive layout collapsed will collapse row by row. In some cases, this might not be favorable.
- There might be limitations on gridster in achieving this.

Recommend Projects