Taeluf.com

template.html

<div class="PageEditor">
    <section class="Header">
        <ul class="Tabs">
            <li>BGDN-Div</li>
            <li>BGDN.js</li>
            <li>Apple-img</li>
        </ul>
        <ul class="Settings"><li>Sett.</li><li>+</li></ul>
    </section>
    <section class="TabContent">
        <section class="NodeNav">
            <button class="NavSiblingNode">&lt;h2&gt;</button>
                <span>&lt;</span>
            <div class="active">
                <button class="NavParentNode">&lt;section&gt;</button>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^</span>
                <button class="NavSelectedNode">&lt;div&gt;</button>
            </div>
                <span>&gt;</span>
            <button class="NavSiblingNode">&lt;p&gt;</button>

        </section>
        <section>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span>\/----------------|</span><br>
            &nbsp;&nbsp;&nbsp;
            <button class="NavChildNode">&lt;h3&gt;</button>
            <button class="NavChildNode">&lt;p&gt;</button>
        </section>
        <section class="Main">
            <section>
                <input class="NodeHTML" type="text" value='<div id="cat" foo="gee">' />
                <br>
                <span class="NodeSelectorMatchIndicator">&#x2714;</span>
                <input class="NodeSelector" type="text" value='div[foo="gee"]' />
                <br>
                <label>height: <span class="EditableHeightInput" contenteditable>96px</span>
                    <br>
                    <input class="EditableHeightSlider" type="range" />
                </label>
                <br>
            </section>
            <section class="dependencies">
                <button class="AutowiredClass">BGDN</button>
                <button class="NodeDependencies">...</button>
            </section>
        </section>
        <section>
            <textarea class="EditableCSSCode" rows="30" cols="100">div[foo="gee"] {
    background:red;
}</textarea>
        </section>
    </section>

    <!-- <div class="TheNode"></div>
    <textarea cols="100" rows="30" class="EditableCSS"></textarea> -->
</div>