profile image
Sean Walker

The making of ridge.css

As with most things I do at the computer, this was born out of frustration with existing tooling.

If I had to order my fustrations, they would roughly fall in this order:

I’ve been tackling these one by one, by either switching to something else that already exists or making my own:

The switch from bootstrap to tacyhons or I guess tailwind for the rest of the industry was pretty obvious to me. I’m surprised it took so long for the industry to come around to atomic css. The benefits when paired with components are incredible, you can move way faster, make your designs really stand out as opposed to with bootstrap, hope there’s a theme or something that you don’t want to change at all.

Don’t get me wrong, I like themes, but I don’t like it when to override one little style you have to deep dive into the internals of bootstrap’s insanely complex scss files which used to be .less and even more obscure. Lately I’ve completed 1.0’s of two somewhat simple projects, JanetDocs and AskJanet. The one thing I’ve learned from this is that if I don’t have my css/design work outsourced in the form of classless css (or mostly classless css), my odds of completing a project are super low. I started several projects with tachyons in the past and I was struggling under the weight of endlessly tweaking classes and trying to get padding/margin just right. Not to mention the lack of bootstrap grids had me floundering when it came time for responsive stuff. I just want to recap:

Enter classless css, which is really going back to the heart of website making from the 90s, with a twist. Instead of defining classes, you just use the html5 elements as they are and they are styled to look not ugly. So you basically get a stripped down version of bootstrap with the themes but no grid. No grid? No problem. That is where pylon.css comes in. It’s essentially swift ui for the web, which is great. What’s funny is swift and native development in general never suffered from this culture of “mixing content with presentation”. To hell with that, I want to make good looking websites fast, I don’t care about dogma.

Alright, so this kind of sets the stage for what ridge.css is, it’s a maximal frontend framework for making web apps fast, as in quickly not necessarily fast performing, I leave that up to the server ;). Here’s the constituent parts of this “framework”:

With those four things, you can accomplish a lot without switching files and without declaring classes forever and ever in your html.

I’m currently still working on ridge.css getting it ready for general use, but it’s coming along great. I’m going to make something relatively non-trivial and report back and probably release ridge then. And then write an ebook and sell it as the JARS stack, joy, alpine.js, ridge.css and sqlite.