35 ms·

98.css – design system for building faithful recreations of Windows 98 UIs

606 points by metadat 4y ago

Karupan 4y ago
Great work! What strikes me the most is how accessible the components are. So easy to make out the different states of each component at a glance. Would love to actually build something with this!
retrocryptid 4y ago
It's disturbing how much I love this. Also Licensed under a MIT license. Very Nice.
- raydiatian 4y ago
  Can Microsoft sue for something like this? Ethically I don’t think they should. But, can they?
  - pmalynin 4y ago
    You can sue anyone for anything, this is America.
  - massung 4y ago
    IANAL, but I think not. I think this because there have been a plethora of tools and libraries over the decades (think Tk, WxWidgets, and similar) that emulate the native look-and-feel of the OS and I believe a company has to defend it's IP/copyrights otherwise it implicitly loses the ability to do so in the future. See: https://www.varnumlaw.com/insights/enforce-your-intellectual-property-or-risk-losing-it/ https://www.varnumlaw.com/insights/enforce-your-intellectual... Consequently, this is why companies will so often be quick to "attack" random side projects people do targeting their IP (even very old IP). It isn't necessarily out of a malicious desire so much as a legal requirement. If they don't then a "serious" company can follow suit and then they have no ability to fight it. Edit: to be clear, obviously they _can_ sue.
    - chillfox 4y ago
      Trademark requires defense or it can be challenged. Copyright requires no such active defense to maintain and can be enforced selectively.
grenoire 4y ago
Honestly full-assed implementation. Font hinting is a bit odd with a green sheen on Firefox Win 10...
- int_19h 4y ago
  There are some minor discrepancies. Window titlebars weren't gradient in Win98 - that came in Win2k and WinME. The combobox dropdown has rounded ages (Win11 + Edge) and there's a gap between it and the textbox. The tree view has different widths for "+" and "-" on the nodes, and neither is properly aligned with the dotted lines of the tree. The biggest giveaway, though, is that you can drag to highlight text pretty much anywhere.
  - Kranar 4y ago
    Windows 98 used a gradient for its title bar [1]: https://microsoft.fandom.com/wiki/Windows_98?file=W98-2.png https://microsoft.fandom.com/wiki/Windows_98?file=W98-2.png
    - int_19h 4y ago
      I must have misremembered, then; my apologies. Perhaps it was a Win98 vs Win98 SE difference?
      - gsich 4y ago
        Maybe it also required GPU drivers to be installed? I clearly remember the gradient bars.
        int_19h 4y ago
        Win32 GUI wasn't composited until Vista, so it was all GDI 2D primitives rendered directly to the framebuffer. These could be accelerated, but I don't recall any case where some GDI feature would be unavailable if hardware didn't accelerate it - all primitives had software implementations, it just wouldn't be as fast. However, now that I think about it, such gradient bars must have required at least 16-bit color to work without dithering, so they were probably turned off by default for anything lower. And, at the time, budget video cards had limits on color depth in higher resolutions - e.g. for S3 Trio, if I remember correctly, you got a max of 24-bit color at 800x600, 16-bit at 1024x768, and 8-bit at 1280x1024; you could see the color depth combo box switch as you dragged the resolution slider. So I probably just ran it at 8-bit depth then.
alberth 4y ago
I give this a “10” on the UI usability scorecard.
- clnq 4y ago
  The UIs around the year 2001 were fantastically accessible. The recent obsession with flatness undid a lot of good practices.
  - zozbot234 4y ago
    I like the SerenityOS design choices. Looks pretty much like a 2001-or-so UI, but adopting more modern design elements (such as, e.g. breadcrumb navigation widgets) where they actually make sense.
    - josephg 4y ago
      I adore the design language of Haiku / BeOS for the same reason.
      - spookie 4y ago
        Honestly, I wish I could make Haiku my daily OS. Not quite there yet though.
    - Aeolun 4y ago
      Yeah, ever since I saw SerenityOS I’ve wanted to make a CSS library like this for that UI.
- tomxor 4y ago
  Totally agree. Unix Motif, Windows 3/95/98, Classic MacOS... they were all highly usable. I crave the relentlessly, unashamed, unambiguousness of these old UIs, compared to modern UI which has devolved into something just as pretentious as the much hated skeuomorphism stage, only at the other end of the spectrum: extreme aesthetic minimalism at all cost (the user's cost).
pshirshov 4y ago
Cool. Does not support dark mode though.
- girvo 4y ago
  Honest question, because I don’t remember: does Windows 98? I know you could edit the theme around to set the UI scheme colours to a darker one, but as a kid I could never make it look nice
  - MisterTea 4y ago
    I do remember a high contrast mode. Quite garish with white text on black background with bright blues and I think yellow and red too. I think this might be it: https://never-obsolete.tumblr.com/post/180144131029/high-contrast-1 https://never-obsolete.tumblr.com/post/180144131029/high-con... edit: yellow and red is from win 3.1's hotdog mode: https://blog.codinghorror.com/a-tribute-to-the-windows-31-hot-dog-stand-color-scheme/ https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...
    - metadat 4y ago
      Speaking of yellow and red .. don't forget the noteworthy and stunning specimen, HotDog Linux. https://hotdoglinux.com/ https://hotdoglinux.com/
  - dec0dedab0de 4y ago
    There were preset themes. Some were dark.
    - girvo 4y ago
      They certainly weren’t really a “dark mode” in the modern usage though I thought, they had ridiculously high contrast still around parts of it? I don’t remember any of those dark presets being that dark either except for the High Contrast one — but this is going to drive me nuts all day now so I’m going to dig through a Win98 VM and see what I can find! If there’s one that’s a good fit, might be a fun pull request to write for this project :)
ranger_danger 4y ago
I wouldn't really call this "faithful", I have yet to see actual pixel-perfect recreations of any Windows UI in any form whatsoever, but I'd love to see one.
- prezjordan 4y ago
  I would
  - metadat 4y ago
    ^ @prezjordan is the creator of 98.css, FYI :)
- replwoacause 4y ago
  I absolutely would. Not really sure what you’re on about.
whatwhatwhat_ 4y ago
why would anyone want to resurrect that terrible operating system? that’s the bar with which crappy software is measured against
- ranger_danger 4y ago
  nostalgia.
- raydiatian 4y ago
  I can imagine this making the internet a little less scary to some legacy users who are still working with ‘98 tech (you would be horrified at how many there are).
- atoav 4y ago
  Consider that for some people that terrible operating system might have been the first system the have ever used, maybe as a kid. I (an avid linux user who spends more time in the terminal than on a UI) certainly recall that my first contact with any computer with a keyboard was Windows 95. It was a complete mystery to me. The fascination that unexplainable object had on a 7 year old certainly had an effect on my life. And guess what I remember? That grey interface with the blue title bar. So as crappy as it might have been, as ethically unsound as the company who made it might have behaved themselves, the visual likeness of the system of my childhood tingles some old memories. And that is not even remotely odd. People can be nostalgic for literally everything, because we do not long for the old artifacts themselves, but for the feelings, friends and times we might have had when they were around. For some of us the grey windows of Microsofts operating system have gained symbolic value beyond the aesthetical or functional qualities inherent to the system itself.
  - whatwhatwhat_ 4y ago
    Well alright, but I was tech support for many Windows 98 users back in the day and wow did I hate microsoft. It was such a ridiculous mess, like a house of cards. Fix one thing and another broke, cryptic dll packs when installed fixed some problems then needed patching again and again and again. And everyone blamed tech support. We were incompetent, the software came from god. fml I hate that os
ranger_danger 4y ago
https://github.com/andersevenrud/retro-css-shell-demo https://github.com/andersevenrud/retro-css-shell-demo https://github.com/arturbien/React95 https://github.com/arturbien/React95 https://github.com/botoxparty/XP.css https://github.com/botoxparty/XP.css https://github.com/Gioni06/terminal.css https://github.com/Gioni06/terminal.css https://github.com/jianzhongli/csswin10 https://github.com/jianzhongli/csswin10 https://github.com/khang-nd/7.css https://github.com/khang-nd/7.css https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386 https://github.com/lachsfilet/Renkbench https://github.com/lachsfilet/Renkbench https://github.com/lolstring/window98-html-css-js https://github.com/lolstring/window98-html-css-js https://github.com/micah5/PSone.css https://github.com/micah5/PSone.css https://github.com/nostalgic-css/NES.css https://github.com/nostalgic-css/NES.css https://github.com/npjg/classic.css https://github.com/npjg/classic.css https://github.com/robbiebyrd/platinum https://github.com/robbiebyrd/platinum https://github.com/bryanbraun/after-dark-css https://github.com/bryanbraun/after-dark-css https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn https://github.com/ritenv/retro-desktop https://github.com/ritenv/retro-desktop https://github.com/RoelN/c64css3 https://github.com/RoelN/c64css3 https://github.com/sakofchit/system.css https://github.com/sakofchit/system.css https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/
dhiggdyjkb 4y ago
does a similiar thing exist for old macos style?
MitPitt 4y ago
Also see XP and 7 versions: https://botoxparty.github.io/XP.css/ https://botoxparty.github.io/XP.css/ https://khang-nd.github.io/7.css/ https://khang-nd.github.io/7.css/
- jw1224 4y ago
  I’ve always been a Mac guy, but there’s no denying XP really stood the test of time.
  - usrusr 4y ago
    I wanted to disagree, most likely because I'm one of the few who completely skipped XP jumping straight from 2000 to Vista. But I can't, turns out you are right, on that project page, in isolation, the elements actually do look good! Much better than what I think of when I think "XP" (mostly the task bar, start button and main window decorations I guess)
  - wsc981 4y ago
    Well, I am a Mac guy as well, but I did use Windows quite a bit in the past (.NET dev) and I always much preferred the more "serious" aesthetic of Windows 2000 (very similar to 98) than the "toy" aesthetic of Windows XP.
  - kgbcia 4y ago
    i liked macos 7/8/9 aesthetics. Windows 7 comes close.
- warning26 4y ago
  I'm a bit disappointed by the XP version's use of bitmaps for certain elements; it's completely possible to achieve the XP look purely with box-shadow properties.
- pattle 4y ago
  I built https://simulator.money https://simulator.money using this
panzi 4y ago
Very cool! I want a Windows 2000 version of it. I think that was the nicest looking Windows. It is very close to this, but with a slightly different main GUI color. Not a complete gray, but ever so slightly beige. Makes it more pleasant to the eye, IMO.
- warning26 4y ago
  Ideally it should support easy recoloring to match any of the exciting Windows classic themes! Hotdog Stand support when? Also, agree that Win2000's color scheme was the best looking iteration of the classic Windows look.
  - Beltalowda 4y ago
    I'm still using the Windows 2000 background colour, #3a6ea5, on my dwm setup. It's perhaps a little bit sad that I can recite that from memory.
    - TeMPOraL 4y ago
      > It's perhaps a little bit sad that I can recite that from memory. No, it just tells a story of what you've been in to years ago. The color codes burned into my memory are: #aeaedd, #11ff11 and #dddd11. Who wants to guess where these came from?
      - panzi 4y ago
        Has the first one something to do with Sun Microsystems?
- behnamoh 4y ago
  I liked rounded corners on Windows XP. It was the only version of Windows that looked professional and nice at the same time. Windows 10's design is just bland. I don't know why MS went ahead with this soulless design for so many years after Windows 8 came to be. Windows 11 tries to be nicer but really it's just a fancy cover on legacy designs left over from since Windows 3.1.
tshaddox 4y ago
Did Windows 98 really have such laughably low contrast between text and that dark grey background?
- quickthrower2 4y ago
  Yes!
- jeroenhd 4y ago
  To give it some credit, CRTs handle such contrast quite differently to modern screen technologies. The CRT itself added a tiny bit of colour bleed and blurring and the fact the colour is radiated out (rather than filtered out, like on LCD based technologies) gave it more contrast than you'd think looking at these colours now.
  - marmetio 4y ago
    Is it possible to reproduce that effect on an LCD to restore the original contrast?
  - crazygringo 4y ago
    - matsemann 4y ago
      WCAG defines different contrast rules for different font sizes. Thus "colors are colors" is not strictly true when it comes to evaluating contrast. On an old CRT, this elements were probably huge (measured in centimeters) compared to how I look at them on my 4k screen now. And that matters when talking about contrast.
      - crazygringo 4y ago
        No, elements were not "huge" on old CRT's. That's just a fact. Absolute text sizes have remained approximately the same. Have you ever used one? Nothing has changed in terms of information density that would lead to higher contrast now being required. To the contrary -- increased sharpness means you might be able to get away with lower density.
prezjordan 4y ago
Hey HN - author here. This was my burnout recovery project in April of 2020. Very much a labor of love and a surprising way to realize I still liked programming. I wrote some scattered thoughts here [0] I also "run" this project quite differently than I usually do - when I receive a pull request instead of merging it I do a quick glance through the user's github to make sure they're not a spammer before giving them _commit access_ and asking them to merge their own PR [1]. It has worked wonders. [0]: https://notes.jordanscales.com/ffa53b57 https://notes.jordanscales.com/ffa53b57 [1]: https://twitter.com/jdan/status/1528026508564078593 https://twitter.com/jdan/status/1528026508564078593
- RichardCNormos 4y ago
- azlyrics 4y ago
  very fun stuff...just wanted to share this i found the win 98 there is using css and js. experiments thats aimed at fun is always welcome https://twitter.com/PCBANGio/status/1493850712471527426 https://twitter.com/PCBANGio/status/1493850712471527426
- masswerk 4y ago
  > This was my burnout recovery project in April of 2020. OS UI projects are actually good for this. Back in the day, when Classic Mac OS was customizable thanks to its Theme Manager, I went through a few Kaleidoscope schemes for the same reason. Very therapeutical. Well done!
  - themoonisachees 4y ago
    Strongly agree. Theming in general is a fantastic way to do what you're good at (code and design) but have more agency than "write a test and code that passes it". My goto used to be 3DS home screen themes.
- smusamashah 4y ago
  I made Obsidian's windows 98 ui theme (now almost defunct with UI overhaul) with help of this.
hnthrowaway0315 4y ago
Cool! Wish we can do this easily with QT in Win10.
deleted 4y ago
[deleted]
Etesam 4y ago
I created a browser extension using this library! https://chrome.google.com/webstore/detail/xp-newtab/ncfmlogaelpnniflgipmnnglhfiifkke https://chrome.google.com/webstore/detail/xp-newtab/ncfmloga... https://addons.mozilla.org/en-US/firefox/addon/xp-newtab/ https://addons.mozilla.org/en-US/firefox/addon/xp-newtab/
slim 4y ago
a lot of justified praise for win95/98 ui every time it comes up. but I would like to hear criticism if possible. anyone?
- jeroenhd 4y ago
  Plenty of criticism to be found about Win95/98. The control panel and menus upon menus upon menus were not very user friendly. The design was built around low-res CRT screens, which very negatively affects modern screens. Hitboxes were often small, especially for the mice at the time. Commonly used UI elements such as the start menu lacked tons of features we take for granted now (searching in the start menu, for example). Icons were low-res and not always clear, though they were made excellently with more care than any other facet of any modern piece of software I can think of. Navigation controls were severely limited, simple things like breadcrumb navigation simply wasn't invented yet. Windows XP fixed a lot of small issues found in the Win9x/Win2k UI styling. It had its own problems, but going back to the 9x days is not always an improvement. It says a lot that I find the 9x style so much easier to use than the "modern" flat designs. It's like we're back in the middle of DOS text characters all over again, having UI elements execute actions after you've guessed about what they might do. As for a modern take on old ideals, the SerenityOS design is an amazing combination of Win9x/Win2k ideas and modern controls. ReactOS is also used to have a new take on the old style, but that has been modernized to Win10-like menu bars in recent releases.
  - anthk 4y ago
    Did you actually use w9x at 800x600 or 1024x768? It was perfectly fine.
masswerk 4y ago
Very nice and very clean! And I love the demo page. May deserve an update for styled pop-up menus, which became available recently, compare [1]. (Minor nitpick: I'm missing the combo box, the much discussed genuine UI element of Windows. – Have a look at datalists for input elements.) [1] https://web.dev/state-of-css-2022/#customizing-select-elements https://web.dev/state-of-css-2022/#customizing-select-elemen...
- mook 4y ago
  Hmm, am I misparsing the documentation? As far as I can tell from that link,<selectmenu> is actually not yet generally available. (It's also nowhere on MDN.) I was all excited about using it…
  - 8n4vidtmkvmk 4y ago
    <selectmenu> is available in Chromium-based browsers and requires a Canary version as well as the Experimental Web Platform features flag to be enabled in about:flags.
  - lelandfe 4y ago
    My pet theory is that web.dev exists to raise hype around wildly experimental features and thus put pressure on other browser vendors to implement them.
- lelandfe 4y ago
  > styled pop-up menus, which became available recently It is not available in any mainline browser to my knowledge. It's still under development, and requires a flag to be set to use: https://open-ui.org/prototypes/selectmenu https://open-ui.org/prototypes/selectmenu
  - masswerk 4y ago
    I think, we'll see broader support soon. It's probably worth waiting, since it's a better solution than any homegrown code, regarding accessibility and overall robustness. (Worst case, you just lose some styling.)
nickjj 4y ago
That was a nice touch to include the gradient title bar. I always thought that was a fun feature. Too bad they removed it with Windows 10 / 11 by default.
puttycat 4y ago
Beautiful. It’s crazy to see this and realize how much current Windows is unusable. I haven’t used Windows in ~10 years and every time I see the current interface I can’t believe someone is able to use it without losing their mind.
- gernb 4y ago
  Just curious but in what ways? Me, I used Windows for years until ~2008. In 2008 I started using both Mac and Windows. In 2010 I started using Linux, Mac, and Windows. I never really found one better than another. Each one had their strengths, none of them had huge UI issue for me at least. For example, one plus I find on Windows vs MacOS is I use Chrome with multiple profiles. Windows is able to display an icon per profile in the dock. Mac is not (not idea if this is a limitation of MacOS or Chrome on MacOS) Another plus I find on Windows is zip support is better. On Mac, to use a zip you double click it and the OS uncompresses the zip. On Windows you double click it and Windows Explorer just looks inside the zip like it's a folder. You can directly copy and paste, or drag and drop, files out of the zip into other folders or apps, no need to first unzip it. I'm not saying Windows is better, just different. Windows 11 cleaned some things up. Explorer is streamlined compared to 10 for example. Plenty of things I like on Mac, like Terminal with bash or zsh vs Powershell on Windows (though I can run WSL but for actual windows stuff I usually stick to powershell). Airplay I use often to stream to my TV.
  - kreativ_py 4y ago
    For me the taskbar in W11 is a giant step back, all windows are collapsed into a group. No idea why they removed the ability to keep them expanded other than trying to mimic the look of OSX
    - daveoc64 4y ago
      That's been the default since Windows 7 though. Most people have been using the taskbar that way for nearly 15 years, only a minority of people would have switched away from the default.
    - 4y ago
api 4y ago
I wish there were more CSS templates for doing native-looking interfaces for popular current OSes. I always look and come up empty.
andirk 4y ago
Can we also get a Windows Vista version? That was the BEST Windows ever! I liked it so much!
- ammo1662 4y ago
  There is a Windows 7 version mentioned above. https://khang-nd.github.io/7.css https://khang-nd.github.io/7.css
- Aeolun 4y ago
  Either this is some sarcasm, or this is the first time I found anyone that liked Vista.
  - tralarpa 4y ago
    It ran on one of my laptops for many years without any problems. One strange thing: that laptop seemed to have a rare chipset and Vista was the only OS that came with the correct drivers for power management. I spent several weeks in vain trying to persuade other operating systems (tried old and new versions of Windows and Linux, various drivers and configuration hacks) not to turn the thing into a heater even at 0% CPU load. Pretty sad. The hardware is still fully functional.
ilaksh 4y ago
Is there something like this for like mid-90s Unix X-Windows or something along those lines?
- nielssp 4y ago
  Not sure if this is what you're looking for, but I made this based on the look of CDE: https://nielssp.github.io/classic-stylesheets/?theme=cde&skin=default https://nielssp.github.io/classic-stylesheets/?theme=cde&ski... It also includes all the default color schemes.
  - ilaksh 4y ago
    Yes thank you!!
vbezhenar 4y ago
When I click one of the "Click me", "Submit", "Preset" buttons in Components/Button section, entire page jumps with 1 pixel. Looks bad. Checkbox labels text is selectable. Should not happen in UI. Same about title bars. Title bars also do not set cursor: pointer. Also happens in some other components. Dropdown contents have wrong colors. I think they use default browser styling or something like that. Those are minor nitpicks, of course. This style is very nostalgic, thanks for making it. I thought about using this kind of UI for some web app, I think I'll reimplement it myself (because that's the fun), but I'll keep this style in mind.
- jacob019 4y ago
  Better to contribute.
david2ndaccount 4y ago
Re: labels with inputs Isn’t it better to put the input inside the label tag so you avoid the awkward dead zone between the checkbox and the label text?
lbruno 4y ago
thanks for this i have moaned very hard re: the flat / glassy UIs of today, and i deeply loathe how newer folks have no respect for maintaining a working tab-order good grief, losing the reliability of pressing tab and focus going to where i wanted it? really got me
TazeTSchnitzel 4y ago
I've previously attempted this for Windows 95. I tried very hard to be pixel-accurate. https://hikari.noyu.me/demos/ https://hikari.noyu.me/demos/ shows off a bit of what I achieved, but alas it lacks most of the UI elements. I learned some interesting things from the process. The biggest one for me is that web browsers have only one kind of focus, but Windows has two, a dotted line on the inside (element affected by space bar) and a black outline (element affected by return key). You therefore can't get exactly the same UI in a browser without adding some JS to simulate this second type of focus.
winrid 4y ago
Some part of me wants to launch a serious enterprise-type product but use this for the admin dashboard.
jp1016 4y ago
This really brings out the old memories. i have seen this post long back on hn and incorporated your 98css theme on to my side project which generates code screenshots. if you want to check it out go to https://codekeep.io/screenshot https://codekeep.io/screenshot and select Windows 98
nielssp 4y ago
Tiny nitpick – buttons don't look like that when pressed in Windows 98 (or any version of Windows for that matter). This is what they're supposed to look like: https://imgur.com/a/iFMJCER https://imgur.com/a/iFMJCER (98.css on top, Windows 98 below) As far as I'm aware, the only buttons that look like that when pressed are the Start menu button and taskbar buttons. Similarly, buttons are supposed to have a black border in addition to the dotted outline when they're focused.
- orthoxerox 4y ago
  I think the thick black border marks the "default dialog button", not focus.
  - nielssp 4y ago
    It does both. Black border alone marks the default button in the dialog (unless another button is focused), black border + dotted outline marks focus. I double checked in a VM running Windows 98 earlier today. I suspect some of these 9x recreations are based solely on screenshots, in which details like active and focus states are not obvious.
    - quietbritishjim 4y ago
      To put it another way: * Thick black border indicates which button would be pressed if you hit enter. This is the focused button, or the default button if no button currently has focus. * Dashed border indicates which button or other control currently has focus; this button is pressed if you hit space (but if another control has focus then space does not press the default button).
- prezjordan 4y ago
  Good catch - You can probably tell which parts I took from Microsoft Windows User Experience [0] and which I built while eyeing my VM. Unsure why there's a discrepancy. You're probably right re: taskbar buttons. https://i.imgur.com/dxOYj2Y.png https://i.imgur.com/dxOYj2Y.png https://i.imgur.com/X3DJ50T.png https://i.imgur.com/X3DJ50T.png [0] https://www.amazon.com/Microsoft-Windows-Experience-Professional-Editions/dp/0735605661 https://www.amazon.com/Microsoft-Windows-Experience-Professi...
iamtedd 4y ago
Suggestion: The "Show code" links should be a button.
amfan 4y ago
Pretty cool. I love those old UI's. I once tried rebuilding a functional Windows 3.11 with pure CSS and Vue components. Sadly the used Vue version is kinda outdated by now and I am not sure if I want to spent time updating it all... https://github.com/sleepybuildings/vuedows https://github.com/sleepybuildings/vuedows
ycuser2 4y ago
An important nuance for me in "classic" 3D styles is wether the font in a button get sunken when I click it. It adds much "feel" for me.
distcs 4y ago
This is wonderful work. One little issue I noticed is that when I click on Cick me, Submit or Reset button the rest of the page below shifts a little down. The page resets to normal when I release the button. Reproducible on Chrome on mac. Does anyone else notice this? Not sure if this is an issue with the CSS or the page layout.
qwerty456127 4y ago
Doesn't seem faithful enough. Windows 98 UIs looked better than this and didn't use green text.
eternityforest 4y ago
Just beautiful. Even after all these years Microsoft's UI paradigm is still pretty much what I think a computer should look like. Sure we have new visual styles and high resolution now, but the core design language is still pretty much the same. It's really hard to improve on it. Even on mobile it just works. Most of the attempts at more modern newer things feel unpredictable, or very limited, or they hide everything behind shortcuts and gestures and are near unusable unless you use the program all day every day and know everything. Android is pretty good, maybe my favorite os to use, but a lot of the best parts are similar to this just adapted for touch.
- dkjaudyeqooe 4y ago
  Win 98's UI isn't very pretty (IMHO) but at least it's spare and relatively clean. Also it doesn't take a lot of resources to render. Compare with MS's more recent efforts. Personally I'm clinging to macOS 10.14 for as long as I can. More recent iterations have very much lost their way.
  - eternityforest 4y ago
    Aesthetically it's a bit vintage for non-nostalgia purposes, but IMHO the issues are purely things like fonts and colors and rounding, layout and behavior is excellent. I'm not sure I could make it look any better. It's a pretty nice theme considering it was meant for VGA and seems to have been designed around a more limited set of colors. Plus you'd be seeing it on a beige monitor with a wide bezel, with a full size beige keyboard, likely on a desk that also had a note pad, pens, and stationary. I'm guessing it also was meant to look somewhat obviously techno rather than the appliancelike looks of new stuff, because the fact that computers existed was a big deal and they probably wanted to highlight that. I think they did a decent job with the context and what I imagine they wanted to communicate.
phil294 4y ago
Awesome! I like this a lot. Recently, I've been attempting to create a global user style sheet that applies a reasonable set of nicely accessible rules to every website, essentially forcing buttons to look and behave like buttons, and to have a consistent theme across the internet. I started out by applying Window 95-like styles, and this is how it currently looks: https://waritschlager.de/share/0E7AB89CE86B1319A671D35EA2697C02.png https://waritschlager.de/share/0E7AB89CE86B1319A671D35EA2697... (background not changed to grey for now), not finished yet. Turns out, writing a global stylesheet is really difficult. For example, you cannot just "make all buttons grey": First of all, there are many different ways to identify a button. This is a subset of my current button matching rule: button, input[type=submit], input[type=button], a[class*="btn" i], a[class*="button" i], *[role=button], *[role=tab], *[role=menuitem], *[role=menuitemcheckbox], a:not([role=button] ...etc) > *:not(div ...etc) with the last one probably being the most important one next to `button`. ...and this still does not catch all, because you wouldn't believe how often web devs just take some div and put an onclick handler on it without making it accessible. Secondly, as soon as you overwrite the background color of all buttons, you will lose its background images which may be important. This happens way too often, also surrounding elements which actually have nothing to do with button semantics. So you need to apply a partially transparent background color. While it can still look perfect with the right tuning, it will then look horrible on non-white backgrounds. There are also way too many nested buttons and empty buttons out there, it all needs consideration. Finally, to detect a "pressed down" state, you'd normally use `aria-selected`, but barely anyone ever uses that, so it's back to matching class names `.active` and `.selected`, but then you also need to exclude `.inactive`, `.interactive`, `.deselected` and so on... My conclusion so far is that building a global style sheet is definitely possible, but can get ugly sometimes. And instead of hand-crafting my own styles, I can now integrate 98.css's ones, that's great :-) Also worth mentioning: A near-perfect win95 XFCE theme: https://github.com/grassmunk/Chicago95 https://github.com/grassmunk/Chicago95
rogual 4y ago
Beautiful and lovely. I dread every app update these days. What buttons will lose their edges? Which icons will become indistinguishable vector hieroglyhps? Will the menu bar inexplicably become all-caps? What new upsells and attention-sinks will be forced unturnoffably into my precious screen real-estate? This, though... you can see what things are. Buttons have edges. It's obvious at a glance what's editable and what's not. This is truly the UI of the future. I feel like, with a UI like this, the user could use the computer, not the other way around. I can't wait for the world to catch up. Minor bug report: The first row of buttons in the "Button" section make the rest of the page move down when clicked (Firefox/Mac). The other buttons are all fine though.
tt_dev 4y ago
This was pure joy to interact with
adriantiral 4y ago
kup0 4y ago
I love this and am glad to see it every time it is mentioned somewhere. It makes me long for the days when OS UIs were like this
muhammadusman 4y ago
This brought back a wave of nostalgia, thank you!
coldacid 4y ago
I kinda want a win31.css now, but those 16-bit combo boxes would be murder to pull off properly.

606 points by metadat 4y ago

Great work! What strikes me the most is how accessible the components are. So easy to make out the different states of each component at a glance. Would love to actually build something with this!

retrocryptid 4y ago

It's disturbing how much I love this. Also Licensed under a MIT license. Very Nice.

raydiatian 4y ago
Can Microsoft sue for something like this? Ethically I don’t think they should. But, can they?
- pmalynin 4y ago
  You can sue anyone for anything, this is America.
- massung 4y ago
  IANAL, but I think not. I think this because there have been a plethora of tools and libraries over the decades (think Tk, WxWidgets, and similar) that emulate the native look-and-feel of the OS and I believe a company has to defend it's IP/copyrights otherwise it implicitly loses the ability to do so in the future. See: https://www.varnumlaw.com/insights/enforce-your-intellectual-property-or-risk-losing-it/ https://www.varnumlaw.com/insights/enforce-your-intellectual... Consequently, this is why companies will so often be quick to "attack" random side projects people do targeting their IP (even very old IP). It isn't necessarily out of a malicious desire so much as a legal requirement. If they don't then a "serious" company can follow suit and then they have no ability to fight it. Edit: to be clear, obviously they _can_ sue.
  - chillfox 4y ago
    Trademark requires defense or it can be challenged. Copyright requires no such active defense to maintain and can be enforced selectively.

grenoire 4y ago

Honestly full-assed implementation. Font hinting is a bit odd with a green sheen on Firefox Win 10...

int_19h 4y ago
There are some minor discrepancies. Window titlebars weren't gradient in Win98 - that came in Win2k and WinME. The combobox dropdown has rounded ages (Win11 + Edge) and there's a gap between it and the textbox. The tree view has different widths for "+" and "-" on the nodes, and neither is properly aligned with the dotted lines of the tree. The biggest giveaway, though, is that you can drag to highlight text pretty much anywhere.
- Kranar 4y ago
  Windows 98 used a gradient for its title bar [1]: https://microsoft.fandom.com/wiki/Windows_98?file=W98-2.png https://microsoft.fandom.com/wiki/Windows_98?file=W98-2.png
  - int_19h 4y ago
    I must have misremembered, then; my apologies. Perhaps it was a Win98 vs Win98 SE difference?
    - gsich 4y ago
      Maybe it also required GPU drivers to be installed? I clearly remember the gradient bars.
      - int_19h 4y ago
        Win32 GUI wasn't composited until Vista, so it was all GDI 2D primitives rendered directly to the framebuffer. These could be accelerated, but I don't recall any case where some GDI feature would be unavailable if hardware didn't accelerate it - all primitives had software implementations, it just wouldn't be as fast. However, now that I think about it, such gradient bars must have required at least 16-bit color to work without dithering, so they were probably turned off by default for anything lower. And, at the time, budget video cards had limits on color depth in higher resolutions - e.g. for S3 Trio, if I remember correctly, you got a max of 24-bit color at 800x600, 16-bit at 1024x768, and 8-bit at 1280x1024; you could see the color depth combo box switch as you dragged the resolution slider. So I probably just ran it at 8-bit depth then.

alberth 4y ago

I give this a “10” on the UI usability scorecard.

clnq 4y ago
The UIs around the year 2001 were fantastically accessible. The recent obsession with flatness undid a lot of good practices.
- zozbot234 4y ago
  I like the SerenityOS design choices. Looks pretty much like a 2001-or-so UI, but adopting more modern design elements (such as, e.g. breadcrumb navigation widgets) where they actually make sense.
  - josephg 4y ago
    I adore the design language of Haiku / BeOS for the same reason.
    - spookie 4y ago
      Honestly, I wish I could make Haiku my daily OS. Not quite there yet though.
  - Aeolun 4y ago
    Yeah, ever since I saw SerenityOS I’ve wanted to make a CSS library like this for that UI.
tomxor 4y ago
Totally agree. Unix Motif, Windows 3/95/98, Classic MacOS... they were all highly usable. I crave the relentlessly, unashamed, unambiguousness of these old UIs, compared to modern UI which has devolved into something just as pretentious as the much hated skeuomorphism stage, only at the other end of the spectrum: extreme aesthetic minimalism at all cost (the user's cost).

pshirshov 4y ago

Cool. Does not support dark mode though.

girvo 4y ago
Honest question, because I don’t remember: does Windows 98? I know you could edit the theme around to set the UI scheme colours to a darker one, but as a kid I could never make it look nice
- MisterTea 4y ago
  I do remember a high contrast mode. Quite garish with white text on black background with bright blues and I think yellow and red too. I think this might be it: https://never-obsolete.tumblr.com/post/180144131029/high-contrast-1 https://never-obsolete.tumblr.com/post/180144131029/high-con... edit: yellow and red is from win 3.1's hotdog mode: https://blog.codinghorror.com/a-tribute-to-the-windows-31-hot-dog-stand-color-scheme/ https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...
  - metadat 4y ago
    Speaking of yellow and red .. don't forget the noteworthy and stunning specimen, HotDog Linux. https://hotdoglinux.com/ https://hotdoglinux.com/
- dec0dedab0de 4y ago
  There were preset themes. Some were dark.
  - girvo 4y ago
    They certainly weren’t really a “dark mode” in the modern usage though I thought, they had ridiculously high contrast still around parts of it? I don’t remember any of those dark presets being that dark either except for the High Contrast one — but this is going to drive me nuts all day now so I’m going to dig through a Win98 VM and see what I can find! If there’s one that’s a good fit, might be a fun pull request to write for this project :)

ranger_danger 4y ago

I wouldn't really call this "faithful", I have yet to see actual pixel-perfect recreations of any Windows UI in any form whatsoever, but I'd love to see one.

prezjordan 4y ago
I would
- metadat 4y ago
  ^ @prezjordan is the creator of 98.css, FYI :)
replwoacause 4y ago
I absolutely would. Not really sure what you’re on about.

whatwhatwhat_ 4y ago

why would anyone want to resurrect that terrible operating system? that’s the bar with which crappy software is measured against

ranger_danger 4y ago
nostalgia.
raydiatian 4y ago
I can imagine this making the internet a little less scary to some legacy users who are still working with ‘98 tech (you would be horrified at how many there are).
atoav 4y ago
Consider that for some people that terrible operating system might have been the first system the have ever used, maybe as a kid. I (an avid linux user who spends more time in the terminal than on a UI) certainly recall that my first contact with any computer with a keyboard was Windows 95. It was a complete mystery to me. The fascination that unexplainable object had on a 7 year old certainly had an effect on my life. And guess what I remember? That grey interface with the blue title bar. So as crappy as it might have been, as ethically unsound as the company who made it might have behaved themselves, the visual likeness of the system of my childhood tingles some old memories. And that is not even remotely odd. People can be nostalgic for literally everything, because we do not long for the old artifacts themselves, but for the feelings, friends and times we might have had when they were around. For some of us the grey windows of Microsofts operating system have gained symbolic value beyond the aesthetical or functional qualities inherent to the system itself.
- whatwhatwhat_ 4y ago
  Well alright, but I was tech support for many Windows 98 users back in the day and wow did I hate microsoft. It was such a ridiculous mess, like a house of cards. Fix one thing and another broke, cryptic dll packs when installed fixed some problems then needed patching again and again and again. And everyone blamed tech support. We were incompetent, the software came from god. fml I hate that os

ranger_danger 4y ago

https://github.com/andersevenrud/retro-css-shell-demo https://github.com/andersevenrud/retro-css-shell-demo https://github.com/arturbien/React95 https://github.com/arturbien/React95 https://github.com/botoxparty/XP.css https://github.com/botoxparty/XP.css https://github.com/Gioni06/terminal.css https://github.com/Gioni06/terminal.css https://github.com/jianzhongli/csswin10 https://github.com/jianzhongli/csswin10 https://github.com/khang-nd/7.css https://github.com/khang-nd/7.css https://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386 https://github.com/lachsfilet/Renkbench https://github.com/lachsfilet/Renkbench https://github.com/lolstring/window98-html-css-js https://github.com/lolstring/window98-html-css-js https://github.com/micah5/PSone.css https://github.com/micah5/PSone.css https://github.com/nostalgic-css/NES.css https://github.com/nostalgic-css/NES.css https://github.com/npjg/classic.css https://github.com/npjg/classic.css https://github.com/robbiebyrd/platinum https://github.com/robbiebyrd/platinum https://github.com/bryanbraun/after-dark-css https://github.com/bryanbraun/after-dark-css https://github.com/npjg/new-dawn https://github.com/npjg/new-dawn https://github.com/ritenv/retro-desktop https://github.com/ritenv/retro-desktop https://github.com/RoelN/c64css3 https://github.com/RoelN/c64css3 https://github.com/sakofchit/system.css https://github.com/sakofchit/system.css https://github.com/vinibiavatti1/TuiCss https://github.com/vinibiavatti1/TuiCss https://code.divshot.com/geo-bootstrap/ https://code.divshot.com/geo-bootstrap/

dhiggdyjkb 4y ago

does a similiar thing exist for old macos style?

MitPitt 4y ago

Also see XP and 7 versions: https://botoxparty.github.io/XP.css/ https://botoxparty.github.io/XP.css/ https://khang-nd.github.io/7.css/ https://khang-nd.github.io/7.css/

jw1224 4y ago
I’ve always been a Mac guy, but there’s no denying XP really stood the test of time.
- usrusr 4y ago
  I wanted to disagree, most likely because I'm one of the few who completely skipped XP jumping straight from 2000 to Vista. But I can't, turns out you are right, on that project page, in isolation, the elements actually do look good! Much better than what I think of when I think "XP" (mostly the task bar, start button and main window decorations I guess)
- wsc981 4y ago
  Well, I am a Mac guy as well, but I did use Windows quite a bit in the past (.NET dev) and I always much preferred the more "serious" aesthetic of Windows 2000 (very similar to 98) than the "toy" aesthetic of Windows XP.
- kgbcia 4y ago
  i liked macos 7/8/9 aesthetics. Windows 7 comes close.
warning26 4y ago
I'm a bit disappointed by the XP version's use of bitmaps for certain elements; it's completely possible to achieve the XP look purely with box-shadow properties.
pattle 4y ago
I built https://simulator.money https://simulator.money using this

panzi 4y ago

Very cool! I want a Windows 2000 version of it. I think that was the nicest looking Windows. It is very close to this, but with a slightly different main GUI color. Not a complete gray, but ever so slightly beige. Makes it more pleasant to the eye, IMO.

warning26 4y ago
Ideally it should support easy recoloring to match any of the exciting Windows classic themes! Hotdog Stand support when? Also, agree that Win2000's color scheme was the best looking iteration of the classic Windows look.
- Beltalowda 4y ago
  I'm still using the Windows 2000 background colour, #3a6ea5, on my dwm setup. It's perhaps a little bit sad that I can recite that from memory.
  - TeMPOraL 4y ago
    > It's perhaps a little bit sad that I can recite that from memory. No, it just tells a story of what you've been in to years ago. The color codes burned into my memory are: #aeaedd, #11ff11 and #dddd11. Who wants to guess where these came from?
    - panzi 4y ago
      Has the first one something to do with Sun Microsystems?
behnamoh 4y ago
I liked rounded corners on Windows XP. It was the only version of Windows that looked professional and nice at the same time. Windows 10's design is just bland. I don't know why MS went ahead with this soulless design for so many years after Windows 8 came to be. Windows 11 tries to be nicer but really it's just a fancy cover on legacy designs left over from since Windows 3.1.

tshaddox 4y ago

Did Windows 98 really have such laughably low contrast between text and that dark grey background?

quickthrower2 4y ago
Yes!
jeroenhd 4y ago
To give it some credit, CRTs handle such contrast quite differently to modern screen technologies. The CRT itself added a tiny bit of colour bleed and blurring and the fact the colour is radiated out (rather than filtered out, like on LCD based technologies) gave it more contrast than you'd think looking at these colours now.
- marmetio 4y ago
  Is it possible to reproduce that effect on an LCD to restore the original contrast?
- crazygringo 4y ago
  - matsemann 4y ago
    WCAG defines different contrast rules for different font sizes. Thus "colors are colors" is not strictly true when it comes to evaluating contrast. On an old CRT, this elements were probably huge (measured in centimeters) compared to how I look at them on my 4k screen now. And that matters when talking about contrast.
    - crazygringo 4y ago
      No, elements were not "huge" on old CRT's. That's just a fact. Absolute text sizes have remained approximately the same. Have you ever used one? Nothing has changed in terms of information density that would lead to higher contrast now being required. To the contrary -- increased sharpness means you might be able to get away with lower density.

prezjordan 4y ago

Hey HN - author here. This was my burnout recovery project in April of 2020. Very much a labor of love and a surprising way to realize I still liked programming. I wrote some scattered thoughts here [0] I also "run" this project quite differently than I usually do - when I receive a pull request instead of merging it I do a quick glance through the user's github to make sure they're not a spammer before giving them _commit access_ and asking them to merge their own PR [1]. It has worked wonders. [0]: https://notes.jordanscales.com/ffa53b57 https://notes.jordanscales.com/ffa53b57 [1]: https://twitter.com/jdan/status/1528026508564078593 https://twitter.com/jdan/status/1528026508564078593

RichardCNormos 4y ago
azlyrics 4y ago
very fun stuff...just wanted to share this i found the win 98 there is using css and js. experiments thats aimed at fun is always welcome https://twitter.com/PCBANGio/status/1493850712471527426 https://twitter.com/PCBANGio/status/1493850712471527426
masswerk 4y ago
> This was my burnout recovery project in April of 2020. OS UI projects are actually good for this. Back in the day, when Classic Mac OS was customizable thanks to its Theme Manager, I went through a few Kaleidoscope schemes for the same reason. Very therapeutical. Well done!
- themoonisachees 4y ago
  Strongly agree. Theming in general is a fantastic way to do what you're good at (code and design) but have more agency than "write a test and code that passes it". My goto used to be 3DS home screen themes.
smusamashah 4y ago
I made Obsidian's windows 98 ui theme (now almost defunct with UI overhaul) with help of this.

hnthrowaway0315 4y ago

Cool! Wish we can do this easily with QT in Win10.

deleted 4y ago

[deleted]

Etesam 4y ago

I created a browser extension using this library! https://chrome.google.com/webstore/detail/xp-newtab/ncfmlogaelpnniflgipmnnglhfiifkke https://chrome.google.com/webstore/detail/xp-newtab/ncfmloga... https://addons.mozilla.org/en-US/firefox/addon/xp-newtab/ https://addons.mozilla.org/en-US/firefox/addon/xp-newtab/

slim 4y ago

a lot of justified praise for win95/98 ui every time it comes up. but I would like to hear criticism if possible. anyone?

jeroenhd 4y ago
Plenty of criticism to be found about Win95/98. The control panel and menus upon menus upon menus were not very user friendly. The design was built around low-res CRT screens, which very negatively affects modern screens. Hitboxes were often small, especially for the mice at the time. Commonly used UI elements such as the start menu lacked tons of features we take for granted now (searching in the start menu, for example). Icons were low-res and not always clear, though they were made excellently with more care than any other facet of any modern piece of software I can think of. Navigation controls were severely limited, simple things like breadcrumb navigation simply wasn't invented yet. Windows XP fixed a lot of small issues found in the Win9x/Win2k UI styling. It had its own problems, but going back to the 9x days is not always an improvement. It says a lot that I find the 9x style so much easier to use than the "modern" flat designs. It's like we're back in the middle of DOS text characters all over again, having UI elements execute actions after you've guessed about what they might do. As for a modern take on old ideals, the SerenityOS design is an amazing combination of Win9x/Win2k ideas and modern controls. ReactOS is also used to have a new take on the old style, but that has been modernized to Win10-like menu bars in recent releases.
- anthk 4y ago
  Did you actually use w9x at 800x600 or 1024x768? It was perfectly fine.

masswerk 4y ago

Very nice and very clean! And I love the demo page. May deserve an update for styled pop-up menus, which became available recently, compare [1]. (Minor nitpick: I'm missing the combo box, the much discussed genuine UI element of Windows. – Have a look at datalists for input elements.) [1] https://web.dev/state-of-css-2022/#customizing-select-elements https://web.dev/state-of-css-2022/#customizing-select-elemen...

mook 4y ago
Hmm, am I misparsing the documentation? As far as I can tell from that link,<selectmenu> is actually not yet generally available. (It's also nowhere on MDN.) I was all excited about using it…
- 8n4vidtmkvmk 4y ago
  <selectmenu> is available in Chromium-based browsers and requires a Canary version as well as the Experimental Web Platform features flag to be enabled in about:flags.
- lelandfe 4y ago
  My pet theory is that web.dev exists to raise hype around wildly experimental features and thus put pressure on other browser vendors to implement them.
lelandfe 4y ago
> styled pop-up menus, which became available recently It is not available in any mainline browser to my knowledge. It's still under development, and requires a flag to be set to use: https://open-ui.org/prototypes/selectmenu https://open-ui.org/prototypes/selectmenu
- masswerk 4y ago
  I think, we'll see broader support soon. It's probably worth waiting, since it's a better solution than any homegrown code, regarding accessibility and overall robustness. (Worst case, you just lose some styling.)

nickjj 4y ago

That was a nice touch to include the gradient title bar. I always thought that was a fun feature. Too bad they removed it with Windows 10 / 11 by default.

puttycat 4y ago

Beautiful. It’s crazy to see this and realize how much current Windows is unusable. I haven’t used Windows in ~10 years and every time I see the current interface I can’t believe someone is able to use it without losing their mind.

gernb 4y ago
Just curious but in what ways? Me, I used Windows for years until ~2008. In 2008 I started using both Mac and Windows. In 2010 I started using Linux, Mac, and Windows. I never really found one better than another. Each one had their strengths, none of them had huge UI issue for me at least. For example, one plus I find on Windows vs MacOS is I use Chrome with multiple profiles. Windows is able to display an icon per profile in the dock. Mac is not (not idea if this is a limitation of MacOS or Chrome on MacOS) Another plus I find on Windows is zip support is better. On Mac, to use a zip you double click it and the OS uncompresses the zip. On Windows you double click it and Windows Explorer just looks inside the zip like it's a folder. You can directly copy and paste, or drag and drop, files out of the zip into other folders or apps, no need to first unzip it. I'm not saying Windows is better, just different. Windows 11 cleaned some things up. Explorer is streamlined compared to 10 for example. Plenty of things I like on Mac, like Terminal with bash or zsh vs Powershell on Windows (though I can run WSL but for actual windows stuff I usually stick to powershell). Airplay I use often to stream to my TV.
- kreativ_py 4y ago
  For me the taskbar in W11 is a giant step back, all windows are collapsed into a group. No idea why they removed the ability to keep them expanded other than trying to mimic the look of OSX
  - daveoc64 4y ago
    That's been the default since Windows 7 though. Most people have been using the taskbar that way for nearly 15 years, only a minority of people would have switched away from the default.
  - 4y ago

api 4y ago

I wish there were more CSS templates for doing native-looking interfaces for popular current OSes. I always look and come up empty.

andirk 4y ago

Can we also get a Windows Vista version? That was the BEST Windows ever! I liked it so much!

ammo1662 4y ago
There is a Windows 7 version mentioned above. https://khang-nd.github.io/7.css https://khang-nd.github.io/7.css
Aeolun 4y ago
Either this is some sarcasm, or this is the first time I found anyone that liked Vista.
- tralarpa 4y ago
  It ran on one of my laptops for many years without any problems. One strange thing: that laptop seemed to have a rare chipset and Vista was the only OS that came with the correct drivers for power management. I spent several weeks in vain trying to persuade other operating systems (tried old and new versions of Windows and Linux, various drivers and configuration hacks) not to turn the thing into a heater even at 0% CPU load. Pretty sad. The hardware is still fully functional.

ilaksh 4y ago

Is there something like this for like mid-90s Unix X-Windows or something along those lines?

nielssp 4y ago
Not sure if this is what you're looking for, but I made this based on the look of CDE: https://nielssp.github.io/classic-stylesheets/?theme=cde&skin=default https://nielssp.github.io/classic-stylesheets/?theme=cde&ski... It also includes all the default color schemes.
- ilaksh 4y ago
  Yes thank you!!

vbezhenar 4y ago

When I click one of the "Click me", "Submit", "Preset" buttons in Components/Button section, entire page jumps with 1 pixel. Looks bad. Checkbox labels text is selectable. Should not happen in UI. Same about title bars. Title bars also do not set cursor: pointer. Also happens in some other components. Dropdown contents have wrong colors. I think they use default browser styling or something like that. Those are minor nitpicks, of course. This style is very nostalgic, thanks for making it. I thought about using this kind of UI for some web app, I think I'll reimplement it myself (because that's the fun), but I'll keep this style in mind.

jacob019 4y ago
Better to contribute.

david2ndaccount 4y ago

Re: labels with inputs Isn’t it better to put the input inside the label tag so you avoid the awkward dead zone between the checkbox and the label text?

lbruno 4y ago

thanks for this i have moaned very hard re: the flat / glassy UIs of today, and i deeply loathe how newer folks have no respect for maintaining a working tab-order good grief, losing the reliability of pressing tab and focus going to where i wanted it? really got me

TazeTSchnitzel 4y ago

I've previously attempted this for Windows 95. I tried very hard to be pixel-accurate. https://hikari.noyu.me/demos/ https://hikari.noyu.me/demos/ shows off a bit of what I achieved, but alas it lacks most of the UI elements. I learned some interesting things from the process. The biggest one for me is that web browsers have only one kind of focus, but Windows has two, a dotted line on the inside (element affected by space bar) and a black outline (element affected by return key). You therefore can't get exactly the same UI in a browser without adding some JS to simulate this second type of focus.

winrid 4y ago

Some part of me wants to launch a serious enterprise-type product but use this for the admin dashboard.

jp1016 4y ago

This really brings out the old memories. i have seen this post long back on hn and incorporated your 98css theme on to my side project which generates code screenshots. if you want to check it out go to https://codekeep.io/screenshot https://codekeep.io/screenshot and select Windows 98

nielssp 4y ago

Tiny nitpick – buttons don't look like that when pressed in Windows 98 (or any version of Windows for that matter). This is what they're supposed to look like: https://imgur.com/a/iFMJCER https://imgur.com/a/iFMJCER (98.css on top, Windows 98 below) As far as I'm aware, the only buttons that look like that when pressed are the Start menu button and taskbar buttons. Similarly, buttons are supposed to have a black border in addition to the dotted outline when they're focused.

orthoxerox 4y ago
I think the thick black border marks the "default dialog button", not focus.
- nielssp 4y ago
  It does both. Black border alone marks the default button in the dialog (unless another button is focused), black border + dotted outline marks focus. I double checked in a VM running Windows 98 earlier today. I suspect some of these 9x recreations are based solely on screenshots, in which details like active and focus states are not obvious.
  - quietbritishjim 4y ago
    To put it another way: * Thick black border indicates which button would be pressed if you hit enter. This is the focused button, or the default button if no button currently has focus. * Dashed border indicates which button or other control currently has focus; this button is pressed if you hit space (but if another control has focus then space does not press the default button).
prezjordan 4y ago
Good catch - You can probably tell which parts I took from Microsoft Windows User Experience [0] and which I built while eyeing my VM. Unsure why there's a discrepancy. You're probably right re: taskbar buttons. https://i.imgur.com/dxOYj2Y.png https://i.imgur.com/dxOYj2Y.png https://i.imgur.com/X3DJ50T.png https://i.imgur.com/X3DJ50T.png [0] https://www.amazon.com/Microsoft-Windows-Experience-Professional-Editions/dp/0735605661 https://www.amazon.com/Microsoft-Windows-Experience-Professi...

iamtedd 4y ago

Suggestion: The "Show code" links should be a button.

amfan 4y ago

Pretty cool. I love those old UI's. I once tried rebuilding a functional Windows 3.11 with pure CSS and Vue components. Sadly the used Vue version is kinda outdated by now and I am not sure if I want to spent time updating it all... https://github.com/sleepybuildings/vuedows https://github.com/sleepybuildings/vuedows

ycuser2 4y ago

An important nuance for me in "classic" 3D styles is wether the font in a button get sunken when I click it. It adds much "feel" for me.

distcs 4y ago

This is wonderful work. One little issue I noticed is that when I click on Cick me, Submit or Reset button the rest of the page below shifts a little down. The page resets to normal when I release the button. Reproducible on Chrome on mac. Does anyone else notice this? Not sure if this is an issue with the CSS or the page layout.

qwerty456127 4y ago

Doesn't seem faithful enough. Windows 98 UIs looked better than this and didn't use green text.

eternityforest 4y ago

Just beautiful. Even after all these years Microsoft's UI paradigm is still pretty much what I think a computer should look like. Sure we have new visual styles and high resolution now, but the core design language is still pretty much the same. It's really hard to improve on it. Even on mobile it just works. Most of the attempts at more modern newer things feel unpredictable, or very limited, or they hide everything behind shortcuts and gestures and are near unusable unless you use the program all day every day and know everything. Android is pretty good, maybe my favorite os to use, but a lot of the best parts are similar to this just adapted for touch.

dkjaudyeqooe 4y ago
Win 98's UI isn't very pretty (IMHO) but at least it's spare and relatively clean. Also it doesn't take a lot of resources to render. Compare with MS's more recent efforts. Personally I'm clinging to macOS 10.14 for as long as I can. More recent iterations have very much lost their way.
- eternityforest 4y ago
  Aesthetically it's a bit vintage for non-nostalgia purposes, but IMHO the issues are purely things like fonts and colors and rounding, layout and behavior is excellent. I'm not sure I could make it look any better. It's a pretty nice theme considering it was meant for VGA and seems to have been designed around a more limited set of colors. Plus you'd be seeing it on a beige monitor with a wide bezel, with a full size beige keyboard, likely on a desk that also had a note pad, pens, and stationary. I'm guessing it also was meant to look somewhat obviously techno rather than the appliancelike looks of new stuff, because the fact that computers existed was a big deal and they probably wanted to highlight that. I think they did a decent job with the context and what I imagine they wanted to communicate.

phil294 4y ago

Awesome! I like this a lot. Recently, I've been attempting to create a global user style sheet that applies a reasonable set of nicely accessible rules to every website, essentially forcing buttons to look and behave like buttons, and to have a consistent theme across the internet. I started out by applying Window 95-like styles, and this is how it currently looks: https://waritschlager.de/share/0E7AB89CE86B1319A671D35EA2697C02.png https://waritschlager.de/share/0E7AB89CE86B1319A671D35EA2697... (background not changed to grey for now), not finished yet. Turns out, writing a global stylesheet is really difficult. For example, you cannot just "make all buttons grey": First of all, there are many different ways to identify a button. This is a subset of my current button matching rule: button, input[type=submit], input[type=button], a[class*="btn" i], a[class*="button" i], *[role=button], *[role=tab], *[role=menuitem], *[role=menuitemcheckbox], a:not([role=button] ...etc) > *:not(div ...etc) with the last one probably being the most important one next to `button`. ...and this still does not catch all, because you wouldn't believe how often web devs just take some div and put an onclick handler on it without making it accessible. Secondly, as soon as you overwrite the background color of all buttons, you will lose its background images which may be important. This happens way too often, also surrounding elements which actually have nothing to do with button semantics. So you need to apply a partially transparent background color. While it can still look perfect with the right tuning, it will then look horrible on non-white backgrounds. There are also way too many nested buttons and empty buttons out there, it all needs consideration. Finally, to detect a "pressed down" state, you'd normally use `aria-selected`, but barely anyone ever uses that, so it's back to matching class names `.active` and `.selected`, but then you also need to exclude `.inactive`, `.interactive`, `.deselected` and so on... My conclusion so far is that building a global style sheet is definitely possible, but can get ugly sometimes. And instead of hand-crafting my own styles, I can now integrate 98.css's ones, that's great :-) Also worth mentioning: A near-perfect win95 XFCE theme: https://github.com/grassmunk/Chicago95 https://github.com/grassmunk/Chicago95

rogual 4y ago

Beautiful and lovely. I dread every app update these days. What buttons will lose their edges? Which icons will become indistinguishable vector hieroglyhps? Will the menu bar inexplicably become all-caps? What new upsells and attention-sinks will be forced unturnoffably into my precious screen real-estate? This, though... you can see what things are. Buttons have edges. It's obvious at a glance what's editable and what's not. This is truly the UI of the future. I feel like, with a UI like this, the user could use the computer, not the other way around. I can't wait for the world to catch up. Minor bug report: The first row of buttons in the "Button" section make the rest of the page move down when clicked (Firefox/Mac). The other buttons are all fine though.

tt_dev 4y ago

This was pure joy to interact with

adriantiral 4y ago

kup0 4y ago

I love this and am glad to see it every time it is mentioned somewhere. It makes me long for the days when OS UIs were like this

muhammadusman 4y ago

This brought back a wave of nostalgia, thank you!

coldacid 4y ago

I kinda want a win31.css now, but those 16-bit combo boxes would be murder to pull off properly.