DEV Community

Cover image for Let's redefine our way to do webpage
Dev Geos
Dev Geos

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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%][center] }"></div>

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

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

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

Top comments (0)