98.css
A few days ago I launched 98.css, a "design system" (it's a CSS file) for making interfaces that look like Windows 98 (on GitHub). I'm pretty proud with how it turned out.
I actually started exploring this idea two years ago in a small codepen where I had a go at styling some buttons. This was born out of a remarkably pedantic observation I made where many people would draw Windows-98 buttons like this:
Instead of with proper "pixelated" borders like so:
Turns out this behavior is well-specified in the glorious Microsoft Windows User Experience reference manual. I grabbed a copy and went to work. First buttons, then windows, navbars, scrollbars, inputs, and all sorts of things.
My tools were a Windows 98 VM and MSPaint for measuring pixels. I used Figma to draw some icons (wonderful tool btw, great work team). I did all of my development on my Windows desktop using Visual Studio Code and Windows Subsystem for Linux (WSL). Web development on Windows has come a long way and I really love my environment.
The project itself had three main objectives:
Make it as pixel-perfect as I reasonably can as a creative exercise. I'm going for nostalgia points and I have to really nail it.
Make it accessible. Windows 98 is such a wonderfully accessible and intuitive UI style and I couldn't ruin that. I had to do right by it.
Make it a stylesheet that prettied up HTML and nothing more. There are some obvious UI elements that I could build with JavaScript: nav menus, tab panels, that sort of thing, but I was incredibly hesitant to pick a JavaScript framework or roll my own. Instead I made the decision to style HTML and not care who sent it to me, be it React or Vue or whatever you want.
So after about two weeks (with lots and lots of breaks, I'm just not good at sitting in front of a computer for hours anymore) of development and cutting scope, I shipped it. I was surprised by how many people "got" it, how many people felt the same nostalgia that I felt when I first set out to build this silly thing. The haunted orange website even had its fair share of pleasant comments:
My heart beat a little faster when I saw the VB dialog box. I experienced building software for the first time when I was taken to my father's office where they used VB and Foxpro (and still do) to build ERP systems. Everything looked like this site.
The waves of nostalgia are sure coming on hard. Thank you to the author of this. This whole site is a work of art!
The community also sent many PRs my way, from small bug-fixes to giving 98.css properly-pixelated fonts to semantically expandable tree views. Y'all are the best ✨.
I also found myself distracted for a few hours building a service to generate these swanky npm version and bundle size badges, since the ones on the wonderful shields.io didn't fit my aesthetic.
The code for generating these on-demand lives here and is quite terrible, but I'm proud of it for working at all.
I was fortunate enough to lose myself in a clicker game built with 98.css called "Time is Money" for about an hour, and spent some time clicking around the GitHub projects that brought in 98.css.
If you made anything cool, please send it my way, nothing would make me happier :)
All in all I smiled while building this, and brought some smiles when I shipped it. That makes for a good project in my book, but only time will tell if this library is actually useful to anyone or just something people tweet about and move on.
I'm peaceful with either outcome. ✌️