# D&D site builder R&D

- this seem to help
- first add containers to screen
- add components in the container
- a container will take up all the row
- there will be container with differnt innter columns (1,2,3,4) taking up the whole space
- allow container drag and drop but only in colum direction (up and down)
- for responsive live preview show all the content in an `<iframe/>` an contain the iframe in a dif , now chaning the surrounding divs size we will he able to see live preview in different screen size

    <div class="target-div" width='420px'>
        <iframe/>
    </div>
    /**
        1250 px  - xl (extra larage) screen
        1050px   - lg (large) screen
        820px    - md (medium) screen
        420px    - sm (small) screen
    */

### refs
- https://kademi.github.io/keditor/examples/basic_with_blank_content.html
- https://github.com/ducdhm