Concept
I think today's web application development needs GUI editor for itself, with valid semantics.
It's not Home Page Builder.
Implementation
For that research, I wrote css grid layout generator at first.
Try it here. https://mizchi-sandbox.github.io/grid-generator/
Yes, it's very rough but works.
This tool generates css like this.
.gridContainer { width: 100%; height: 100%; display: grid; grid-template-columns: 120px 4fr 1fr; grid-template-rows: 60px 1fr 40px; grid-template-areas: 'header header header' 'left content right' 'footer footer footer'; } .headerArea { grid-area: header; } .leftArea { grid-area: left; } .contentArea { grid-area: content; } .rightArea { grid-area: right; } .footerArea { grid-area: footer; } Code is here. https://github.com/mizchi-sandbox/grid-generator
Top comments (0)