Gridsterized

HTML

<link rel="stylesheet" href="ttps://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.css">
<link rel="stylesheet" href="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.css" />
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
            <div class="header"></div>
            <div class="body">
                 <h2>With a text input:</h2>

                <input/>
            </div>
        </li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">
            <div class="header"></div>
            <div class="body">
                 <h2>With Iframe</h2>

                <iframe src="http://amtote.com" width="97%" height="85%"></iframe>
            </div>
        </li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
    </ul>
</div>
<script src="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.with-extras.js"></script>

CSS

.gridster {
    background-color: rgba(127, 127, 127, 1);
}
.red {
    background-color:rgba(127, 0, 0, .5);
}
.gridster li {
}
.gridster li.dragging {
    opacity: 0.8;
}
.gridster li:nth-child(20n + 1) {
    background: #1abc9c;
}
.gridster li:nth-child(20n + 2) {
    background: #16a085;
}
.gridster li:nth-child(20n + 3) {
    background: #2ecc71;
}
.gridster li:nth-child(20n + 4) {
    background: #27ae60;
}
.gridster li:nth-child(20n + 5) {
    background: #3498db;
}
.gridster li:nth-child(20n + 6) {
    background: #2980b9;
}
.gridster li:nth-child(20n + 7) {
    background: #9b59b6;
}
.gridster li:nth-child(20n + 8) {
    background: #8e44ad;
}
.gridster li:nth-child(20n + 9) {
    background: #34495e;
}
.gridster li:nth-child(20n + 10) {
    background: #2c3e50;
}
.gridster li:nth-child(20n + 11) {
    background: #f1c40f;
}
.gridster li:nth-child(20n + 12) {
    background: #f39c12;
}
.gridster li:nth-child(20n + 13) {
    background: #e67e22;
}
.gridster li:nth-child(20n + 14) {
    background: #d35400;
}
.gridster li:nth-child(20n + 15) {
    background: #e74c3c;
}
.gridster li:nth-child(20n + 16) {
    background: #c0392b;
}
.gridster li:nth-child(20n + 17) {
    background: #ecf0f1;
}
.gridster li:nth-child(20n + 18) {
    background: #bdc3c7;
}
.gridster li:nth-child(20n + 19) {
    background: #95a5a6;
}
.gridster li:nth-child(20n + 20) {
    background: #7f8c8d;
}
.gridster ul li .header {
    height: 15%;
}
.gridster ul li .body {
    background-color: rgba(127, 127, 127, .5);
    margin-left: auto;
    margin-right: auto;
    width: 98%;
    height: 85%;
}

JavaScript

/*
$(function(){ //DOM Ready
 
    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });
});
*/
var gridster;

$(function () {

    gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [200, 110],
        widget_margins: [5, 5],
        helper: 'clone',
        resize: {
            enabled: true,
            max_size: [4, 6]
        }
    }).data('gridster');


});