4 ms·

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/ https://jdan.

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/ 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 https://rezmason.github.io/excel_97_egg/about.html

kristopolous 3y ago
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/ 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 https://www1.udel.edu/cookbook/web/webcolor/webcolors.html
- rezmason 3y ago
  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 http://kristopolous.github.io/BOOTSTRA.386/demo.html This is gorgeous!
  - kristopolous 3y ago
    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.
  - hatf0 3y ago
    Oh good lord. I may have just found the next redesign for my website. That blows this completely out of the water.
    - kristopolous 3y ago
      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 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.
creata 3y ago
> https://jdan.github.io/98.css/ https://jdan.github.io/98.css/ Subpixel antialiasing (I think) turns the text on that site green.
swyx 3y ago
I collect niche Operating System CSS! - [98.css](https://github.com/jdan/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 https://archive.org/details/mso97clipart) - [XP.css](https://github.com/botoxparty/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/ https://khang-nd.github.io/7.css/) - [System.css](https://sakofchit.github.io/system.css/ https://sakofchit.github.io/system.css/) Retro Apple-inspired UI - [Puppertino](https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/ https://codedgar.github.io/Puppertino/) - [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/ http://pixelambacht.nl/2013/css3-c64/) - DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme - [a2k](https://a2000-docs.netlify.app/ https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library more at https://github.com/swyxio/spark-joy/tree/master https://github.com/swyxio/spark-joy/tree/master
Waterluvian 3y ago
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.

kristopolous 3y ago

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/ 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 https://www1.udel.edu/cookbook/web/webcolor/webcolors.html

rezmason 3y ago
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 http://kristopolous.github.io/BOOTSTRA.386/demo.html This is gorgeous!
- kristopolous 3y ago
  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.
- hatf0 3y ago
  Oh good lord. I may have just found the next redesign for my website. That blows this completely out of the water.
  - kristopolous 3y ago
    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 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.

creata 3y ago

> https://jdan.github.io/98.css/ https://jdan.github.io/98.css/ Subpixel antialiasing (I think) turns the text on that site green.

swyx 3y ago

I collect niche Operating System CSS! - [98.css](https://github.com/jdan/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 https://archive.org/details/mso97clipart) - [XP.css](https://github.com/botoxparty/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/ https://khang-nd.github.io/7.css/) - [System.css](https://sakofchit.github.io/system.css/ https://sakofchit.github.io/system.css/) Retro Apple-inspired UI - [Puppertino](https://github.com/codedgar/Puppertino https://github.com/codedgar/Puppertino) meant to mimic the look of macOS. [demo](https://codedgar.github.io/Puppertino/ https://codedgar.github.io/Puppertino/) - [Commodore 64 CSS](http://pixelambacht.nl/2013/css3-c64/ http://pixelambacht.nl/2013/css3-c64/) - DOS: [BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386): A vintage 1980s DOS inspired Twitter Bootstrap theme - [a2k](https://a2000-docs.netlify.app/ https://a2000-docs.netlify.app/): A Windows 2000 inspired web component library more at https://github.com/swyxio/spark-joy/tree/master https://github.com/swyxio/spark-joy/tree/master

Waterluvian 3y ago

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.