https://github.com/nadeesha/gridster-bootstrap

Gridster layouts in Bootstrap
https://github.com/nadeesha/gridster-bootstrap

Last synced: 4 days ago
JSON representation

Gridster layouts in Bootstrap

• Host: GitHub
• URL: https://github.com/nadeesha/gridster-bootstrap
• Owner: nadeesha
• License: apache-2.0
• Created: 2014-03-04T06:36:16.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-04-22T05:17:05.000Z (over 8 years ago)
• Last Synced: 2024-04-22T14:23:28.654Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 693 KB
• Stars: 58
• Watchers: 9
• Forks: 18
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# DEPERECATION NOTICE

This library is unsupported as of now. For a better alternative, please use [Giridstack.js](http://troolee.github.io/gridstack.js/)

---

gridster-bootstrap

==================

An attempt to generate boostrap-based responsive layouts using [gridster.js](https://github.com/ducksboard/gridster.js). Check out the [demo](https://rawgithub.com/ncthis/gridster-bootstrap/master/demo/index.html).

#Set up

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

    ```sh

    	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

	```js

	bootstrapLayout.getHtml();

	```

	

4. Profit!

#Example

```js

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.