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.
Whoa. Insanely cool. Outstanding quality and theming, such a simple implementation. Only thing I'd want to see is theming for data tables, maybe even an interactive table that behaves like the lists and grids.
This is amazing, thanks for this! I made a simple app using 98.css because that was the most feature-filled retro CSS library I could find. Going to try and use your 3.1 schemes :)
I’ve always had a soft spot for the older Mac OS design, and I really love this implementation! I spent sooooo much time in windows and Linux doing various things to try and get that feel back
Thanks for your work on this! I recently used 98.css in my fairly simple web app[0] for a recreation of something from my childhood, and it worked beautifully for my purposes.
I'd suggest using checkboxes instead of radio buttons for the operator selection. It would be useful, I think, to have a mix of just addition and subtraction, or just multiplication and division, instead of having one option or all four.
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.
I don't know if anyone else remembers this but in the late 90s, Microsoft had built-in CSS named colours that matched the Windows desktop theme/colours.
I have no idea if these still work (my IDE seems to say they do not, because everything is red).
So you could build web UIs that matched the user's Desktop look and feel. We did this for our browser-based Intranet applications in 1998, which made them look a bit more "native".
That's nice resource, especially the "Tests" part showing Firefox keeps them all supported and Safari dropping most of them.
I have explored system colours including deprecated ones with intention to try to tap them into some more pleasant scheme (dimming canvastext for bordrers through color-mix() for example) and was interested about the "palette" we could use without defining own colours. Made a comprehensive "sampler" to test them [1,2] and Results were quite sad, especially outside Firefox [3].
NB, that style does not play well with non-native DPI (e.g. when you have monitor set to 150% scale); to see it mapped to physical pixels, try running this in the browser's console:
In both of these as well as submission link, one of the things that is clearly and strikingly different from modern UI is the lack of very abundant amount of padding space. I think it's almost the mantra that we need breathing room, e.g., between different options in a radio-group box list of items... but I find lesser space (as was characteristic of older UI's) to be more honest... more respectful to me as an end-user, more information-dense.
I don't want to discard whatever innovation has been done, but man I find myself being nostalgic of old UI quite often.
There's nothing preventing information-dense layouts today, except that the "flat design" crowd has decreed that no work spaces, toolbars, or controls shall have any borders or lines to delineate visual separation. Too much "clutter." So the only thing left is to separate things with vast volumes of whitespace which doesn't actually work all that well when you have to deal with different screen sizes.
With old 640 x 480 or 800 x 600 resolutions, the screen real estate came at premium. There wasn't much room to use generous padding and still make all the buttons and UI fields fit in the low resolution displays.
It goes back to an accessibility study that found that 1.5x line-height is the most readable.
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
The one that looks like Windows 7 seems to be the most complete and has a bunch of stuff not found in the others, like progress bar or menus. In fact while I never liked the window decorations that 7 used, the rest wouldn't look bad on an electron app
THANK you so much for the XP one. XP's UI is my favorite of all the Windows UIs. It had just enough modernity to feel sleek but still had contrast to be easily seen and read and understood.
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 never enjoyed the XP one. Somebody called the Fisher-Price ui, and I think the remark is not too off. I would always switch to the "classic" UI, which I think was the same as Windows 2000, which in my opinion is the best of all (it is a similar but different from the one of Windows 98, especially in color choice and icon)
Readit News
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.
https://nielssp.github.io/classic-stylesheets/?theme=win3x&s...
This was my burnout recovery project and I wrote some thoughts on it recently https://notes.jordanscales.com/98-css-reflections
[0]: https://www.mathsheets.net/
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.
https://hn.algolia.com/?q=hypercard
I have no idea if these still work (my IDE seems to say they do not, because everything is red).
So you could build web UIs that matched the user's Desktop look and feel. We did this for our browser-based Intranet applications in 1998, which made them look a bit more "native".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
I have explored system colours including deprecated ones with intention to try to tap them into some more pleasant scheme (dimming canvastext for bordrers through color-mix() for example) and was interested about the "palette" we could use without defining own colours. Made a comprehensive "sampler" to test them [1,2] and Results were quite sad, especially outside Firefox [3].
[1] Dark: https://codepen.io/myf/pen/KKbVpmN [2] Light: https://codepen.io/myf/pen/jOXWPGV [3] https://x.com/myfonj/status/1769512951705149840
Still not 100% perfect, but much closer to intended rendering, I guess.
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
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.
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.
Deleted Comment