design-system-framework/plugins/dsf-ui/src/index.html

Create and maintain web component libraries for websites

<div class="app">
    <div class="sidebar">
        <div class="brand"><span>Design System Framework</span></div>
        <div class="js-insert-menu"></div>
    </div>
    <div class="main">
        <header class="header u-hide">
            <div class="header__buttons">
                <button class="fullscreen">Fullscreen</button>
            </div>
            <div class="header__suptitle">Components</div>
            <h1 class="header__title"></h1>
        </header>
        <div class="component">
            <iframe class="component__iframe" frameborder="0"></iframe>
        </div>
        <div class="inspector u-hide">
            <nav class="navigation-tabs js-insert-inspector-tabs"></nav>
            <div class="js-insert-inspectors"></div>
        </div>
    </div>
</div>
<div class="quick-create">
    <input type="text" placeholder="Component name" class="quick-create__name">
    <div class="quick-create__sources">
        <textarea class="quick-create__source" data-name-transform='<div class="$1"></div>' placeholder="HTML"></textarea>
        <textarea class="quick-create__source" data-name-transform=".$1{}" placeholder="CSS"></textarea>
    </div>
</div>