SplitterJS: Complex Layout Demo

HTML

<script src="http://requirejs.org/docs/release/2.1.10/minified/require.js"></script>
<script src="https://dl.dropboxusercontent.com/u/28584686/splitterjs/Splitter.js"></script>
<div id=viewport class=unselectable>
    <div id=contentContainer class=selectable>
        <div id=content class=selectable></div>
        <div id=leftDiv class=selectable></div>
        <div id=leftsplitter class=verticalSplitter></div>
        <div id=rightsplitter class=verticalSplitter></div>
        <div id=rightDiv class=selectable></div>
    </div>
    <div id=topDiv class=selectable></div>
    <div id=topsplitter class=horizontalSplitter></div>
    <div id=bottomDiv class=selectable></div>
    <div id=bottomsplitter class=horizontalSplitter></div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
    padding: 0;
    background-color: gray;
    bottom: 0;
}
#topDiv {
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(100% - 100px);
    background-color: coral;
    position: absolute;
}
#leftDiv {
    right: 80%;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: lightblue;
    position: absolute;
}
#content {
    left: 20%;
    right: 20%;
    bottom: 0;
    top: 0;
    position: absolute;
    background-color: lightseagreen;
}
#rightDiv {
    top: 0;
    right: 0;
    left: 80%;
    bottom: 0;
    background-color: lightgray;
    position: absolute;
}
#bottomDiv {
    right: 0;
    background-color: lightgreen;
    position: absolute;
    bottom: 0;
    left: 0;
    top: calc(100% - 100px);
}
#contentContainer {
    left: 0;
    right: 0;
    top: 100px;
    bottom: 100px;
    position: absolute;
}
#viewport {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    position: fixed;
}
.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.verticalSplitter {
    width: 6px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}
.horizontalSplitter {
    height: 6px;
    background: linear-gradient(to right, #21374c 0%, #004966 30%, #21374c 100%);
}

JavaScript

require(['Splitter'], function (Splitter) {
    new Splitter({
        elementOne: leftDiv, // Div to the left of the splitter
        elementTwo: content, // Div to the right of the splitter
        splitter: leftsplitter, // Splitter div
        orientation: 'vertical', // Orientation [vertical | horizontal]
        collapse: 'left', // Collapse Direction [left | right | top | bottom | fixed]
        placeholderSplitter: true // Use a placeholder splitter
    }).Render();

    new Splitter({
        elementOne: content, // Div to the left of the splitter
        elementTwo: rightDiv, // Div to the right of the splitter
        splitter: rightsplitter, // Splitter div
        orientation: 'vertical', // Orientation [vertical | horizontal]
        collapse: 'right', // Collapse Direction [left | right | top | bottom | fixed]
        placeholderSplitter: false // Use a placeholder splitter
    }).Render();

    Splitter({
        elementOne: topDiv, // Div to the left of the splitter
        elementTwo: contentContainer, // Div to the right of the splitter
        splitter: topsplitter, // Splitter div
        orientation: 'horizontal', // Orientation [vertical | horizontal]
        collapse: 'top', // Collapse Direction [left | right | top | bottom | fixed]
        dummySplitter: false, // Move a dummy splitter instead of refreshing entire content
        placeholderSplitter: false // Use a placeholder splitter
    }).Render();

    new Splitter({
        elementOne: contentContainer, // Div to the left of the splitter
        elementTwo: bottomDiv, // Div to the right of the splitter
        splitter: bottomsplitter, // Splitter div
        orientation: 'horizontal', // Orientation [vertical | horizontal]
        collapse: 'bottom', // Collapse Direction [left | right | top | bottom | fixed]
        placeholderSplitter: false // Use a placeholder splitter
    }).Render();
});