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)