1.0.1 • Published 10 years ago
gridster-bootstrap v1.0.1
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.
```bash
bower install underscore
```- Then simply include the
gridster-bootstrap.jsto 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();
```- Pass your serialized gridster layout to a new
bsgridsterobject:
As you can see,var bootstrapLayout = new bsgridster(serialized, unitHeight, boxClass);bsgridsterconstructor takes 3 arguments.serialized- your gridster serialzation from step 1.unitHeight(optional - defaults to50) - aNumbervalue 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-mdis 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.