Flat design is so ridiculous. Made someone a bunch of money. Now everyone follows like sheep. Sorry for the doomer comment but, like, really. I'd love to say that I'm surprised that we haven't gotten over this, but given it's been... 20 years (?)... I'm not surprised.
Also, the way multi-row tabs Just Work in the UIs of yesteryear *chef's kiss*
We've been getting flatter over time. Win9x (and even 3.x) styles have subtle 3D cues, like the edges of buttons, window borders, tabs, and text boxes. There were gradients. Apparently, these are technologies that we've lost.
Thanks for creating this, it fit perfect for a tiny web site I made[0]. Hits just the right mix of usability and nostalgia and makes me want to use it for more projects.
Off topic, I love your site - it's a perfect homage to a loving family tradition (even if it was only for a couple of vacations). This site is, I think, an example of what a beautiful internet could be (and maybe is, if anyone knows got to find more sites like this-really authentic stories). Now, I hope I'm not being fooled by an AI generated story, but even if I am, I am happy to believe in that illusion.
Edit: After reflecting on this situation, your creation, your art: the css library paired with your story gave me a modern day Norman Rockwell dopamine hit. This has been an absolute experience, bravo to the collaboration!
Thank you so much for your project! I have spent the last few months working on my own retro computing CSS library, but instead inspired by BeOS https://beta.mtechnic.me
PS: while doing research on my project, I found your portfolio site as well. Was shocked to see we had the exact same taste in music, and genuinely made me curious if everyone whose doing retro throwbacks libraries did as well.
I really want to make one of my websites use this.. I just can't think of one that would fit.
Also shout out XFCE-winxp-tc, which makes your Linux look like Windows XP. Lots of people know about Chicago95, but this project is excellent for that 2004 vibe
My gripe has always been that none of these xfce/gtk/etc. themes are ever actually pixel-perfect, even when they claim to be. Not sure if there is a legal concern there or not.
More than legal concerns is that theming engines on each DE can be a bit limiting trying to do such things. i.e. for KDE Plasma you'd need to do a fair amount of SVG trickery to reach 100% accuracy respect of the originals.
Plus the icons thing - they're not as easy as people might think.
But this xfce-winxp-tc seems to be really, really close to the original. In those first two screenshots I thought it was just screenshots of the original WinXP.
Also the CSS framework subject of this thread looks really identical to the widgets and stuff of Win98.
But if you want true 100% pixel-perfect windows 98/xp/whatever... Just use them.
unjokingly I think the fact that we removed grayed out buttons for "the button just doesn't appear" is one of the more confusing UI trends of our day and the sight of a grayed out button warms my heart
> Reconsider disabled controls. Disabled controls can be hard to use because users literally have to deduce why they are disabled. Disable a control when users expect it to apply and they can easily deduce why the control is disabled. Remove the control when there is no way for users to enable it or they don't expect it to apply, or leave it enabled, but provide an error message when it is used incorrectly.
> Tip: If you aren't sure whether you should disable a control or provide an error message, start by composing the error message that you might provide. If the error message contains helpful information that target users aren't likely to quickly deduce, leave the control enabled and provide the error. Otherwise, disable the control.
Unfortunately, that nuance has been lost in the modern version of the guidelines with no mention of disabled buttons at all [2]
This is pretty cool plus I love anything that references classics like 980css and 2Advanced. I'm even OK with hearing the word "Flash" now in a way that some day I'll be with hearing "React" ...
With every new version of the OS, the UI desigenrs were forced to show some change and call it improvement, even though those changes functionally unnecessary, more resource consuming, less faster, and less reliable.
Windows XP and MacOS System 7 had pretty good looking GUIs. Since then, modern keyboard-and-mouse UIs have not really improved that much; it's mostly been just evolving and polishing styling. All the real innovation has been on touchscreen devices.
Unlike other comments this one is actually a css framework except that it's too cute. If you had ~textual theme for a css framework that could probably work for lots of practical use.
Funny how nostalgia differs for different people. I hated all that so much at the time that I installed linux (RH 7.x) from a magazine cd and learned to program in C & perl.
That multirows tab UI thing was an utter abomination against usability, intelligence, good sense, decency, justice and obviously any and all aesthetics. Why bring it back? To fix it maybe?
Thanks. It's not a bootstrap theme, it's a proper fork that maintains compatibility.
It's extremely grueling to do. We're talking hundreds of hours.
I question how much AI can really help here since it's a matter of careful pixel alignment, image capabilities probably beyond what models can do and taste
I'm down if I can figure out an attack plan for the newer versions. Right now ai just feels like wheel spinning here. I might have to do this manually still
Finally, a throwback lib that seems to be mostly pixel-accurate! Some of the element spacing seems to be off but it does actually look like Windows 98.
The lack of accuracy and attention to detail in a lot of these efforts is incredibly irksome and annoying, just about as obnoxious as pixel-art games with inconsistent pixel sizes (like how hard is it to render to a smaller buffer and do a simple linear upscale?!?)
Also, the way multi-row tabs Just Work in the UIs of yesteryear *chef's kiss*
And here we are.
[0]: https://www.mathsheets.net/
Edit: After reflecting on this situation, your creation, your art: the css library paired with your story gave me a modern day Norman Rockwell dopamine hit. This has been an absolute experience, bravo to the collaboration!
PS: while doing research on my project, I found your portfolio site as well. Was shocked to see we had the exact same taste in music, and genuinely made me curious if everyone whose doing retro throwbacks libraries did as well.
Also shout out XFCE-winxp-tc, which makes your Linux look like Windows XP. Lots of people know about Chicago95, but this project is excellent for that 2004 vibe
[0] https://github.com/rozniak/xfce-winxp-tc
Plus the icons thing - they're not as easy as people might think.
But this xfce-winxp-tc seems to be really, really close to the original. In those first two screenshots I thought it was just screenshots of the original WinXP.
Also the CSS framework subject of this thread looks really identical to the widgets and stuff of Win98.
But if you want true 100% pixel-perfect windows 98/xp/whatever... Just use them.
2024 (471 points, 93 comments) https://news.ycombinator.com/item?id=42056918
2022 (606 points, 182 comments) https://news.ycombinator.com/item?id=33310554
2020 (838 points, 211 comments) https://news.ycombinator.com/item?id=22940564
https://alexbsoft.github.io/win95.css/ windows 95
https://bootstra386.com/ 1980's websites
https://botoxparty.github.io/XP.css/ windows xp
https://code.divshot.com/geo-bootstrap/ geocities
https://cs16.samke.me/ counter strike 1.6
https://edwardtufte.github.io/tufte-css/ edward tufte
https://jdan.github.io/98.css/ windows 98
https://khang-nd.github.io/7.css/ windows 7
https://micah5.github.io/PSone.css/ playstation one
https://nostalgic-css.github.io/NES.css/ nes
https://sakofchit.github.io/system.css/ apple system
https://snes-css.sadlative.com/ snes
https://thesimscss.inbn.dev/ the sims
https://nielssp.github.io/classic-stylesheets/
> Reconsider disabled controls. Disabled controls can be hard to use because users literally have to deduce why they are disabled. Disable a control when users expect it to apply and they can easily deduce why the control is disabled. Remove the control when there is no way for users to enable it or they don't expect it to apply, or leave it enabled, but provide an error message when it is used incorrectly.
> Tip: If you aren't sure whether you should disable a control or provide an error message, start by composing the error message that you might provide. If the error message contains helpful information that target users aren't likely to quickly deduce, leave the control enabled and provide the error. Otherwise, disable the control.
Unfortunately, that nuance has been lost in the modern version of the guidelines with no mention of disabled buttons at all [2]
[1]: https://learn.microsoft.com/en-us/windows/win32/uxguide/top-...
[2]: https://learn.microsoft.com/en-us/windows/apps/develop/ui/co...
Btw default buttons like OK should have a thick black outline.
Also windows UIs loved group boxes and radio buttons and checkboxes. I notice those are missing.
Also it seems that the dropdown is missing.
That multirows tab UI thing was an utter abomination against usability, intelligence, good sense, decency, justice and obviously any and all aesthetics. Why bring it back? To fix it maybe?
Multirow tab ai't pretty, but it allows you to know all your tabs -- unlike the modern scrollable tab bar that move one pixel on each click.
I guess this depends on you are using mouse clicks or have a touch screen you can swipe
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
https://github.com/vinibiavatti1/TuiCss
https://code.divshot.com/geo-bootstrap/
https://cs16.samke.me/
https://edwardtufte.github.io/tufte-css/
https://thesimscss.inbn.dev/
https://snes-css.sadlative.com/
https://css.ds.dreamyard.xyz/
https://irv77.github.io/Xbox360UI/
https://github.com/nielssp/classic-stylesheets
It's extremely grueling to do. We're talking hundreds of hours.
I question how much AI can really help here since it's a matter of careful pixel alignment, image capabilities probably beyond what models can do and taste
I'm down if I can figure out an attack plan for the newer versions. Right now ai just feels like wheel spinning here. I might have to do this manually still
The lack of accuracy and attention to detail in a lot of these efforts is incredibly irksome and annoying, just about as obnoxious as pixel-art games with inconsistent pixel sizes (like how hard is it to render to a smaller buffer and do a simple linear upscale?!?)