Semantic CSS Grids with less.js
I’ve always shied away from using CSS grids simply because they require a deluge of classes cluttering up the HTML, which gives makes my gag reflex a run for its money.
Similarly I’ve shied away from using CSS extensions like LESS because they screwed with my development habits and required new hoops to jump through. And if there’s one thing web development doesn’t need, it’s more hoop jumping, trust you me.
However, there’s a tremor in the force called less.js, which essentially solves both these problems with one stroke, with nary a disadvantage, barring the use of JS, in sight.
So I created a small demo of how to use the two together, and aside from the added complexity of using LESS over CSS (the price of smart, but complex, over dumb, but cumbersome).