Hacker News Reader

Comment by rezmason | Hacker News Reader

Another great resource to create web experiences that look like old versions of Windows is 98.css by Jordan Scales: https://jdan.github.io/98.css/

With it, you don't need to use React to get decent results, see?

https://rezmason.github.io/excel_97_egg/about.html

View on HN

I collect niche Operating System CSS!

- [98.css](https://github.com/jdan/98.css): A Windows 98 inspired framework for building faithful recreations of old UIs.

- [Office 97 clipart in svg format](https://archive.org/details/mso97clipart)

- [XP.css](https://github.com/botoxparty/XP.css): A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css.

- [7.css](https://khang-nd.github.io/7.css/)

- [System.css](https://sakofchit.github.io/system.css/) Retro Apple-inspired UI

- [Puppertino](https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/)

- [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/)

- DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme

- [a2k](https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library

more at https://github.com/swyxio/spark-joy/tree/master

That one is better. These fonts need work. They were true type without subpixel rendering, hinting, anti aliasing, etc, but at size 32, they weren't just bigger boxes. The thing I used on https://bootstra386.com/ is more faithful. In fact, it's written in the HTML of the time.

Also they weren't using off-black greys back then. EGA-16, web-216 or bust. Greys exist, but not those. https://www1.udel.edu/cookbook/web/webcolor/webcolors.html

I readily admit I'm taking some pixeliberties with it. :) The font's because of me, and the purple title bar, but I think I grabbed those grays from 98.css. I might change them to values in my own color lookup table.

...God DAMN dude, don't bury the lede! You made this? http://kristopolous.github.io/BOOTSTRA.386/demo.html This is gorgeous!

It has bugs. I need to go back and fix it.

Your actual Easter egg is really solid. You got lots of small details right on about that one.

Oh good lord. I may have just found the next redesign for my website. That blows this completely out of the water.

I'll be doing a v.5 eventually and fix up v.4 - looking like August.

This isn't a bootstrap "theme". It's more of a fork, the code goes through significant changes but maintains compatibility.

It's used in weird places, like on Gentoo for April fools 2015 : https://jappie.me/website-launch.html (images go through a number of filters to emulate ega-16 color reduction).

Pretty funny to see this as one of my most successful projects. Most people think I'm terrible at front end design.

I want it to be good enough that I'm genuinely tricked by it.

React isn’t really for showing a static page of elements. It shines when you have a UI tree of many views and sub views and various menus and windows.

I don’t think you need React but this page isn’t demonstrating that you don’t need it.

> https://jdan.github.io/98.css/

Subpixel antialiasing (I think) turns the text on that site green.

Reply on news.ycombinator.com