Let's redefine our way to do webpage

I was eating when I had this crazy idea.
I show you the code directly :

   <section container="90%">
       <div row="100%">
          <div col="25%">col 1</div>
          <div col="25%">col 2</div>
          <div col="50%">col 3</div>
       </div>
   </section>

So, this snippet is not like you see commonly or what you're writing. But if you're a webdev for a while, you probably understand at first glance what this means. And that's what is great !

If we have to write code, it should be fun for we and understandable by others. What do you think ?

---

Then, how to do that in fact ?

I used MOD-CSS to set quickly selectors for layout, like below :

<div :var="[container='90%']{ container$[98%] || lg? container$[90%] }"></div>

<div :var="[row='100%'] { $row[100%] tx.al[center] }"></div>

<div :var="[col='25%']{ $col[25%] }"></div>

<div :var="[col='50%']{ $col[50%] }"></div>

I can understand that this code is a little confusing at first, but that's really all you need to write to get a great responsive grid.

I designed MOD-CSS for this things, quick design.
There are still many other features to help you speed up your workflow, so don't hesitate to test as needed...

Tell me what you think of this approach :-)

=> codepen here