nadeesha / gridster-bootstrap

Gridster layouts in Bootstrap

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.

gridster-bootstrap's Issues

remove underscore

Hi,
Are you able to remove underscore as a dependency ?

Thank you :)

Vertical Free Rows Space

When gridster is set to :

shift_widgets_up: false, //sticky widgets (place anywhere)

We can create blank rows. When serializing via gridster-bootstrap these are ignored.

Divs overlap when resize

Gridster serialized output:

[{"col":1,"row":1,"size_x":1,"size_y":1},{"col":2,"row":1,"size_x":2,"size_y":2},{"col":1,"row":2,"size_x":1,"size_y":1},{"col":4,"row":2,"size_x":2,"size_y":1},{"col":4,"row":1,"size_x":1,"size_y":1}]

Checked the div positioning giving rgba for div background

.graybox {
background-color: rgba(12, 3, 140, 0.5);
border: 1px solid #FFFFFF;
}

Seems divs are overlaped when resizing (The div with "size_y":2 )

(the div with size_y: 2 height) .

Row

Hi,

could you please make an automatic growth ( with content) of element with class graybox ,

or if you have any idea how it could be done.

Thank you.

Add responsive layout support for mobile devices

At least the demo does not look like it is responsive.
Cheers,

Issue with content that is greater than the height of the cell

The construction of a bootstrap layout should allow for the cell content to grow without overlap with the cells below.

other than col-md?

This is awesome work, exactly what I'm looking for, but limiting it to only col-md doesn't really work for me.

Any time frame on improving this area?

Cheers, Tim