1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
---
title: 98.css
date: 2020-04-28
route: /98-dot-css
description: A few days ago I launched 98.css, a design system for making interfaces that look like Windows 98. I'm pretty proud with how it turned out.
---
A few days ago [I launched 98.css](https://jdan.github.io/98.css/), a "design system" (it's a CSS file) for making
interfaces that look like Windows 98 ([on GitHub](https://github.com/jdan/98.css)). I'm pretty proud with how it turned out.
I actually started exploring this idea two years ago in [a small codepen](https://codepen.io/jdan/pen/QmXYPB) 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:
<div style="display: inline-block; padding: 20px; background: silver">
<div style="width: 192px; height: 72px; border: 4px solid grey; border-top-color: white; border-left-color: white"></div>
</div>
Instead of with proper "pixelated" borders like so:
<div style="display: inline-block; padding: 20px; background: silver">
<div style="width: 200px; height: 80px; box-shadow: inset -4px -4px #0a0a0a, inset 4px 4px #fff, inset -8px -8px grey, inset 8px 8px #dfdfdf"></div>
</div>
Turns out this behavior is well-specified in the glorious [Microsoft Windows User Experience](https://amzn.to/2YdvLve) reference manual.
I grabbed a copy and went to work. First buttons, then windows, navbars, scrollbars, inputs, and all sorts of things.
<img alt="a magnified view showing pixel-perfect borders on a scrollbar and button element" src="https://github.com/jdan/98.css/blob/main/docs/zoom.png?raw=true?raw=true">
My tools were a Windows 98 VM and MSPaint for measuring pixels. I used [Figma](https://www.figma.com/) to draw some icons (wonderful tool btw, great work team).
I did all of my development on my Windows desktop using [Visual Studio Code](https://code.visualstudio.com/) and
[Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/install-win10). 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](https://news.ycombinator.com/item?id=22940564):
> 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](https://github.com/jdan/98.css/pulls?q=is%3Apr+is%3Aclosed), from small bug-fixes to [giving 98.css properly-pixelated fonts](https://github.com/jdan/98.css/pull/27) to [semantically expandable tree views](https://github.com/jdan/98.css/pull/69). Y'all are the best ✨.
I also found myself distracted for a few hours [building a service](https://github.com/jdan/98.css-badges) to generate these swanky npm version and bundle size badges, since the ones on the wonderful [shields.io](https://shields.io) didn't fit my aesthetic.
<a href="http://npm.im/98.css"><img alt="npm" src="https://98badges.now.sh/api/version" style="border: none; width: auto; height: 32px"></a> <a href="https://unpkg.com/98.css"><img alt="gzip size" src="https://98badges.now.sh/api/size" style="border: none; width: auto; height: 32px"></a>
The code for generating these on-demand [lives here and is quite terrible](https://github.com/jdan/98.css-badges/blob/main/api/size.js), 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](https://twitter.com/pieskucom/status/1254396566863036418)
called "Time is Money" for about an hour, and spent some time clicking around [the GitHub projects that brought in 98.css](https://github.com/jdan/98.css/network/dependents?package_id=UGFja2FnZS0xMTA3MTQ5NTgw).
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. ✌️
|