Modern CSS

I’m writing a little UI and I was looking around at CSS frameworks. I know that Tailwind is pretty much what everyone uses now. I used to be on a team at Yahoo that developed the concept of Atomic CSS and Tachyons. These were minimal CSS-only frameworks that didn’t rely on React or anything.

I’m looking into modern CSS features now and wondering if there is a way to put something together using new features like variables and flexbox which did not exist back when I first started looking at CSS.

I had some guidelines that I published previously here https://newcome.wordpress.com/2017/08/23/csstem/

It looks like CSS custom properties could help us with theming.

:root {
 --main-bg-color: cornflowerblue;
}
.rbox {
 border: 1px solid;
 border-color: var(--main-bg-color);
 border-radius: 10px;
 overflow: hidden;
 width: 10vw;
 height: 10vh;
}

<div class="row">
 <div class="col">
 <div class="rbox lout">Lorem ipsum lorem ipsum lorem ipsum Thing 1 thing blah blah sdfsdf</div>
 <div class="rbox lout"></div>
 </div>
 <div class="col">
 <div class="rbox lout"></div>
 <div class="rbox lout"></div>
 </div>
</div>

Just simple stuff is way easier these days.