border-layout v0.0.1

js-border-layout

A simple border layout with CSS and JS.

Usage

<div class="border-layout">

    <div class="north resizable" size="50px" min-size="10px" max-size="30%">
        <div class="content">
            This is north
        </div>
    </div>

    <div class="west">
        <div class="content">
            This is west
        </div>
    </div>
    
    <div class="east">
        <div class="content">
            This is east
        </div>
    </div>
    
    <div class="south">
        <div class="content">
            This is south
        </div>
    </div>
    
    <div class="center">
        <div class="content">
            And the center
        </div>
    </div>
</div>

<script>
    var layout = borderLayout(document.querySelector('.border-layout'));
</script>

Configuration

The north, east, south, west, center divs can have

• resizable class to make it resizable by the mouse.
• size, min-size, max-size attributes to define the initial, minimum and maximum size in px or %.

API

type Sizes = Object{
    north: number
    south: number
    west: number
    east: number
}

type Secion = 'north' | 'south' | 'west' | 'east'