98.css – design system for building faithful recreations of Windows 98 UIs
jdan.github.io
jdan.github.io
This was my burnout recovery project in April of 2020. Very much a labor of love and a surprising way to realize I still liked programming. I wrote some scattered thoughts here [0]
I also "run" this project quite differently than I usually do - when I receive a pull request instead of merging it I do a quick glance through the user's github to make sure they're not a spammer before giving them _commit access_ and asking them to merge their own PR [1]. It has worked wonders.
One critique (more of a suggested improvement) - the dropdown boxes don’t look/behave as they did in Win 98. They actually render as native select tags on my browser when focused and it kind of breaks the immersion. I’m pretty sure implementing this to simulate the 98 version would be a bit difficult and would involve some JavaScript (which I know you want to avoid), but it may be a neat challenge to tinker with.
Windows 98 dropdowns look like e.g.: https://imgur.com/rVQhAIq
There might be a way: https://web.dev/state-of-css-2022/#customizing-select-elemen...
OS UI projects are actually good for this. Back in the day, when Classic Mac OS was customizable thanks to its Theme Manager, I went through a few Kaleidoscope schemes for the same reason. Very therapeutical.
Well done!
the win 98 there is using css and js. experiments thats aimed at fun is always welcome
This is what they're supposed to look like: https://imgur.com/a/iFMJCER (98.css on top, Windows 98 below)
As far as I'm aware, the only buttons that look like that when pressed are the Start menu button and taskbar buttons.
Similarly, buttons are supposed to have a black border in addition to the dotted outline when they're focused.
Unsure why there's a discrepancy. You're probably right re: taskbar buttons.
https://i.imgur.com/dxOYj2Y.png https://i.imgur.com/X3DJ50T.png
[0] https://www.amazon.com/Microsoft-Windows-Experience-Professi...
I double checked in a VM running Windows 98 earlier today. I suspect some of these 9x recreations are based solely on screenshots, in which details like active and focus states are not obvious.
* Thick black border indicates which button would be pressed if you hit enter. This is the focused button, or the default button if no button currently has focus.
* Dashed border indicates which button or other control currently has focus; this button is pressed if you hit space (but if another control has focus then space does not press the default button).
I learned some interesting things from the process. The biggest one for me is that web browsers have only one kind of focus, but Windows has two, a dotted line on the inside (element affected by space bar) and a black outline (element affected by return key). You therefore can't get exactly the same UI in a browser without adding some JS to simulate this second type of focus.
Also, agree that Win2000's color scheme was the best looking iteration of the classic Windows look.
No, it just tells a story of what you've been in to years ago.
The color codes burned into my memory are: #aeaedd, #11ff11 and #dddd11. Who wants to guess where these came from?
Windows 10's design is just bland. I don't know why MS went ahead with this soulless design for so many years after Windows 8 came to be.
Windows 11 tries to be nicer but really it's just a fancy cover on legacy designs left over from since Windows 3.1.
It's interesting you say that, since I remember back at the time XP was released, so many people complained about how Windows XP had a "Fisher Price" UI that was distinctly non-professional. (Personally, I always liked XP's look.)
My guess is they need it to feel different enough to justify the price tag of a major upgrade.
In reality the changes behind the scene since Windows 7 have been incremental.
It’s crazy to see this and realize how much current Windows is unusable. I haven’t used Windows in ~10 years and every time I see the current interface I can’t believe someone is able to use it without losing their mind.
Me, I used Windows for years until ~2008. In 2008 I started using both Mac and Windows. In 2010 I started using Linux, Mac, and Windows. I never really found one better than another. Each one had their strengths, none of them had huge UI issue for me at least.
For example, one plus I find on Windows vs MacOS is I use Chrome with multiple profiles. Windows is able to display an icon per profile in the dock. Mac is not (not idea if this is a limitation of MacOS or Chrome on MacOS)
Another plus I find on Windows is zip support is better. On Mac, to use a zip you double click it and the OS uncompresses the zip. On Windows you double click it and Windows Explorer just looks inside the zip like it's a folder. You can directly copy and paste, or drag and drop, files out of the zip into other folders or apps, no need to first unzip it.
I'm not saying Windows is better, just different. Windows 11 cleaned some things up. Explorer is streamlined compared to 10 for example.
Plenty of things I like on Mac, like Terminal with bash or zsh vs Powershell on Windows (though I can run WSL but for actual windows stuff I usually stick to powershell). Airplay I use often to stream to my TV.
Most people have been using the taskbar that way for nearly 15 years, only a minority of people would have switched away from the default.
https://github.com/valinet/ExplorerPatcher
It also brings other Windows 10 UI paradigm's back in.
I have a strong feeling that this is Chrome's limitation. The builtin Activity Monitor on macOS can even plot a realtime graph of CPU usage in the dock icon, and various other apps (including third party) are able to alter their own icon as well, so this doesn't look like a private API. Having two separate instances of an app in the dock is achievable with minimal hackery (I managed to do this a couple of times by accident, just by poking at and exploring the system).
Of course nothing helps if the app doesn't want to go the extra mile to integrate with the platform, which is how we keep ending up with the lowest common denominators for everything.
Some things are a dream come true in terms of utility. Others feel really archaic compared to FOSS desktops.
Admittedly I know WPF needs good graphics hardware which I'm sure Citrix is not providing.
I know we need to scale for different screens but the reality is it's slower then ever on faster hardware.
UWP/WinUI/Metro uses XAML and Microsoft was very committed to that for a while. UWP didn't really pan out, but that was for reasons other than XAML and WinUI IMO.
I dread every app update these days. What buttons will lose their edges? Which icons will become indistinguishable vector hieroglyhps? Will the menu bar inexplicably become all-caps? What new upsells and attention-sinks will be forced unturnoffably into my precious screen real-estate?
This, though... you can see what things are. Buttons have edges. It's obvious at a glance what's editable and what's not. This is truly the UI of the future. I feel like, with a UI like this, the user could use the computer, not the other way around. I can't wait for the world to catch up.
Minor bug report: The first row of buttons in the "Button" section make the rest of the page move down when clicked (Firefox/Mac). The other buttons are all fine though.
Checkbox labels text is selectable. Should not happen in UI. Same about title bars. Title bars also do not set cursor: pointer. Also happens in some other components.
Dropdown contents have wrong colors. I think they use default browser styling or something like that.
Those are minor nitpicks, of course. This style is very nostalgic, thanks for making it. I thought about using this kind of UI for some web app, I think I'll reimplement it myself (because that's the fun), but I'll keep this style in mind.
Sure we have new visual styles and high resolution now, but the core design language is still pretty much the same. It's really hard to improve on it.
Even on mobile it just works.
Most of the attempts at more modern newer things feel unpredictable, or very limited, or they hide everything behind shortcuts and gestures and are near unusable unless you use the program all day every day and know everything.
Android is pretty good, maybe my favorite os to use, but a lot of the best parts are similar to this just adapted for touch.
Personally I'm clinging to macOS 10.14 for as long as I can. More recent iterations have very much lost their way.
I'm not sure I could make it look any better. It's a pretty nice theme considering it was meant for VGA and seems to have been designed around a more limited set of colors.
Plus you'd be seeing it on a beige monitor with a wide bezel, with a full size beige keyboard, likely on a desk that also had a note pad, pens, and stationary. I'm guessing it also was meant to look somewhat obviously techno rather than the appliancelike looks of new stuff, because the fact that computers existed was a big deal and they probably wanted to highlight that.
I think they did a decent job with the context and what I imagine they wanted to communicate.
(Minor nitpick: I'm missing the combo box, the much discussed genuine UI element of Windows. – Have a look at datalists for input elements.)
[1] https://web.dev/state-of-css-2022/#customizing-select-elemen...
It is not available in any mainline browser to my knowledge. It's still under development, and requires a flag to be set to use: https://open-ui.org/prototypes/selectmenu
Unix Motif, Windows 3/95/98, Classic MacOS... they were all highly usable. I crave the relentlessly, unashamed, unambiguousness of these old UIs, compared to modern UI which has devolved into something just as pretentious as the much hated skeuomorphism stage, only at the other end of the spectrum: extreme aesthetic minimalism at all cost (the user's cost).
The System 7 UI toolkit was underdeveloped, and forced a lot of applications to roll their own controls (with mixed success). The System 8 "Platinum" appearance mostly resolved that, though; I'd point to that as an excellent design for the era.
Usability wise, I feel System 7 was the high point of Classic macOS.
The System 7 version of Control Manager didn't apply much in the way of styling to controls, either. Windows were white; controls were black and white. Scrollbars got a bit of color in System 7, but nothing else did. It was funtional, but it wasn't pretty, and a lot of applications used custom CDEFs to add a bit of shading and color.
This fix (https://stackoverflow.com/a/22925525) removes the green shine despite being prefixed with -webkit. It's not longer a pixel-perfect match with Windows 98, though, so CRT users may notice the difference!
The biggest giveaway, though, is that you can drag to highlight text pretty much anywhere.
However, now that I think about it, such gradient bars must have required at least 16-bit color to work without dithering, so they were probably turned off by default for anything lower. And, at the time, budget video cards had limits on color depth in higher resolutions - e.g. for S3 Trio, if I remember correctly, you got a max of 24-bit color at 800x600, 16-bit at 1024x768, and 8-bit at 1280x1024; you could see the color depth combo box switch as you dragged the resolution slider. So I probably just ran it at 8-bit depth then.
[1] https://web.dev/state-of-css-2022/#customizing-select-elemen...
Recently, I've been attempting to create a global user style sheet that applies a reasonable set of nicely accessible rules to every website, essentially forcing buttons to look and behave like buttons, and to have a consistent theme across the internet. I started out by applying Window 95-like styles, and this is how it currently looks: https://waritschlager.de/share/0E7AB89CE86B1319A671D35EA2697... (background not changed to grey for now), not finished yet. Turns out, writing a global stylesheet is really difficult. For example, you cannot just "make all buttons grey":
First of all, there are many different ways to identify a button. This is a subset of my current button matching rule:
button, input[type=submit], input[type=button], a[class*="btn" i], a[class*="button" i], *[role=button], *[role=tab], *[role=menuitem], *[role=menuitemcheckbox], a:not([role=button] ...etc) > *:not(div ...etc)
Secondly, as soon as you overwrite the background color of all buttons, you will lose its background images which may be important. This happens way too often, also surrounding elements which actually have nothing to do with button semantics. So you need to apply a partially transparent background color. While it can still look perfect with the right tuning, it will then look horrible on non-white backgrounds.
There are also way too many nested buttons and empty buttons out there, it all needs consideration.
Finally, to detect a "pressed down" state, you'd normally use `aria-selected`, but barely anyone ever uses that, so it's back to matching class names `.active` and `.selected`, but then you also need to exclude `.inactive`, `.interactive`, `.deselected` and so on...
My conclusion so far is that building a global style sheet is definitely possible, but can get ugly sometimes. And instead of hand-crafting my own styles, I can now integrate 98.css's ones, that's great :-)
Also worth mentioning: A near-perfect win95 XFCE theme: https://github.com/grassmunk/Chicago95
i have moaned very hard re: the flat / glassy UIs of today, and i deeply loathe how newer folks have no respect for maintaining a working tab-order
good grief, losing the reliability of pressing tab and focus going to where i wanted it? really got me
I mean yes it was black text (0, 0, 0) against light gray background (192, 192, 192) as shown here.
But there's no universe in which that is "laughably low contrast". It's a full three-quarters of maximum contrast (not accounting for gamma). In fact, the WebAIM contrast checker says that's a contrast ratio of 11.54:1 which far surpasses even the AAA standard of 7:1 [1].
So not really sure what you're talking about.
Also, this was only for UX elements in things like dialogs and toolbars. Obviously content areas like inside a text editor were against a white background.
The proposed WCAG 3 contrast test, the Advanced Perceptual Contrast Algorithm, does consider font size and font weight. If I'm reading this correctly, the minimum recommended font size for normal 400 font weight with these colors is 16.75px, and the 11px seen in this 98.css demo is indeed laughably small: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=222222&DEV=G4g&BU...
That said, what I was referring to primarily was the blue text color (#007AFF) against that grey background color (#dfdfdf), but reviewing that now it appears that blue text color is the default button color in iOS Safari, and likely not the intention of the 98.css authors. I'm only seeing this blue color in iOS Safari, so it likely merely indicates some CSS bug somewhere between 98.css and iOS Safari. But for reference, this blue color scores a dreadful 3:1 on the old WebAIM contrast test, and according this this APCA Contrast Calculator is only suitable for 400 font weight at 37px font size: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=007aff&DEV=G4g&BU...
Isn’t it better to put the input inside the label tag so you avoid the awkward dead zone between the checkbox and the label text?
https://github.com/arturbien/React95
https://github.com/botoxparty/XP.css
https://github.com/Gioni06/terminal.css
https://github.com/jianzhongli/csswin10
https://github.com/khang-nd/7.css
https://github.com/kristopolous/BOOTSTRA.386
https://github.com/lachsfilet/Renkbench
https://github.com/lolstring/window98-html-css-js
https://github.com/micah5/PSone.css
https://github.com/nostalgic-css/NES.css
https://github.com/npjg/classic.css
https://github.com/robbiebyrd/platinum
https://github.com/bryanbraun/after-dark-css
https://github.com/npjg/new-dawn
https://github.com/ritenv/retro-desktop
https://github.com/RoelN/c64css3
https://github.com/sakofchit/system.css
The control panel and menus upon menus upon menus were not very user friendly. The design was built around low-res CRT screens, which very negatively affects modern screens. Hitboxes were often small, especially for the mice at the time. Commonly used UI elements such as the start menu lacked tons of features we take for granted now (searching in the start menu, for example). Icons were low-res and not always clear, though they were made excellently with more care than any other facet of any modern piece of software I can think of. Navigation controls were severely limited, simple things like breadcrumb navigation simply wasn't invented yet.
Windows XP fixed a lot of small issues found in the Win9x/Win2k UI styling. It had its own problems, but going back to the 9x days is not always an improvement.
It says a lot that I find the 9x style so much easier to use than the "modern" flat designs. It's like we're back in the middle of DOS text characters all over again, having UI elements execute actions after you've guessed about what they might do.
As for a modern take on old ideals, the SerenityOS design is an amazing combination of Win9x/Win2k ideas and modern controls. ReactOS is also used to have a new take on the old style, but that has been modernized to Win10-like menu bars in recent releases.
One strange thing: that laptop seemed to have a rare chipset and Vista was the only OS that came with the correct drivers for power management. I spent several weeks in vain trying to persuade other operating systems (tried old and new versions of Windows and Linux, various drivers and configuration hacks) not to turn the thing into a heater even at 0% CPU load.
Pretty sad. The hardware is still fully functional.
I think this because there have been a plethora of tools and libraries over the decades (think Tk, WxWidgets, and similar) that emulate the native look-and-feel of the OS and I believe a company has to defend it's IP/copyrights otherwise it implicitly loses the ability to do so in the future.
See: https://www.varnumlaw.com/insights/enforce-your-intellectual...
Consequently, this is why companies will so often be quick to "attack" random side projects people do targeting their IP (even very old IP). It isn't necessarily out of a malicious desire so much as a legal requirement. If they don't then a "serious" company can follow suit and then they have no ability to fight it.
Edit: to be clear, obviously they _can_ sue.
I guess I was slightly ahead of my time in wanting system wide dark mode. XP with the theming hacks made me very happy.
I know you could edit the theme around to set the UI scheme colours to a darker one, but as a kid I could never make it look nice
I think this might be it: https://never-obsolete.tumblr.com/post/180144131029/high-con...
edit: yellow and red is from win 3.1's hotdog mode: https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...
The downfall was a type of text (body text?) which used the same color as the titlebar. It couldn't be independently set. Was a bit frustrating back then.
There were the high contrast modes back then, but they were too ugly to use unless you needed the contrast.
There was however no reason software had to adhere to that. You were free to make your app as colorful as possible. Some devs were nice enough to set the text color to black but leave everything else to use the system theme, so with your dark theme you end up with a nice black on black. I think there were even some Microsoft apps that shipped with windows that had parts that were just "hard-coded" to a light theme.
In retrospect, it's a little funny. Apparently the coders & designers at Microsoft in the 90's never anticipated someone wanting a mostly dark desktop. They'd come up with crazy color schemes like Hot Dog, but never any gray & black schemes.
I don’t remember any of those dark presets being that dark either except for the High Contrast one — but this is going to drive me nuts all day now so I’m going to dig through a Win98 VM and see what I can find!
If there’s one that’s a good fit, might be a fun pull request to write for this project :)
I (an avid linux user who spends more time in the terminal than on a UI) certainly recall that my first contact with any computer with a keyboard was Windows 95. It was a complete mystery to me. The fascination that unexplainable object had on a 7 year old certainly had an effect on my life.
And guess what I remember? That grey interface with the blue title bar.
So as crappy as it might have been, as ethically unsound as the company who made it might have behaved themselves, the visual likeness of the system of my childhood tingles some old memories. And that is not even remotely odd. People can be nostalgic for literally everything, because we do not long for the old artifacts themselves, but for the feelings, friends and times we might have had when they were around.
For some of us the grey windows of Microsofts operating system have gained symbolic value beyond the aesthetical or functional qualities inherent to the system itself.
But my favorite Windows version is XP, I was doing service desk / junior sysadmin at the time and XP was just so easy to work with. You could fix a lot of problems by simply editing the registry or files in the windows folder directly and you could re-image a machine in about 2 minutes. The control panel was really easy to navigate and consistent.
I really wish XP was still supported.
Both (and more) perspectives can be valid at the same time.