1.0.1 • Published 8 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.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();
```
- Pass your serialized gridster layout to a new
bsgridster
object:
As you can see,var bootstrapLayout = new bsgridster(serialized, unitHeight, boxClass);
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.