usage.html

<main>
    <region-compoment class='nav' [directions]="['right']">
        <span class="icon-big icon_expand-1"></span>
        <br /><br />
        <h1>{{ title }}</h1>
        <p>
            A teensy weensy directive for creating resizable containers.
        </p>
    </region-compoment>
    <div class="content">
        <region-compoment class="row" [directions]="['bottom']" [rFlex]="true">
            <region-compoment class="section" id="one" [directions]="['right']" [rFlex]="true">
                <p>Works with flexbox.</p>
            </region-compoment>
            <div class="section" id="two">
                <p>2</p>
            </div>
        </region-compoment>
        <div class="row">
            <region-compoment class="section" id="three" [directions]="['right']" [rFlex]="true">
                <p>Completely seperates <strong>layout logic</strong> from <strong>resize logic</strong>. All layout logic must be done by you in the CSS (as it should be).</p>
            </region-compoment>
            <div class="section" id="four">4</div>
        </div>
    </div>
</main>