PoC: CSS Grid Layout Editor and Web GUI Editor?

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

Blog

PoC: CSS Grid Layout Editor and Web GUI Editor?

Koutaro Chikuba

Concept

Implementation

Join Our Newsletter. No Spam, Only the good stuff.

Related