simple web framework

LINK Flexbox

---

.hbox, .vbox { display: flex; }

.hbox { flex-direction: row; }

.vbox { flex-direction: column; }

.grow { flex: 1;  }

.scroll { overflow: auto; }

.fill { position: absolute; top: 0; bottom: 0; left: 0; right:0; }

/* put all inputs in the second column, except for radio & checkboxes */

input, textarea, select {  order: 2; flex: 1 1 auto;  }

input[type="checkbox"], input[type="radio"] { order: 1; flex: none; width: auto; margin-left: 10em; }

/* put all labels in the first column, unless after radio or checkboxes */

label { order: 1;  width: 10em; text-align: right; }

input[type="checkbox"] ~ label, input[type="radio"] ~ label { width: auto; }

---------------------------------

function $(selector) { return document.querySelector(selector);  }

function $$(selector) { return document.querySelectorAll(selector); }

$$("button").forEach(button => button.addEventListener('click', ($event)=>console.log($event.target.innerText)));

---------------------------------

<div class="hbox">

       <button>do</button>

       <button>stuff</button>

       <button>left</button>

       <span class="grow"></span>

       <b>Your CSS Framework </b>

       <span class="grow"></span>

       <button class="fa fa-cut"></button>

       <button class="fa fa-copy"></button>

       <button class="fa fa-paste"></button>

   </div>

<div class="vbox panel" id="sources">

           <div class="header">Sources</div>

           <div class="scroll">

               <ul>

                   <li>list item </li>

                   <li>list item </li>

                   <li>list item </li>

                   <li>list item </li>

                 ….

           </div>

       </div>