My focus was not so much on pixel perfect, but instead on creating something that would also work and look aesthetically pleasing on modern systems, like with higher DPI monitors and such. So one of the the things I did was to recreate all the icons and symbols in SVG.
I tried posting it as a Show HN when I added XP and Mac OS 9, but it didn't get much attention. Maybe the title of the project isn't as catchy.
Windows 2000 was the pinnacle of UI design IMO.
This was my burnout recovery project and I wrote some thoughts on it recently https://notes.jordanscales.com/98-css-reflections
I hope you're feeling better. Interesting how retro computing, like old games and operating systems, can be comforting and even healing. I've had similar experience with emulators - playing Gameboy and Nintendo games from childhood, or running Macintosh System 9.
Reminds me of Pico-8, SerenityOS, TempleOS. There's a common thread of a retro-style computing environment that can be entirely understood and controlled by the user.
I imagine there's deeper psychological dynamics to this, like a safe "sandbox" as a therapeutic tool.
It also says something about design with empathy and focus on user experience. There are so many hostile dark patterns these days in technology and society, that it's a relief to find some space (physical or mental) that's designed for your comfort.
The Sims https://thesimscss.inbn.dev/
Windows 98 https://jdan.github.io/98.css/
Windows XP https://botoxparty.github.io/XP.css/
Windows 7 https://khang-nd.github.io/7.css/
Edward Tufte https://edwardtufte.github.io/tufte-css/
Previous discussions:
https://news.ycombinator.com/item?id=33310554 - October 2022 (179 comments)
https://news.ycombinator.com/item?id=22940564 - April 2020 (211 comments)
See also:
HyperCard Simulator and Decker.
with(document.documentElement.style){
transform = `scale(${ 1 / devicePixelRatio })`;
transformOrigin = 'top left';
}
Still not 100% perfect, but much closer to intended rendering, I guess.
https://web.archive.org/web/20230603234837/https://vistaserv...
On a related note, I did start working on some tools to work with legacy .FONs for this exact purpose earlier this year, but the project is iceboxed for now...
I — we? — like the 98 etc UI for its clarity and simplicity not its low resolution.
I don't want to discard whatever innovation has been done, but man I find myself being nostalgic of old UI quite often.
As with a lot of things in ux accessibility research, these results were never replicated but the idea was seared into all our brains permanently. We know from research on fonts that ultimately, the most accessible font is the one the user is most used to. Sans vs. Serif vs. etc all don't seem to make a consistent difference across demographics. I suspect line spacing is something that's due for a relook
https://git.sr.ht/~q3cpma/website/tree/master/item/src/resou...
https://world-playground-deceit.net/
These make me want to go all the way.
Windows 7 UI was a bit too flashy and employed looks over readability and Windows 98 was too old fashioned and also suffered from a lack of contrast with all the grey.
I have no idea if these still work (my IDE seems to say they do not, because everything is red).
body {
font-size : 11px ;
color : windowtext ;
background-color : appworkspace ;
}
a {
color: menutext;
}
.headerBar {
border-top : 1px solid threedlightshadow ;
border-left : 1px solid threedlightshadow ;
border-bottom : 1px solid threedshadow ;
border-right : 1px solid threedshadow ;
background-color : threedface ;
}
https://drafts.csswg.org/css-color/#css-system-colors
And all these old colours were deprecated:
https://drafts.csswg.org/css-color/#deprecated-system-colors
And it's not that I'm some old boomer. In '98 I was one year old. I just hate buttons which don't look like buttons, tabs which don't look like tabs, text fields that you have to click to discover they're editable etc.
I suppose Apple must have done some research for MacOSX, but in the past two decades it feels like features are just be thrown in, especially on mobile, with no concept of discoverability or consistency. More than anything I think companies desire to have "consistent branding" or "unique look" is to blame for much of this.
It's still around but I flipped through it recently and it seems to be a mix of the absurdly general ("don't build an app for a specific screen size") to the very specific (MacOS and iOS APIs). Maybe there's some gold buried in there still, but I'm not sure where to find it.
Also, that website includes "show code" buttons disguised as ordinary text.
https://github.com/anthmn/hackertosh.css
https://github.com/AlexBSoft/win95.css
https://github.com/1j01/os-gui
https://github.com/themesberg/windows-95-ui-kit
https://github.com/andersevenrud/retro-css-shell-demo
https://github.com/arturbien/React95
https://github.com/botoxparty/XP.css
https://github.com/Gioni06/terminal.css
https://github.com/jdan/98.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
Thanks!
To be very pedantic: also the dropdown menu, when opened, looks very different than the original 98 style
The style looks incredible accurate to what I remember, although there are some differences:
- The opened dropdown menu, as my parent suggested.
- I don't remember textareas being resizable.
- I remember stepped sliders had little marks indicating where each step is. Only continuous sliders (e.g., the one in the Windows volume control) had no marks.
- The tabs don't look like as I remember from Win95/98, these ones look more like Win 3.1. Too much padding, the border is too thick, and the border radius is too big.
- In tables, the headers looked like buttons because they were actually buttons (you could press them to sort the table). However, here they are not clickable.
It might be that it just happens to look bad on high resolution screens, and/or maybe some browser fractional scaling issue
As an example, one of the text fields on the page contains the word "Incredible". When zoomed in it looks fine, when zoomed at 100% the I and the n are stuck together to each other without any pixel in-between which is very ugly
Sadly this is the dropdown provided by the host operating system. The tell is that it can extend beyond the browser chrome! 98.css doesn't ship with any JS, and I thought about hacking it with checkboxes and :after but.... no thanks.
the left side gets shift over and hidden behind the white navigation box.
Does this happen to anyone else?
Great job! I think adding Clippy notifications would be a fun touch