/gridster-bootstrap

Gridster layouts in Bootstrap

Primary LanguageJavaScriptApache License 2.0Apache-2.0

DEPERECATION NOTICE

This library is unsupported as of now. For a better alternative, please use Giridstack.js


gridster-bootstrap

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

#Set up

  1. For the moment, we need underscore.js as a dependency. So you'll need to add that to your project.

    	bower install underscore
  2. Then simply include the gridster-bootstrap.js to your bootrap enabled project, and you're good to go.

#Usage

  1. Initialise your gridster layout, do your magic, and serialise it like this:

    var serialized = gridster.serialize();
    
  2. 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.
  3. Render the HTML for the layout

    bootstrapLayout.getHtml();
  4. 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.