update demo site

fix demo index
update dist
2016-08-20 13:15:30 -07:00 · 2016-03-09 10:09:16 -08:00 · 2016-03-02 21:53:41 -08:00 · 2016-02-29 23:25:31 -08:00 · 2016-02-25 22:02:01 -08:00 · 2016-02-24 20:11:41 -08:00
31 changed files with 5379 additions and 464 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+node_modules
+bower_components
+coverage
--- a/22
+++ b/22
@ -1,22 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2014 Pavel Reznikov
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
--- a/README.md
+++ b/README.md
@ -1,4 +0,0 @@
-gridstack.js
-============
-
-gridstack.js is a jQuery plugin for widget layout
--- a/demo/anijs.html
+++ b/demo/anijs.html
@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>AniJS demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+    <link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>AniJS demo</h1>
+
+        <div>
+            <a class="btn btn-default" id="add-widget" href="#">Add Widget</a>
+        </div>
+
+        <div>
+            <h4>Widget added</h4>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs.js"></script>
+    <script type="text/javascript">
+        $(function () {
+            $('.grid-stack').gridstack();
+            var self = this;
+            this.grid = $('.grid-stack').data('gridstack');
+            $('.grid-stack').on('added', function(event, items) {
+                // add anijs data to gridstack item
+                for (var i = 0; i < items.length; i++) {
+                    $(items[i].el[0]).attr('data-anijs', 'if: added, do: swing animated, after: $removeAnimations, on: $gridstack');
+                }
+                AniJS.run();
+                self.gridstackNotifier = AniJS.getNotifier('gridstack');
+                // fire added event!
+                self.gridstackNotifier.dispatchEvent('added');
+            });
+            $('#add-widget').click(function() {
+                addNewWidget();
+            });
+
+            function addNewWidget() {
+                var grid = $('.grid-stack').data('gridstack');
+                grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), 0, 0, Math.floor(1 + 3 * Math.random()), Math.floor(1 + 3 * Math.random()), true);
+            }
+
+            var animationHelper = AniJS.getHelper();
+
+            //Defining removeAnimations to remove existing animations
+            animationHelper.removeAnimations = function(e, animationContext){
+                $('.grid-stack-item').attr('data-anijs', '');
+            };
+        });
+    </script>
+</body>
+</html>
--- a/demo/float.html
+++ b/demo/float.html
@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Float grid demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Float grid demo</h1>
+
+        <div>
+            <a class="btn btn-default" id="add-new-widget" href="#">Add Widget</a>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+                float: true
+            };
+            $('.grid-stack').gridstack(options);
+
+            new function () {
+                this.items = [
+                    {x: 0, y: 0, width: 2, height: 2},
+                    {x: 3, y: 1, width: 1, height: 2},
+                    {x: 4, y: 1, width: 1, height: 1},
+                    {x: 2, y: 3, width: 3, height: 1},
+//                    {x: 1, y: 4, width: 1, height: 1},
+//                    {x: 1, y: 3, width: 1, height: 1},
+//                    {x: 2, y: 4, width: 1, height: 1},
+                    {x: 2, y: 5, width: 1, height: 1}
+                ];
+
+                this.grid = $('.grid-stack').data('gridstack');
+
+                this.addNewWidget = function () {
+                    var node = this.items.pop() || {
+                                x: 12 * Math.random(),
+                                y: 5 * Math.random(),
+                                width: 1 + 3 * Math.random(),
+                                height: 1 + 3 * Math.random()
+                            };
+                    this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
+                        node.x, node.y, node.width, node.height);
+                    return false;
+                }.bind(this);
+
+                $('#add-new-widget').click(this.addNewWidget);
+            };
+        });
+    </script>
+</body>
+</html>
--- a/demo/index.html
+++ b/demo/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Demo</title>
+</head>
+<body>
+    <ul>
+        <li><a href="float.html">Float grid demo</a></li>
+        <li><a href="knockout.html">Knockout.js demo</a></li>
+        <li><a href="knockout2.html">Knockout.js demo (2)</a></li>
+        <li><a href="nested.html">Nested grids demo</a></li>
+        <li><a href="rtl.html">RTL demo</a></li>
+        <li><a href="serialization.html">Serialization demo</a></li>
+        <li><a href="two.html">Two grids demo</a></li>
+        <li><a href="responsive.html">Resize grid (responsive) demo</a></li>
+        <li><a href="anijs.html">AniJS demo</a></li>
+    </ul>
+</body>
+</html>
--- a/demo/knockout.html
+++ b/demo/knockout.html
@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Knockout.js demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>knockout.js Demo</h1>
+
+        <div>
+            <button data-bind="click: addNewWidget">Add new widget</button>
+        </div>
+
+        <br>
+
+        <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+    </div>
+
+
+    <script type="text/javascript">
+        ko.components.register('dashboard-grid', {
+            viewModel: {
+                createViewModel: function (controller, componentInfo) {
+                    var ViewModel = function (controller, componentInfo) {
+                        var grid = null;
+
+                        this.widgets = controller.widgets;
+
+                        this.afterAddWidget = function (items) {
+                            if (grid == null) {
+                                grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                                    auto: false
+                                }).data('gridstack');
+                            }
+
+                            var item = _.find(items, function (i) { return i.nodeType == 1 });
+                            grid.addWidget(item);
+                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
+                                grid.removeWidget(item);
+                            });
+                        };
+                    };
+
+                    return new ViewModel(controller, componentInfo);
+                }
+            },
+            template:
+                [
+                    '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
+                    '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
+                    '       <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
+                    '   </div>',
+                    '</div> '
+                ].join('')
+        });
+
+        $(function () {
+            var Controller = function (widgets) {
+                var self = this;
+
+                this.widgets = ko.observableArray(widgets);
+
+                this.addNewWidget = function () {
+                    this.widgets.push({
+                        x: 0,
+                        y: 0,
+                        width: Math.floor(1 + 3 * Math.random()),
+                        height: Math.floor(1 + 3 * Math.random()),
+                        auto_position: true
+                    });
+                    return false;
+                };
+
+                this.deleteWidget = function (item) {
+                    self.widgets.remove(item);
+                    return false;
+                };
+            };
+
+            var widgets = [
+                {x: 0, y: 0, width: 2, height: 2},
+                {x: 2, y: 0, width: 4, height: 2},
+                {x: 6, y: 0, width: 2, height: 4},
+                {x: 1, y: 2, width: 4, height: 2}
+            ];
+
+            var controller = new Controller(widgets);
+            ko.applyBindings(controller);
+        });
+    </script>
+</body>
+</html>
--- a/demo/knockout2.html
+++ b/demo/knockout2.html
@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Knockout.js demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>knockout.js Demo</h1>
+
+        <div>
+            <button data-bind="click: addNewWidget">Add new widget</button>
+        </div>
+
+        <br>
+
+        <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+    </div>
+
+
+    <script type="text/javascript">
+        ko.components.register('dashboard-grid', {
+            viewModel: {
+                createViewModel: function (controller, componentInfo) {
+                    var ViewModel = function (controller, componentInfo) {
+                        var grid = null;
+
+                        this.widgets = controller.widgets;
+
+                        this.afterAddWidget = function (items) {
+                            if (grid == null) {
+                                grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                                    auto: false
+                                }).data('gridstack');
+                            }
+
+                            var item = _.find(items, function (i) { return i.nodeType == 1 });
+                            grid.addWidget(item);
+                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
+                                grid.removeWidget(item);
+                            });
+                        };
+                    };
+
+                    return new ViewModel(controller, componentInfo);
+                }
+            },
+            template: { element: 'gridstack-template' }
+        });
+
+        $(function () {
+            var Controller = function (widgets) {
+                var self = this;
+
+                this.widgets = ko.observableArray(widgets);
+
+                this.addNewWidget = function () {
+                    this.widgets.push({
+                        x: 0,
+                        y: 0,
+                        width: Math.floor(1 + 3 * Math.random()),
+                        height: Math.floor(1 + 3 * Math.random()),
+                        auto_position: true
+                    });
+                    return false;
+                };
+
+                this.deleteWidget = function (item) {
+                    self.widgets.remove(item);
+                    return false;
+                };
+            };
+
+            var widgets = [
+                {x: 0, y: 0, width: 2, height: 2},
+                {x: 2, y: 0, width: 4, height: 2},
+                {x: 6, y: 0, width: 2, height: 4},
+                {x: 1, y: 2, width: 4, height: 2}
+            ];
+
+            var controller = new Controller(widgets);
+            ko.applyBindings(controller);
+        });
+    </script>
+
+    <template id="gridstack-template">
+        <div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
+           <div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
+               <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>
+           </div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->
+    </template>
+</body>
+</html>
--- a/demo/nested.html
+++ b/demo/nested.html
@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Nested grids demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+
+        .grid-stack .grid-stack {
+            /*margin: 0 -10px;*/
+            background: rgba(255, 255, 255, 0.3);
+        }
+
+        .grid-stack .grid-stack .grid-stack-item-content {
+            background: lightpink;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Nested grids demo</h1>
+
+        <div class="grid-stack">
+            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
+                <div class="grid-stack-item-content">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
+                </div>
+            </div>
+            <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
+                <div class="grid-stack-item-content">
+
+                        <div class="grid-stack">
+                            <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
+                            <div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
+                            <div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
+                            <div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
+
+                            <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
+                            <div class="grid-stack-item" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
+                        </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+            };
+            $('.grid-stack').gridstack(options);
+        });
+    </script>
+</body>
+</html>
--- a/demo/responsive.html
+++ b/demo/responsive.html
@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Responsive grid demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+    <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="device-xs visible-xs"></div>
+    <div class="device-sm visible-sm"></div>
+    <div class="device-md visible-md"></div>
+    <div class="device-lg visible-lg"></div>
+    <div class="device-xl visible-xl"></div>
+    <div class="container-fluid">
+        <h1>Responsive grid demo</h1>
+
+        <div>
+            <span>Number of Columns:</span> <span id="grid-size"></span>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            // thanks to http://stackoverflow.com/a/22885503
+            var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="I am a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
+            var fullDateString = new Date();
+            function isBreakpoint(alias) {
+                return $('.device-' + alias).is(':visible');
+            }
+
+
+            var options = {
+                float: false
+            };
+            $('.grid-stack').gridstack(options);
+            function resizeGrid() {
+                var grid = $('.grid-stack').data('gridstack');
+                if (isBreakpoint('xs')) {
+                    $('#grid-size').text('One column mode');
+                } else if (isBreakpoint('sm')) {
+                    grid.setGridWidth(3);
+                    $('#grid-size').text(3);
+                } else if (isBreakpoint('md')) {
+                    grid.setGridWidth(6);
+                    $('#grid-size').text(6);
+                } else if (isBreakpoint('lg')) {
+                    grid.setGridWidth(12);
+                    $('#grid-size').text(12);
+                }
+            };
+            $(window).resize(function () {
+                waitForFinalEvent(function() {
+                    resizeGrid();
+                }, 300, fullDateString.getTime());
+            });
+
+            new function () {
+                this.serializedData = [
+                    {x: 0, y: 0, width: 4, height: 2},
+                    {x: 3, y: 1, width: 4, height: 2},
+                    {x: 4, y: 1, width: 4, height: 1},
+                    {x: 2, y: 3, width: 8, height: 1},
+                    {x: 0, y: 4, width: 4, height: 1},
+                    {x: 0, y: 3, width: 4, height: 1},
+                    {x: 2, y: 4, width: 4, height: 1},
+                    {x: 2, y: 5, width: 4, height: 1},
+                    {x: 0, y: 6, width: 12, height: 1}
+                ];
+
+                this.grid = $('.grid-stack').data('gridstack');
+
+                this.loadGrid = function () {
+                    this.grid.removeAll();
+                    var items = GridStackUI.Utils.sort(this.serializedData);
+                    _.each(items, function (node, i) {
+                        this.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'),
+                            node.x, node.y, node.width, node.height);
+                    }, this);
+                    return false;
+                }.bind(this);
+
+                this.loadGrid();
+                resizeGrid();
+            };
+        });
+    </script>
+    </script>
+</body>
+</html>
--- a/demo/rtl.html
+++ b/demo/rtl.html
@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en" dir="rtl">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>RTL demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>RTL Demo</h1>
+
+        <div>
+            <button data-bind="click: addNewWidget">Add new widget</button>
+        </div>
+
+        <br>
+
+        <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
+    </div>
+
+
+    <script type="text/javascript">
+        ko.components.register('dashboard-grid', {
+            viewModel: {
+                createViewModel: function (controller, componentInfo) {
+                    var ViewModel = function (controller, componentInfo) {
+                        var grid = null;
+
+                        this.widgets = controller.widgets;
+
+                        this.afterAddWidget = function (items) {
+                            if (grid == null) {
+                                grid = $(componentInfo.element).find('.grid-stack').gridstack({
+                                    auto: false
+                                }).data('gridstack');
+                            }
+
+                            var item = _.find(items, function (i) { return i.nodeType == 1 });
+                            grid.addWidget(item);
+                            ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
+                                grid.removeWidget(item);
+                            });
+                        };
+                    };
+
+                    return new ViewModel(controller, componentInfo);
+                }
+            },
+            template:
+                [
+                    '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
+                    '   <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
+                    '       <div class="grid-stack-item-content"><center><button data-bind="click: $root.deleteWidget">Delete me</button><br><h5 data-bind="text: index" /></center><br><p>lorem ipsum</p></div>',
+                    '   </div>',
+                    '</div> '
+                ].join('')
+        });
+
+        $(function () {
+            var Controller = function (widgets) {
+                var self = this;
+
+                this.widgets = ko.observableArray(widgets);
+
+                this.addNewWidget = function () {
+                    this.widgets.push({
+                        x: 0,
+                        y: 0,
+                        width: Math.floor(1 + 3 * Math.random()),
+                        height: Math.floor(1 + 3 * Math.random()),
+                        auto_position: true
+                    });
+                    return false;
+                };
+
+                this.deleteWidget = function (item) {
+                    self.widgets.remove(item);
+                    return false;
+                };
+            };
+
+            var widgets = [
+                {x: 0, y: 0, width: 2, height: 2, index: 1},
+                {x: 2, y: 0, width: 4, height: 2, index: 2},
+                {x: 6, y: 0, width: 2, height: 4, index: 3},
+                {x: 1, y: 2, width: 4, height: 2, index: 4}
+            ];
+
+            var controller = new Controller(widgets);
+            ko.applyBindings(controller);
+        });
+    </script>
+</body>
+</html>
--- a/demo/serialization.html
+++ b/demo/serialization.html
@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Serialization demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        .grid-stack {
+            background: lightgoldenrodyellow;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Serialization demo</h1>
+
+        <div>
+            <a class="btn btn-default" id="save-grid" href="#">Save Grid</a>
+            <a class="btn btn-default" id="load-grid" href="#">Load Grid</a>
+            <a class="btn btn-default" id="clear-grid" href="#">Clear Grid</a>
+        </div>
+
+        <br/>
+
+        <div class="grid-stack">
+        </div>
+
+        <hr/>
+
+        <textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+            };
+            $('.grid-stack').gridstack(options);
+
+            new function () {
+                this.serializedData = [
+                    {x: 0, y: 0, width: 2, height: 2},
+                    {x: 3, y: 1, width: 1, height: 2},
+                    {x: 4, y: 1, width: 1, height: 1},
+                    {x: 2, y: 3, width: 3, height: 1},
+                    {x: 1, y: 4, width: 1, height: 1},
+                    {x: 1, y: 3, width: 1, height: 1},
+                    {x: 2, y: 4, width: 1, height: 1},
+                    {x: 2, y: 5, width: 1, height: 1}
+                ];
+
+                this.grid = $('.grid-stack').data('gridstack');
+
+                this.loadGrid = function () {
+                    this.grid.removeAll();
+                    var items = GridStackUI.Utils.sort(this.serializedData);
+                    _.each(items, function (node) {
+                        this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
+                            node.x, node.y, node.width, node.height);
+                    }, this);
+                    return false;
+                }.bind(this);
+
+                this.saveGrid = function () {
+                    this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
+                        el = $(el);
+                        var node = el.data('_gridstack_node');
+                        return {
+                            x: node.x,
+                            y: node.y,
+                            width: node.width,
+                            height: node.height
+                        };
+                    }, this);
+                    $('#saved-data').val(JSON.stringify(this.serializedData, null, '    '));
+                    return false;
+                }.bind(this);
+
+                this.clearGrid = function () {
+                    this.grid.removeAll();
+                    return false;
+                }.bind(this);
+
+                $('#save-grid').click(this.saveGrid);
+                $('#load-grid').click(this.loadGrid);
+                $('#clear-grid').click(this.clearGrid);
+
+                this.loadGrid();
+            };
+        });
+    </script>
+</body>
+</html>
--- a/demo/two.html
+++ b/demo/two.html
@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Two grids demo</title>
+
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../dist/gridstack.css"/>
+    <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+    <script src="../dist/gridstack.js"></script>
+    <script src="../dist/gridstack.jQueryUI.js"></script>
+
+    <style type="text/css">
+        #grid1 {
+            background: lightgoldenrodyellow;
+        }
+
+        #grid2 {
+            background: lightcyan;
+        }
+
+        .grid-stack-item-content {
+            color: #2c3e50;
+            text-align: center;
+            background-color: #18bc9c;
+        }
+
+        #grid2 .grid-stack-item-content {
+            background-color: #9caabc;
+        }
+
+        .grid-stack-item-removing {
+            opacity: 0.5;
+        }
+
+        .trash {
+            height: 150px;
+            margin-bottom: 20px;
+            background: rgba(255, 0, 0, 0.1) center center url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
+        }
+
+        .sidebar {
+            background: rgba(0, 255, 0, 0.1);
+            height: 150px;
+            padding: 25px 0;
+            text-align: center;
+        }
+
+        .sidebar .grid-stack-item {
+            width: 200px;
+            height: 100px;
+            border: 2px dashed green;
+            text-align: center;
+            line-height: 100px;
+            z-index: 10;
+            background: rgba(0, 255, 0, 0.1);
+            cursor: default;
+            display: inline-block;
+        }
+
+        .sidebar .grid-stack-item .grid-stack-item-content {
+            background: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="container-fluid">
+        <h1>Two grids demo</h1>
+
+        <div class="row">
+            <div class="col-md-3">
+                <div class="sidebar">
+                    <div class="grid-stack-item"><div class="grid-stack-item-content">Drag me</div></div>
+                </div>
+            </div>
+            <div class="col-md-9">
+                <div class="trash">
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div class="grid-stack grid-stack-6" id="grid1">
+                </div>
+            </div>
+            <div class="col-md-6">
+                <div class="grid-stack grid-stack-6" id="grid2">
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <script type="text/javascript">
+        $(function () {
+            var options = {
+                width: 6,
+                float: false,
+                removable: '.trash',
+                removeTimeout: 100,
+                acceptWidgets: '.grid-stack-item'
+            };
+            $('#grid1').gridstack(options);
+            $('#grid2').gridstack(_.defaults({
+                float: true
+            }, options));
+
+            var items = [
+                {x: 0, y: 0, width: 2, height: 2},
+                {x: 3, y: 1, width: 1, height: 2},
+                {x: 4, y: 1, width: 1, height: 1},
+                {x: 2, y: 3, width: 3, height: 1},
+                {x: 2, y: 5, width: 1, height: 1}
+            ];
+
+            $('.grid-stack').each(function () {
+                var grid = $(this).data('gridstack');
+
+                _.each(items, function (node) {
+                    grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
+                        node.x, node.y, node.width, node.height);
+                }, this);
+            });
+
+            $('.sidebar .grid-stack-item').draggable({
+                revert: 'invalid',
+                handle: '.grid-stack-item-content',
+                scroll: false,
+                appendTo: 'body'
+            });
+        });
+    </script>
+</body>
+</html>
--- a/dist/gridstack-extra.css
+++ b/dist/gridstack-extra.css
--- a/dist/gridstack-extra.min.css
+++ b/dist/gridstack-extra.min.css
--- a/dist/gridstack.all.js
+++ b/dist/gridstack.all.js
--- a/dist/gridstack.css
+++ b/dist/gridstack.css
@ -0,0 +1,387 @@
+:root .grid-stack-item > .ui-resizable-handle {
+  filter: none;
+}
+
+.grid-stack {
+  position: relative;
+}
+
+.grid-stack.grid-stack-rtl {
+  direction: ltr;
+}
+
+.grid-stack.grid-stack-rtl > .grid-stack-item {
+  direction: rtl;
+}
+
+.grid-stack .grid-stack-placeholder > .placeholder-content {
+  border: 1px dashed lightgray;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  width: auto;
+  z-index: 0 !important;
+  text-align: center;
+}
+
+.grid-stack > .grid-stack-item {
+  min-width: 8.3333333333%;
+  position: absolute;
+  padding: 0;
+}
+
+.grid-stack > .grid-stack-item > .grid-stack-item-content {
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 10px;
+  right: 10px;
+  bottom: 0;
+  width: auto;
+  z-index: 0 !important;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-handle {
+  position: absolute;
+  font-size: 0.1px;
+  display: block;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+
+.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
+.grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
+  display: none;
+}
+
+.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
+  z-index: 100;
+}
+
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
+.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
+  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
+  opacity: 0.8;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-se,
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
+  background-repeat: no-repeat;
+  background-position: center;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-se {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-nw {
+  cursor: nw-resize;
+  width: 20px;
+  height: 20px;
+  left: 10px;
+  top: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-n {
+  cursor: n-resize;
+  height: 10px;
+  top: 0;
+  left: 25px;
+  right: 25px;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-ne {
+  cursor: ne-resize;
+  width: 20px;
+  height: 20px;
+  right: 10px;
+  top: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-e {
+  cursor: e-resize;
+  width: 10px;
+  right: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-se {
+  cursor: se-resize;
+  width: 20px;
+  height: 20px;
+  right: 10px;
+  bottom: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-s {
+  cursor: s-resize;
+  height: 10px;
+  left: 25px;
+  bottom: 0;
+  right: 25px;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-sw {
+  cursor: sw-resize;
+  width: 20px;
+  height: 20px;
+  left: 10px;
+  bottom: 0;
+}
+
+.grid-stack > .grid-stack-item > .ui-resizable-w {
+  cursor: w-resize;
+  width: 10px;
+  left: 10px;
+  top: 15px;
+  bottom: 15px;
+}
+
+.grid-stack > .grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {
+  display: none !important;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='1'] {
+  width: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='1'] {
+  left: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='1'] {
+  min-width: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='1'] {
+  max-width: 8.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='2'] {
+  width: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='2'] {
+  left: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='2'] {
+  min-width: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='2'] {
+  max-width: 16.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='3'] {
+  width: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='3'] {
+  left: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='3'] {
+  min-width: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='3'] {
+  max-width: 25%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='4'] {
+  width: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='4'] {
+  left: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='4'] {
+  min-width: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='4'] {
+  max-width: 33.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='5'] {
+  width: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='5'] {
+  left: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='5'] {
+  min-width: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='5'] {
+  max-width: 41.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='6'] {
+  width: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='6'] {
+  left: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='6'] {
+  min-width: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='6'] {
+  max-width: 50%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='7'] {
+  width: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='7'] {
+  left: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='7'] {
+  min-width: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='7'] {
+  max-width: 58.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='8'] {
+  width: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='8'] {
+  left: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='8'] {
+  min-width: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='8'] {
+  max-width: 66.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='9'] {
+  width: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='9'] {
+  left: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='9'] {
+  min-width: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='9'] {
+  max-width: 75%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='10'] {
+  width: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='10'] {
+  left: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='10'] {
+  min-width: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='10'] {
+  max-width: 83.3333333333%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='11'] {
+  width: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='11'] {
+  left: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='11'] {
+  min-width: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='11'] {
+  max-width: 91.6666666667%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-width='12'] {
+  width: 100%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-x='12'] {
+  left: 100%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-min-width='12'] {
+  min-width: 100%;
+}
+
+.grid-stack > .grid-stack-item[data-gs-max-width='12'] {
+  max-width: 100%;
+}
+
+.grid-stack.grid-stack-animate,
+.grid-stack.grid-stack-animate .grid-stack-item {
+  -webkit-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -moz-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -ms-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  -o-transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;
+}
+
+.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
+.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
+.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder {
+  -webkit-transition: left 0s, top 0s, height 0s, width 0s;
+  -moz-transition: left 0s, top 0s, height 0s, width 0s;
+  -ms-transition: left 0s, top 0s, height 0s, width 0s;
+  -o-transition: left 0s, top 0s, height 0s, width 0s;
+  transition: left 0s, top 0s, height 0s, width 0s;
+}
+
+.grid-stack.grid-stack-one-column-mode {
+  height: auto !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item {
+  position: relative !important;
+  width: auto !important;
+  left: 0 !important;
+  top: auto !important;
+  margin-bottom: 20px;
+  max-width: none !important;
+}
+
+.grid-stack.grid-stack-one-column-mode > .grid-stack-item > .ui-resizable-handle {
+  display: none;
+}
--- a/dist/gridstack.jQueryUI.js
+++ b/dist/gridstack.jQueryUI.js
@ -0,0 +1,13 @@
+/**
+ * gridstack.js 0.2.7-dev
+ * http://troolee.github.io/gridstack.js/
+ * (c) 2014-2016 Pavel Reznikov, Dylan Weiss
+ * gridstack.js may be freely distributed under the MIT license.
+ * @preserve
+*/
+!function(a){if("function"==typeof define&&define.amd)define(["jquery","lodash","gridstack","jquery-ui/data","jquery-ui/disable-selection","jquery-ui/focusable","jquery-ui/form","jquery-ui/ie","jquery-ui/keycode","jquery-ui/labels","jquery-ui/jquery-1-7","jquery-ui/plugin","jquery-ui/safe-active-element","jquery-ui/safe-blur","jquery-ui/scroll-parent","jquery-ui/tabbable","jquery-ui/unique-id","jquery-ui/version","jquery-ui/widget","jquery-ui/widgets/mouse","jquery-ui/widgets/draggable","jquery-ui/widgets/droppable","jquery-ui/widgets/resizable"],a);else if("undefined"!=typeof exports){try{jQuery=require("jquery")}catch(a){}try{_=require("lodash")}catch(a){}try{GridStackUI=require("gridstack")}catch(a){}a(jQuery,_,GridStackUI)}else a(jQuery,_,GridStackUI)}(function(a,b,c){/**
+    * @class JQueryUIGridStackDragDropPlugin
+    * jQuery UI implementation of drag'n'drop gridstack plugin.
+    */
+function d(a){c.GridStackDragDropPlugin.call(this,a)}window;return c.GridStackDragDropPlugin.registerPlugin(d),d.prototype=Object.create(c.GridStackDragDropPlugin.prototype),d.prototype.constructor=d,d.prototype.resizable=function(c,d){if(c=a(c),"disable"===d||"enable"===d)c.resizable(d);else if("option"===d){var e=arguments[2],f=arguments[3];c.resizable(d,e,f)}else c.resizable(b.extend({},this.grid.opts.resizable,{start:d.start||function(){},stop:d.stop||function(){},resize:d.resize||function(){}}));return this},d.prototype.draggable=function(c,d){return c=a(c),"disable"===d||"enable"===d?c.draggable(d):c.draggable(b.extend({},this.grid.opts.draggable,{containment:this.grid.opts.isNested?this.grid.container.parent():null,start:d.start||function(){},stop:d.stop||function(){},drag:d.drag||function(){}})),this},d.prototype.droppable=function(b,c){return b=a(b),"disable"===c||"enable"===c?b.droppable(c):b.droppable({accept:c.accept}),this},d.prototype.isDroppable=function(b,c){return b=a(b),Boolean(b.data("droppable"))},d.prototype.on=function(b,c,d){return a(b).on(c,d),this},d});
+//# sourceMappingURL=gridstack.min.map
--- a/dist/gridstack.js
+++ b/dist/gridstack.js
--- a/dist/gridstack.min.css
+++ b/dist/gridstack.min.css
--- a/dist/gridstack.min.js
+++ b/dist/gridstack.min.js
--- a/dist/gridstack.min.map
+++ b/dist/gridstack.min.map
--- a/freelancer/css/freelancer.css
+++ b/freelancer/css/freelancer.css
@ -0,0 +1,445 @@
+/*!
+ * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+body {
+    overflow-x: hidden;
+}
+
+p {
+    font-size: 20px;
+}
+
+p.small {
+    font-size: 16px;
+}
+
+a,
+a:hover,
+a:focus,
+a:active,
+a.active {
+    outline: 0;
+    color: #18bc9c;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-transform: uppercase;
+    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-weight: 700;
+}
+
+hr.star-light,
+hr.star-primary {
+    margin: 25px auto 30px;
+    padding: 0;
+    max-width: 250px;
+    border: 0;
+    border-top: solid 5px;
+    text-align: center;
+}
+
+hr.star-light:after,
+hr.star-primary:after {
+    content: "\f005";
+    display: inline-block;
+    position: relative;
+    top: -.8em;
+    padding: 0 .25em;
+    font-family: FontAwesome;
+    font-size: 2em;
+}
+
+hr.star-light {
+    border-color: #fff;
+}
+
+hr.star-light:after {
+    color: #fff;
+    background-color: #18bc9c;
+}
+
+hr.star-primary {
+    border-color: #2c3e50;
+}
+
+hr.star-primary:after {
+    color: #2c3e50;
+    background-color: #fff;
+}
+
+.img-centered {
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    color: #fff;
+    background: #18bc9c;
+}
+
+header .container {
+    padding-top: 100px;
+    padding-bottom: 50px;
+}
+
+header img {
+    display: block;
+    margin: 0 auto 20px;
+}
+
+header .intro-text .name {
+    display: block;
+    text-transform: uppercase;
+    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 2em;
+    font-weight: 700;
+}
+
+header .intro-text .skills {
+    font-size: 1.25em;
+    font-weight: 300;
+}
+
+@media(min-width:768px) {
+    header .container {
+        padding-top: 200px;
+        padding-bottom: 100px;
+    }
+
+    header .intro-text .name {
+        font-size: 4.75em;
+    }
+
+    header .intro-text .skills {
+        font-size: 1.75em;
+    }
+}
+
+@media(min-width:768px) {
+    .navbar-fixed-top {
+        padding: 25px 0;
+        -webkit-transition: padding .3s;
+        -moz-transition: padding .3s;
+        transition: padding .3s;
+    }
+
+    .navbar-fixed-top .navbar-brand {
+        font-size: 2em;
+        -webkit-transition: all .3s;
+        -moz-transition: all .3s;
+        transition: all .3s;
+    }
+
+    .navbar-fixed-top.navbar-shrink {
+        padding: 10px 0;
+    }
+
+    .navbar-fixed-top.navbar-shrink .navbar-brand {
+        font-size: 1.5em;
+    }
+}
+
+.navbar {
+    text-transform: uppercase;
+    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-weight: 700;
+}
+
+.navbar a:focus {
+    outline: 0;
+}
+
+.navbar .navbar-nav {
+    letter-spacing: 1px;
+}
+
+.navbar .navbar-nav li a:focus {
+    outline: 0;
+}
+
+.navbar-default,
+.navbar-inverse {
+    border: 0;
+}
+
+section {
+    padding: 100px 0;
+}
+
+section h2 {
+    margin: 0;
+    font-size: 3em;
+}
+
+section.success {
+    color: #fff;
+    background: #18bc9c;
+}
+
+@media(max-width:767px) {
+    section {
+        padding: 75px 0;
+    }
+
+    section.first {
+        padding-top: 75px;
+    }
+}
+
+#portfolio .portfolio-item {
+    right: 0;
+    margin: 0 0 15px;
+}
+
+#portfolio .portfolio-item .portfolio-link {
+    display: block;
+    position: relative;
+    margin: 0 auto;
+    max-width: 400px;
+}
+
+#portfolio .portfolio-item .portfolio-link .caption {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background: rgba(24,188,156,.9);
+    -webkit-transition: all ease .5s;
+    -moz-transition: all ease .5s;
+    transition: all ease .5s;
+}
+
+#portfolio .portfolio-item .portfolio-link .caption:hover {
+    opacity: 1;
+}
+
+#portfolio .portfolio-item .portfolio-link .caption .caption-content {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    height: 20px;
+    margin-top: -12px;
+    text-align: center;
+    font-size: 20px;
+    color: #fff;
+}
+
+#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
+    margin-top: -12px;
+}
+
+#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
+#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
+    margin: 0;
+}
+
+#portfolio * {
+    z-index: 2;
+}
+
+@media(min-width:767px) {
+    #portfolio .portfolio-item {
+        margin: 0 0 30px;
+    }
+}
+
+.btn-outline {
+    margin-top: 15px;
+    border: solid 2px #fff;
+    font-size: 20px;
+    color: #fff;
+    background: 0 0;
+    transition: all .3s ease-in-out;
+}
+
+.btn-outline:hover,
+.btn-outline:focus,
+.btn-outline:active,
+.btn-outline.active {
+    border: solid 2px #fff;
+    color: #18bc9c;
+    background: #fff;
+}
+
+.floating-label-form-group {
+    position: relative;
+    margin-bottom: 0;
+    padding-bottom: .5em;
+    border-bottom: 1px solid #eee;
+}
+
+.floating-label-form-group input,
+.floating-label-form-group textarea {
+    z-index: 1;
+    position: relative;
+    padding-right: 0;
+    padding-left: 0;
+    border: 0;
+    border-radius: 0;
+    font-size: 1.5em;
+    background: 0 0;
+    box-shadow: none!important;
+    resize: none;
+}
+
+.floating-label-form-group label {
+    display: block;
+    z-index: 0;
+    position: relative;
+    top: 2em;
+    margin: 0;
+    font-size: .85em;
+    line-height: 1.764705882em;
+    vertical-align: middle;
+    vertical-align: baseline;
+    opacity: 0;
+    -webkit-transition: top .3s ease,opacity .3s ease;
+    -moz-transition: top .3s ease,opacity .3s ease;
+    -ms-transition: top .3s ease,opacity .3s ease;
+    transition: top .3s ease,opacity .3s ease;
+}
+
+.floating-label-form-group::not(:first-child) {
+    padding-left: 14px;
+    border-left: 1px solid #eee;
+}
+
+.floating-label-form-group-with-value label {
+    top: 0;
+    opacity: 1;
+}
+
+.floating-label-form-group-with-focus label {
+    color: #18bc9c;
+}
+
+form .row:first-child .floating-label-form-group {
+    border-top: 1px solid #eee;
+}
+
+footer {
+    color: #fff;
+}
+
+footer h3 {
+    margin-bottom: 30px;
+}
+
+footer .footer-above {
+    padding-top: 50px;
+    background-color: #2c3e50;
+}
+
+footer .footer-col {
+    margin-bottom: 50px;
+}
+
+footer .footer-below {
+    padding: 25px 0;
+    background-color: #233140;
+}
+
+.btn-social {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    border: 2px solid #fff;
+    border-radius: 100%;
+    text-align: center;
+    font-size: 20px;
+    line-height: 45px;
+}
+
+.btn:focus,
+.btn:active,
+.btn.active {
+    outline: 0;
+}
+
+.scroll-top {
+    z-index: 1049;
+    position: fixed;
+    right: 2%;
+    bottom: 2%;
+    width: 50px;
+    height: 50px;
+}
+
+.scroll-top .btn {
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    font-size: 20px;
+    line-height: 28px;
+}
+
+.scroll-top .btn:focus {
+    outline: 0;
+}
+
+.portfolio-modal .modal-content {
+    padding: 100px 0;
+    min-height: 100%;
+    border: 0;
+    border-radius: 0;
+    text-align: center;
+    background-clip: border-box;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.portfolio-modal .modal-content h2 {
+    margin: 0;
+    font-size: 3em;
+}
+
+.portfolio-modal .modal-content img {
+    margin-bottom: 30px;
+}
+
+.portfolio-modal .modal-content .item-details {
+    margin: 30px 0;
+}
+
+.portfolio-modal .close-modal {
+    position: absolute;
+    top: 25px;
+    right: 25px;
+    width: 75px;
+    height: 75px;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+.portfolio-modal .close-modal:hover {
+    opacity: .3;
+}
+
+.portfolio-modal .close-modal .lr {
+    z-index: 1051;
+    width: 1px;
+    height: 75px;
+    margin-left: 35px;
+    background-color: #2c3e50;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.portfolio-modal .close-modal .lr .rl {
+    z-index: 1052;
+    width: 1px;
+    height: 75px;
+    background-color: #2c3e50;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
--- a/freelancer/js/cbpAnimatedHeader.js
+++ b/freelancer/js/cbpAnimatedHeader.js
@ -0,0 +1,44 @@
+/**
+ * cbpAnimatedHeader.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2013, Codrops
+ * http://www.codrops.com
+ */
+var cbpAnimatedHeader = (function() {
+
+	var docElem = document.documentElement,
+		header = document.querySelector( '.navbar-fixed-top' ),
+		didScroll = false,
+		changeHeaderOn = 300;
+
+	function init() {
+		window.addEventListener( 'scroll', function( event ) {
+			if( !didScroll ) {
+				didScroll = true;
+				setTimeout( scrollPage, 250 );
+			}
+		}, false );
+	}
+
+	function scrollPage() {
+		var sy = scrollY();
+		if ( sy >= changeHeaderOn ) {
+			classie.add( header, 'navbar-shrink' );
+		}
+		else {
+			classie.remove( header, 'navbar-shrink' );
+		}
+		didScroll = false;
+	}
+
+	function scrollY() {
+		return window.pageYOffset || docElem.scrollTop;
+	}
+
+	init();
+
+})();
--- a/freelancer/js/cbpAnimatedHeader.min.js
+++ b/freelancer/js/cbpAnimatedHeader.min.js
@ -0,0 +1,11 @@
+/**
+ * cbpAnimatedHeader.min.js v1.0.0
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2013, Codrops
+ * http://www.codrops.com
+ */
+var cbpAnimatedHeader=(function(){var b=document.documentElement,g=document.querySelector(".cbp-af-header"),e=false,a=300;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"cbp-af-header-shrink")}else{classie.remove(g,"cbp-af-header-shrink")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();
--- a/freelancer/js/classie.js
+++ b/freelancer/js/classie.js
@ -0,0 +1,80 @@
+/*!
+ * classie - class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ * 
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true */
+/*global define: false */
+
+( function( window ) {
+
+'use strict';
+
+// class helper functions from bonzo https://github.com/ded/bonzo
+
+function classReg( className ) {
+  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+}
+
+// classList support for class management
+// altho to be fair, the api sucks because it won't accept multiple classes at once
+var hasClass, addClass, removeClass;
+
+if ( 'classList' in document.documentElement ) {
+  hasClass = function( elem, c ) {
+    return elem.classList.contains( c );
+  };
+  addClass = function( elem, c ) {
+    elem.classList.add( c );
+  };
+  removeClass = function( elem, c ) {
+    elem.classList.remove( c );
+  };
+}
+else {
+  hasClass = function( elem, c ) {
+    return classReg( c ).test( elem.className );
+  };
+  addClass = function( elem, c ) {
+    if ( !hasClass( elem, c ) ) {
+      elem.className = elem.className + ' ' + c;
+    }
+  };
+  removeClass = function( elem, c ) {
+    elem.className = elem.className.replace( classReg( c ), ' ' );
+  };
+}
+
+function toggleClass( elem, c ) {
+  var fn = hasClass( elem, c ) ? removeClass : addClass;
+  fn( elem, c );
+}
+
+var classie = {
+  // full names
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  // short names
+  has: hasClass,
+  add: addClass,
+  remove: removeClass,
+  toggle: toggleClass
+};
+
+// transport
+if ( typeof define === 'function' && define.amd ) {
+  // AMD
+  define( classie );
+} else {
+  // browser global
+  window.classie = classie;
+}
+
+})( window );
--- a/freelancer/js/freelancer.js
+++ b/freelancer/js/freelancer.js
@ -0,0 +1,37 @@
+/*!
+ * Start Bootstrap - Freelancer Bootstrap Theme (http://startbootstrap.com)
+ * Code licensed under the Apache License v2.0.
+ * For details, see http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+// jQuery for page scrolling feature - requires jQuery Easing plugin
+$(function() {
+    $('.page-scroll a').bind('click', function(event) {
+        var $anchor = $(this);
+        $('html, body').stop().animate({
+            scrollTop: $($anchor.attr('href')).offset().top
+        }, 1500, 'easeInOutExpo');
+        event.preventDefault();
+    });
+});
+
+// Floating label headings for the contact form
+$(function() {
+    $("body").on("input propertychange", ".floating-label-form-group", function(e) {
+        $(this).toggleClass("floating-label-form-group-with-value", !! $(e.target).val());
+    }).on("focus", ".floating-label-form-group", function() {
+        $(this).addClass("floating-label-form-group-with-focus");
+    }).on("blur", ".floating-label-form-group", function() {
+        $(this).removeClass("floating-label-form-group-with-focus");
+    });
+});
+
+// Highlight the top nav as scrolling occurs
+$('body').scrollspy({
+    target: '.navbar-fixed-top'
+})
+
+// Closes the Responsive Menu on Menu Item Click
+$('.navbar-collapse ul li a').click(function() {
+    $('.navbar-toggle:visible').click();
+});
--- a/gridstack-demo.css
+++ b/gridstack-demo.css
@ -0,0 +1,20 @@
+.grid-stack-item-content {
+    background: white;
+    color: #2c3e50;
+    font-family: 'Indie Flower', cursive;
+    text-align: center;
+    font-size: 20px;
+}
+
+.grid-stack-item-content .fa {
+    font-size: 64px;
+    display: block;
+    margin: 20px 0 10px;
+}
+
+header a, header a:hover { color: #fff; }
+
+.darklue { background: #2c3e50; color: #fff; }
+.darklue hr.star-light::after {
+    background-color: #2c3e50;
+}
--- a/gridstack.css
+++ b/gridstack.css
@ -1,130 +0,0 @@
-.grid-stack {
-    position: relative;
-}
-
-.grid-stack-item {
-    position: absolute;
-    padding: 0;
-}
-
-.grid-stack-item .grid-stack-item-content,
-.grid-stack-item .placeholder-content {
-    margin: 0;
-    position: absolute;
-    top: 0;
-    left: 10px;
-    right: 10px;
-    bottom: 0;
-    width: auto;
-    z-index: 0 !important;
-}
-
-.grid-stack-placeholder .placeholder-content {
-    border: 1px dashed lightgray;
-}
-
-.grid-stack-item.ui-draggable-dragging,
-.grid-stack-item.ui-resizable-resizing {
-    z-index: 100;
-}
-
-.grid-stack-item.ui-draggable-dragging .box,
-.grid-stack-item.ui-resizable-resizing .box {
-    box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
-    opacity: 0.8;
-}
-
-.grid-stack-item .ui-resizable-handle {
-    padding: 3px;
-    margin: 3px 0;
-    cursor: nwse-resize;
-    color: gray;
-
-    position: absolute;
-    bottom: 0;
-    right: 15px;
-
-    font: normal normal normal 14px/1 FontAwesome;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-
-    font-size: 10px;
-}
-
-.grid-stack-item .ui-resizable-handle::before {
-    content: "\f065";
-}
-
-.grid-stack-item[data-gs-width="12"] { width: 100% }
-.grid-stack-item[data-gs-width="11"] { width: 91.66666667% }
-.grid-stack-item[data-gs-width="10"] { width: 83.33333333% }
-.grid-stack-item[data-gs-width="9"]  { width: 75% }
-.grid-stack-item[data-gs-width="8"]  { width: 66.66666667% }
-.grid-stack-item[data-gs-width="7"]  { width: 58.33333333% }
-.grid-stack-item[data-gs-width="6"]  { width: 50% }
-.grid-stack-item[data-gs-width="5"]  { width: 41.66666667% }
-.grid-stack-item[data-gs-width="4"]  { width: 33.33333333% }
-.grid-stack-item[data-gs-width="3"]  { width: 25% }
-.grid-stack-item[data-gs-width="2"]  { width: 16.66666667% }
-.grid-stack-item[data-gs-width="1"]  { width: 8.33333333% }
-
-.grid-stack-item[data-gs-x="12"] { left: 100% }
-.grid-stack-item[data-gs-x="11"] { left: 91.66666667% }
-.grid-stack-item[data-gs-x="10"] { left: 83.33333333% }
-.grid-stack-item[data-gs-x="9"]  { left: 75% }
-.grid-stack-item[data-gs-x="8"]  { left: 66.66666667% }
-.grid-stack-item[data-gs-x="7"]  { left: 58.33333333% }
-.grid-stack-item[data-gs-x="6"]  { left: 50% }
-.grid-stack-item[data-gs-x="5"]  { left: 41.66666667% }
-.grid-stack-item[data-gs-x="4"]  { left: 33.33333333% }
-.grid-stack-item[data-gs-x="3"]  { left: 25% }
-.grid-stack-item[data-gs-x="2"]  { left: 16.66666667% }
-.grid-stack-item[data-gs-x="1"]  { left: 8.33333333% }
-
-.grid-stack-item[data-gs-height="1"]  { height: 60px; }
-.grid-stack-item[data-gs-height="2"]  { height: 140px; }
-.grid-stack-item[data-gs-height="3"]  { height: 220px; }
-.grid-stack-item[data-gs-height="4"]  { height: 300px; }
-.grid-stack-item[data-gs-height="5"]  { height: 380px; }
-.grid-stack-item[data-gs-height="6"]  { height: 460px; }
-.grid-stack-item[data-gs-height="7"]  { height: 540px; }
-.grid-stack-item[data-gs-height="8"]  { height: 620px; }
-.grid-stack-item[data-gs-height="9"]  { height: 700px; }
-.grid-stack-item[data-gs-height="10"] { height: 780px; }
-.grid-stack-item[data-gs-height="11"] { height: 860px; }
-.grid-stack-item[data-gs-height="12"] { height: 940px; }
-.grid-stack-item[data-gs-height="13"] { height: 1020px; }
-.grid-stack-item[data-gs-height="14"] { height: 1100px; }
-.grid-stack-item[data-gs-height="15"] { height: 1180px; }
-.grid-stack-item[data-gs-height="16"] { height: 1260px; }
-.grid-stack-item[data-gs-height="17"] { height: 1340px; }
-.grid-stack-item[data-gs-height="18"] { height: 1420px; }
-.grid-stack-item[data-gs-height="19"] { height: 1500px; }
-.grid-stack-item[data-gs-height="20"] { height: 1580px; }
-
-.grid-stack-item[data-gs-y="0"]  { top: 0 }
-.grid-stack-item[data-gs-y="1"]  { top: 80px; }
-.grid-stack-item[data-gs-y="2"]  { top: 160px; }
-.grid-stack-item[data-gs-y="3"]  { top: 240px; }
-.grid-stack-item[data-gs-y="4"]  { top: 320px; }
-.grid-stack-item[data-gs-y="5"]  { top: 400px; }
-.grid-stack-item[data-gs-y="6"]  { top: 480px; }
-.grid-stack-item[data-gs-y="7"]  { top: 560px; }
-.grid-stack-item[data-gs-y="8"]  { top: 640px; }
-.grid-stack-item[data-gs-y="9"]  { top: 720px; }
-.grid-stack-item[data-gs-y="10"] { top: 800px; }
-.grid-stack-item[data-gs-y="11"] { top: 880px; }
-.grid-stack-item[data-gs-y="12"] { top: 960px; }
-.grid-stack-item[data-gs-y="13"] { top: 1040px; }
-.grid-stack-item[data-gs-y="14"] { top: 1120px; }
-.grid-stack-item[data-gs-y="15"] { top: 1200px; }
-.grid-stack-item[data-gs-y="16"] { top: 1280px; }
-.grid-stack-item[data-gs-y="17"] { top: 1360px; }
-.grid-stack-item[data-gs-y="18"] { top: 1440px; }
-.grid-stack-item[data-gs-y="19"] { top: 1520px; }
--- a/gridstack.js
+++ b/gridstack.js
@ -1,298 +0,0 @@
-(function (scope, _) {
-
-    var Utils = {
-        is_intercepted: function (a, b) {
-            return !(a.x + a.width <= b.x || b.x + b.width <= a.x || a.y + a.height <= b.y || b.y + b.height <= a.y);
-        }
-    };
-
-    var id_seq = 0;
-
-    var GridStackEngine = function (width, onchange) {
-        this.width = width;
-
-        this.nodes = [];
-        this.onchange = onchange || function () {};
-    };
-
-    GridStackEngine.prototype._fix_collisions = function (node) {
-        this.nodes = _.sortBy(this.nodes, function (n) { return -(n.x + n.y * this.width); }, this);
-
-        while (true) {
-            var collision_node = _.find(this.nodes, function (n) {
-                return n != node && Utils.is_intercepted(n, node);
-            }, this);
-            if (typeof collision_node == 'undefined') {
-                return;
-            }
-            this.move_node(collision_node, collision_node.x, node.y + node.height,
-                collision_node.width, collision_node.height, true);
-        }
-    };
-
-    GridStackEngine.prototype._pack_nodes = function () {
-        this.nodes = _.sortBy(this.nodes, function (n) { return n.x + n.y * this.width; }, this);
-
-        _.each(this.nodes, function (n, i) {
-            while (n.y > 0) {
-                var new_y = n.y - 1;
-                var can_be_moved = i == 0;
-
-                if (i > 0) {
-                    var collision_node = _.chain(this.nodes)
-                        .first(i)
-                        .find(function (bn) {
-                            return Utils.is_intercepted({x: n.x, y: new_y, width: n.width, height: n.height}, bn);
-                        })
-                        .value();
-                    can_be_moved = typeof collision_node == 'undefined';
-                }
-
-                if (!can_be_moved) {
-                    break;
-                }
-                n.y = new_y;
-            }
-        }, this);
-    };
-
-    GridStackEngine.prototype._prepare_node = function (node, moving) {
-        node = _.defaults(node || {}, {width: 1, height: 1, x: 0, y: 0 });
-
-        node.x = parseInt('' + node.x);
-        node.y = parseInt('' + node.y);
-        node.width = parseInt('' + node.width);
-        node.height = parseInt('' + node.height);
-
-        if (node.width > this.width) {
-            node.width = this.width;
-        }
-        else if (node.width < 1) {
-            node.width = 1;
-        }
-
-        if (node.height < 1) {
-            node.height = 1;
-        }
-
-        if (node.x < 0) {
-            node.x = 0;
-        }
-
-        if (node.x + node.width > this.width) {
-            if (moving) {
-                node.x = this.width - node.width;
-            }
-            else {
-                node.width = this.width - node.x;
-            }
-        }
-
-        if (node.y < 0) {
-            node.y = 0;
-        }
-
-        return node;
-    };
-
-    GridStackEngine.prototype._notify = function () {
-        this.onchange(this.nodes);
-    };
-
-    GridStackEngine.prototype.add_node = function(node) {
-        node = this._prepare_node(node);
-
-        if (typeof node.max_width != 'undefined') node.width = Math.min(node.width, node.max_width);
-        if (typeof node.max_height != 'undefined') node.height = Math.min(node.height, node.max_height);
-        if (typeof node.min_width != 'undefined') node.width = Math.max(node.width, node.min_width);
-        if (typeof node.min_height != 'undefined') node.height = Math.max(node.height, node.min_height);
-
-        node._id = ++id_seq;
-        this.nodes.push(node);
-        this._fix_collisions(node);
-        this._pack_nodes();
-        this._notify();
-        return node;
-    };
-
-    GridStackEngine.prototype.remove_node = function (node) {
-        node._id = null;
-        this.nodes = _.without(this.nodes, node);
-        this._pack_nodes();
-        this._notify(node);
-    };
-
-    GridStackEngine.prototype.move_node = function (node, x, y, width, height, no_pack) {
-        if (typeof x == 'undefined') x = node.x;
-        if (typeof y == 'undefined') y = node.y;
-        if (typeof width == 'undefined') width = node.width;
-        if (typeof height == 'undefined') height = node.height;
-
-        if (typeof node.max_width != 'undefined') width = Math.min(width, node.max_width);
-        if (typeof node.max_height != 'undefined') height = Math.min(height, node.max_height);
-        if (typeof node.min_width != 'undefined') width = Math.max(width, node.min_width);
-        if (typeof node.min_height != 'undefined') height = Math.max(height, node.min_height);
-
-        if (node.x == x && node.y == y && node.width == width && node.height == height) {
-            return node;
-        }
-
-        var moving = node.x != x;
-
-        node.x = x;
-        node.y = y;
-        node.width = width;
-        node.height = height;
-
-        node = this._prepare_node(node, moving);
-
-        this._fix_collisions(node);
-        if (!no_pack) {
-            this._pack_nodes();
-            this._notify();
-        }
-        return node;
-    };
-
-    GridStackEngine.prototype.get_grid_height = function () {
-        return _.reduce(this.nodes, function (memo, n) { return Math.max(memo, n.y + n.height); }, 0);
-    };
-
-    var GridStack = function (el, opts) {
-        var self = this;
-
-        this.container = $(el);
-
-        this.opts = _.defaults(opts || {}, {
-            width: 12,
-            item_class: 'grid-stack-item',
-            placeholder_class: 'grid-stack-placeholder',
-            handle: '.grid-stack-item-content',
-            cell_height: 60,
-            vertical_margin: 20
-        });
-
-        this.grid = new GridStackEngine(this.opts.width, function (nodes) {
-            _.each(nodes, function (n) {
-                n.el
-                    .attr('data-gs-x', n.x)
-                    .attr('data-gs-y', n.y)
-                    .attr('data-gs-width', n.width)
-                    .attr('data-gs-height', n.height);
-            });
-        });
-
-        this.container.find('.' + this.opts.item_class).each(function (index, el) {
-            self._prepare_element(el);
-        });
-
-        this.placeholder = $('<div class="' + this.opts.placeholder_class + ' ' + this.opts.item_class + '"><div class="placeholder-content" /></div>').hide();
-        this.container.append(this.placeholder);
-        this.container.height((this.grid.get_grid_height()) * (this.opts.cell_height + this.opts.vertical_margin) - this.opts.vertical_margin);
-    };
-
-    GridStack.prototype._update_container_height = function () {
-        this.container.height(this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) - this.opts.vertical_margin);
-    };
-
-    GridStack.prototype._prepare_element = function (el) {
-        var self = this;
-        el = $(el);
-
-        var node = self.grid.add_node({
-            x: el.attr('data-gs-x'),
-            y: el.attr('data-gs-y'),
-            width: el.attr('data-gs-width'),
-            height: el.attr('data-gs-height'),
-            max_width: el.attr('data-gs-max-width'),
-            min_width: el.attr('data-gs-min-width'),
-            max_height: el.attr('data-gs-max-height'),
-            min_height: el.attr('data-gs-min-height'),
-            el: el
-        });
-        el.data('_gridstack_node', node);
-
-        var cell_width, cell_height = this.opts.cell_height + this.opts.vertical_margin / 2;
-
-        var on_start_moving = function (event, ui) {
-            var o = $(this);
-            cell_width = Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
-            self.placeholder
-                .attr('data-gs-x', o.attr('data-gs-x'))
-                .attr('data-gs-y', o.attr('data-gs-y'))
-                .attr('data-gs-width', o.attr('data-gs-width'))
-                .attr('data-gs-height', o.attr('data-gs-height'))
-                .show();
-            node.el = self.placeholder;
-        };
-
-        var on_end_moving = function (event, ui) {
-            var o = $(this);
-            node.el = o;
-            self.placeholder.hide();
-            o
-                .attr('data-gs-x', node.x)
-                .attr('data-gs-y', node.y)
-                .attr('data-gs-width', node.width)
-                .attr('data-gs-height', node.height)
-                .removeAttr('style');
-            self._update_container_height();
-        };
-
-        el.draggable({
-            handle: this.opts.handle,
-            scroll: true,
-            appendTo: 'body',
-
-            start: on_start_moving,
-            stop: on_end_moving,
-            drag: function (event, ui) {
-                var x = Math.round(ui.position.left / cell_width),
-                    y = Math.floor(ui.position.top / cell_height);
-                self.grid.move_node(node, x, y);
-                self._update_container_height();
-            }
-        }).resizable({
-            autoHide: true,
-            handles: 'se',
-            minHeight: this.opts.cell_height - 10,
-            minWidth: 70,
-
-            start: on_start_moving,
-            stop: on_end_moving,
-            resize: function (event, ui) {
-                var width = Math.round(ui.size.width / cell_width),
-                    height = Math.round(ui.size.height / cell_height);
-                self.grid.move_node(node, node.x, node.y, width, height);
-                self._update_container_height();
-            }
-        });
-    };
-
-    GridStack.prototype.add_widget = function (el, x, y, width, height) {
-        el = $(el);
-        if (typeof x != 'undefined') el.attr('data-gs-x', x);
-        if (typeof y != 'undefined') el.attr('data-gs-y', y);
-        if (typeof width != 'undefined') el.attr('data-gs-width', width);
-        if (typeof height != 'undefined') el.attr('data-gs-height', height);
-        this.container.append(el);
-        this._prepare_element(el);
-    };
-
-    GridStack.prototype.remove_widget = function (el) {
-        var node = $(el).data('_gridstack_node');
-        this.grid.remove_node(node);
-        el.remove();
-    };
-
-    scope.GridStackUI = GridStack;
-
-    $.fn.gridstack = function (opts) {
-        return this.each(function () {
-            if (!$(this).data('_gridstack')) {
-                $(this).data('_gridstack', new GridStack(this, opts));
-            }
-        });
-    };
-
-})(window, _);
--- a/index.html
+++ b/index.html
@ -1,17 +1,229 @@
 <!DOCTYPE html>
-<html>
-<head lang="en">
-    <meta charset="UTF-8">
+<html lang="en">
+
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="gridstack.js is a jQuery plugin for widget layout">
+    <meta name="keywords" content="gridstack, jquery, grid, layout, drag-n-drop, widgets, js, javascript">
+    <meta name="author" content="Pavel Reznikov">
+
    <title>gridstack.js</title>

-    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="gridstack.css"/>
-</head>
-<body>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
-    <script src="gridstack.js"></script>
+    <!-- Custom CSS -->
+    <link href="freelancer/css/freelancer.css" rel="stylesheet">
+
+    <!-- Custom Fonts -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel='stylesheet' type='text/css'>
+
+    <link href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/github.min.css' rel='stylesheet' type='text/css'>
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <link href="dist/gridstack.css" rel="stylesheet">
+    <link href="gridstack-demo.css" rel="stylesheet">
+</head>
+
+<body id="page-top" class="index">
+
+    <!-- Navigation -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+        <div class="container">
+            <!-- Brand and toggle get grouped for better mobile display -->
+            <div class="navbar-header page-scroll">
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="http://troolee.github.io/gridstack.js/"><span class="fa fa-th"></span> gridstack.js</a>
+            </div>
+
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav navbar-right">
+                    <li class="hidden">
+                        <a href="#page-top"></a>
+                    </li>
+                    <li class="page-scroll">
+                        <a href="#demo">Demo</a>
+                    </li>
+                    <li class="page-scroll">
+                        <a href="#usage">Usage</a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/troolee/gridstack.js/issues">Issues</a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/troolee/gridstack.js">Fork me on GitHub</a>
+                    </li>
+                </ul>
+            </div>
+            <!-- /.navbar-collapse -->
+        </div>
+        <!-- /.container-fluid -->
+    </nav>
+
+
+    <header>
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <div class="intro-text">
+                        <span class="name">gridstack.js</span>
+                        <hr class="star-light">
+                        <p>gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column
+                        grid. It allows you to build draggable responsive bootstrap v3 friendly layouts.
+                        It also works great with <a href="http://knockoutjs.com">knockout.js</a> and touch devices.</p>
+
+                        <p>Inspired by <a href="http://gridster.net">gridster.js</a>. Built with love.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <section id="demo" class="darklue">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h2>Demo</h2>
+                    <hr class="star-light">
+                </div>
+            </div>
+
+            <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
+                <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">1</div></div>
+                <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4"><div class="grid-stack-item-content">2</div></div>
+                <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes"><div class="grid-stack-item-content"> <span class="fa fa-hand-o-up"></span> Drag me! </div></div>
+                <div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">4</div></div>
+                <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">5</div></div>
+                <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4"><div class="grid-stack-item-content">6</div></div>
+                <div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">7</div></div>
+                <div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">8</div></div>
+                <div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2"><div class="grid-stack-item-content">9</div></div>
+                <div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">10</div></div>
+                <div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">11</div></div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Portfolio Grid Section -->
+    <section id="usage">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h2>Usage</h2>
+                    <hr class="star-primary">
+                </div>
+            </div>
+
+            <h3>Basic Usage</h3>
+
+            <pre><code class="html">
+&lt;div class=&quot;grid-stack&quot;&gt;
+    &lt;div class=&quot;grid-stack-item&quot;
+        data-gs-x=&quot;0&quot; data-gs-y=&quot;0&quot;
+        data-gs-width=&quot;4&quot; data-gs-height=&quot;2&quot;&gt;
+            &lt;div class=&quot;grid-stack-item-content&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;grid-stack-item&quot;
+        data-gs-x=&quot;4&quot; data-gs-y=&quot;0&quot;
+        data-gs-width=&quot;4&quot; data-gs-height=&quot;4&quot;&gt;
+            &lt;div class=&quot;grid-stack-item-content&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
+
+&lt;script type=&quot;text/javascript&quot;&gt;
+$(function () {
+    var options = {
+        cell_height: 80,
+        vertical_margin: 10
+    };
+    $('.grid-stack').gridstack(options);
+});
+&lt;/script&gt;
+            </code></pre>
+
+            <p>For more samples and documentation please visit <a href="https://github.com/troolee/gridstack.js">https://github.com/troolee/gridstack.js</a>.</p>
+
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="text-center">
+        <div class="footer-below">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12">
+                        Copyright &copy; Pavel Reznikov 2014
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
+    <div class="scroll-top page-scroll visible-xs visble-sm">
+        <a class="btn btn-primary" href="#page-top">
+            <i class="fa fa-chevron-up"></i>
+        </a>
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
+
+    <!-- Plugin JavaScript -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+    <script src="freelancer/js/classie.js"></script>
+    <script src="freelancer/js/cbpAnimatedHeader.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
+
+    <!-- Custom Theme JavaScript -->
+    <script src="freelancer/js/freelancer.js"></script>
+
+    <script src="dist/gridstack.js"></script>
+    <script src="dist/gridstack.jQueryUI.js"></script>
+    <script type="text/javascript">
+        hljs.initHighlightingOnLoad();
+        $(function () {
+            $('.grid-stack').gridstack({
+                width: 12,
+                alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent),
+                resizable: {
+                    handles: 'e, se, s, sw, w'
+                }
+            });
+        });
+    </script>
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-1891156-8', 'auto');
+  ga('send', 'pageview');
+
+</script>
 </body>
+
 </html>
Author	SHA1	Message	Date
Pavel Reznikov	387c7b133a	update demo site	2016-08-20 13:15:30 -07:00
Pavel Reznikov	4448b9e59e	fix demo index	2016-03-09 10:09:16 -08:00
Pavel Reznikov	d038eee15d	update dist	2016-03-02 21:53:41 -08:00
Pavel Reznikov	c41375351c	update demo	2016-02-29 23:25:31 -08:00
Pavel Reznikov	948b65d743	update dist	2016-02-25 22:02:01 -08:00
Pavel Reznikov	440025b375	update dist	2016-02-24 20:11:41 -08:00
Pavel Reznikov	c363313e2f	update dist	2016-02-23 22:09:08 -08:00
Pavel Reznikov	bc0b4d63fd	update demo	2016-02-23 20:13:48 -08:00
Pavel Reznikov	62c3e706b6	update anijs demo	2016-02-23 18:24:13 -08:00
Pavel Reznikov	47538432db	update dist	2016-02-23 15:02:23 -08:00
Pavel Reznikov	73d33fad9c	update with the last ver	2016-02-23 15:01:33 -08:00
Pavel Reznikov	e84a222a18	update gh-pages with the last changes	2016-02-21 20:55:29 -08:00
Pavel Reznikov	2876854a7e	update demo	2016-02-20 00:18:36 -08:00
Pavel Reznikov	6b08e76f2c	fix demo title	2015-06-19 22:21:56 -07:00
Pavel Reznikov	7a8017bf66	extra CSS	2015-06-19 22:04:19 -07:00
Pavel Reznikov	0088deee17	update gridstack.js	2015-06-18 19:31:46 -07:00
Pavel Reznikov	86d957a8f5	update gridstack	2015-05-14 20:29:52 -07:00
Pavel Reznikov	7efabdf1ab	update gridstack.js	2015-03-12 19:56:45 -07:00
Pavel Reznikov	c992f3ff1d	add floating sample	2015-03-12 19:54:05 -07:00
Pavel Reznikov	bfaa893400	update gridstack.js	2015-03-10 23:27:16 -07:00
Pavel Reznikov	39df7fa6f2	switch to lodash.js	2015-03-10 23:25:04 -07:00
Pavel Reznikov	a4f31ad930	serialization demo	2015-03-09 21:41:15 -07:00
Pavel Reznikov	c17ae60ac4	add serialization demo	2015-03-09 21:40:49 -07:00
Pavel Reznikov	39498e4b25	update gridstack	2015-03-08 22:43:02 -07:00
Pavel Reznikov	bd815c4a28	nested grids	2015-03-08 22:31:23 -07:00
Pavel Reznikov	7f07ef14ac	update gridstack.js	2015-03-08 12:03:21 -07:00
Pavel Reznikov	d26c2d6621	update gridstack.js	2015-03-08 11:59:42 -07:00
Pavel Reznikov	fcc4a6034f	update gridstack.js	2015-03-06 00:43:34 -08:00
Pavel Reznikov	c7b062b5dc	update gridstack.css	2015-03-05 23:05:52 -08:00
Pavel Reznikov	034600d82e	update gridstack.js	2015-03-03 22:28:49 -08:00
Pavel Reznikov	ed67c2c97b	update gridstack	2015-03-01 22:20:34 -08:00
Pavel Reznikov	fd76a03ab1	remove extra comma	2015-02-27 20:41:20 -08:00
Pavel Reznikov	1c04a89206	update gridstack.js	2015-02-27 20:29:21 -08:00
Pavel Reznikov	a716b24fb4	min size	2015-02-27 15:57:43 -08:00
Pavel Reznikov	0378b1809e	update knockout smaples	2015-02-27 15:37:37 -08:00
Pavel Reznikov	cc09c35bc0	ie8	2015-02-26 23:41:16 -08:00
Pavel Reznikov	ab68d401fb	testing with ie8	2015-02-26 23:40:02 -08:00
Pavel Reznikov	3b81397350	trying to deal with ie8	2015-02-26 23:36:06 -08:00
Pavel Reznikov	a2944e43ed	update gridstack.css	2015-02-26 23:18:56 -08:00
Pavel Reznikov	548c128cb5	update gridstack.js	2015-02-26 21:52:50 -08:00
Pavel Reznikov	4a4b6270fb	update gridstack	2015-02-26 21:45:40 -08:00
Pavel Reznikov	e55ba50d15	knockout demo	2015-02-26 21:10:19 -08:00
Pavel Reznikov	11a66feceb	update gridstack with the latest version	2015-02-26 21:10:09 -08:00
Pavel Reznikov	a5e3484ed3	update gridstack.js	2015-02-17 23:15:42 -08:00
Pavel Reznikov	b9129fb43e	update gridstack.js	2015-01-19 20:19:12 -08:00
Pavel Reznikov	6ad40cd657	improve nodes sorting	2015-01-19 18:36:55 -08:00
Pavel Reznikov	c7978489a6	add knockout.js demo	2015-01-19 00:54:14 -08:00
Pavel Reznikov	0cf6542622	update demo site	2015-01-08 19:48:45 -08:00
Pavel Reznikov	b1ee8a474e	improve touch support	2015-01-08 19:30:11 -08:00
Pavel Reznikov	cad563efb6	improve touch support	2015-01-08 19:25:04 -08:00
Pavel Reznikov	bd2fc8e595	touch support	2015-01-08 19:04:30 -08:00
Pavel Reznikov	b1693d2840	update gridstack.js	2014-12-19 17:53:06 -08:00
Pavel Reznikov	e24192bf8a	update gridstack	2014-12-19 17:35:18 -08:00
Pavel Reznikov	0f6ab48b0b	update gridstack.js	2014-12-11 21:50:18 -08:00
Pavel Reznikov	369722a0c8	update gridstack.js	2014-12-11 21:38:12 -08:00
Pavel Reznikov	a5638d17ec	update gridstack	2014-12-11 20:59:58 -08:00
Pavel Reznikov	34d4096bcd	update gridstack.css	2014-12-07 15:31:18 -08:00
Pavel Reznikov	fdbe96eda8	update gridstack.js	2014-12-05 20:34:22 -08:00
Pavel Reznikov	fd786ce08c	update gridstack.js	2014-12-05 20:25:10 -08:00
Pavel Reznikov	20314d9725	update gridstack.js	2014-12-05 19:18:08 -08:00
Pavel Reznikov	a37fd745dd	update gridstack.js	2014-12-05 18:29:52 -08:00
Pavel Reznikov	71c6607491	use custom jquery-ui build	2014-12-04 21:06:32 -08:00
Pavel Reznikov	04cde5e263	change js files scheme	2014-12-04 20:53:52 -08:00
Pavel Reznikov	ff9136cd87	update gridstack	2014-12-04 20:52:38 -08:00
Pavel Reznikov	a652b89e82	update gridstack.js	2014-12-01 18:12:24 -08:00
Pavel Reznikov	80c60aca83	update gridstack.js	2014-12-01 17:51:17 -08:00
Pavel Reznikov	e7aad782d9	update gridstack.js	2014-11-28 21:52:55 -08:00
Pavel Reznikov	ee09858229	update gridstack.js	2014-11-28 20:48:49 -08:00
Pavel Reznikov	4ed87f6cd3	update js	2014-11-26 06:44:05 -08:00
Pavel Reznikov	eb85edce0e	update with the latest gridstack.js	2014-11-25 22:41:57 -08:00
Pavel Reznikov	14d7299f7d	update gridstack.js	2014-11-23 16:55:31 -08:00
Pavel Reznikov	8103c5546f	update gridstack.js	2014-11-21 18:35:58 -08:00
Pavel Reznikov	6b4792af75	fix auto content overflow	2014-11-21 18:35:21 -08:00
Pavel Reznikov	4d19ee7358	add keywords	2014-11-20 23:01:30 -08:00
Pavel Reznikov	219027b82a	update gridstack.js	2014-11-20 17:52:19 -08:00
Pavel Reznikov	8f0dcf22bd	update gridstack.js	2014-11-20 17:25:28 -08:00
Pavel Reznikov	cd10829895	upstream version of gridstack.js	2014-11-19 20:51:44 -08:00
Pavel Reznikov	683d1e0ea8	fix initial position	2014-11-19 20:51:07 -08:00
Pavel Reznikov	724f478b46	fix initial positions	2014-11-19 20:24:22 -08:00
Pavel Reznikov	14ab5bc49d	rename js file to be gridstack.js	2014-11-19 20:15:39 -08:00
Pavel Reznikov	bed93f845c	usage sample	2014-11-18 19:13:11 -08:00
Pavel Reznikov	4fce8e0be5	add GA	2014-11-18 13:33:00 -08:00
Pavel Reznikov	7a08efed10	update gridstack.js	2014-11-17 00:05:00 -08:00
Pavel Reznikov	1f64b08c5e	knockout sample	2014-11-11 23:01:31 -08:00
Pavel Reznikov	de780775a5	update gridster.js	2014-11-11 22:38:11 -08:00
Pavel Reznikov	9655264418	update knockout sample	2014-11-11 22:37:37 -08:00
Pavel Reznikov	8cccf816a3	knockout.js sample	2014-11-11 19:43:52 -08:00
Pavel Reznikov	1e8317e883	links	2014-11-09 20:11:36 -08:00
Pavel Reznikov	ed284c9519	demo site	2014-11-09 20:08:26 -08:00
Pavel Reznikov	8fc46d0ea9	demo	2014-11-09 18:40:06 -08:00