This library is unsupported as of now. For a better alternative, please use Giridstack.js
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 to50
) - aNumber
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.