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

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

by metadat • 4 years ago

606 174 4 years ago

jdan.github.io

retrocryptid• 4 years ago

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

raydiatian3• 4 years ago

Can Microsoft sue for something like this? Ethically I don’t think they should. But, can they?

pmalynin• 4 years ago

You can sue anyone for anything, this is America.

massung• 4 years 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...

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.

grenoire• 4 years ago

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

int_19h4• 4 years 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• 4 years ago

Windows 98 used a gradient for its title bar [1]:

https://microsoft.fandom.com/wiki/Windows_98?file=W98-2.png

Raicuparta• 4 years ago

Styling drop-down contents in most modern browsers os either very limited or impossible. That's why so many UI frameworks reimplement them from scratch, usually with the help of JavaScript

chungy• 4 years ago

Windows 95 lacked titlebar gradients. Windows 98 introduced them.

claudiawerner• 4 years ago

I noticed that too! I wonder what's happening there. I searched the CSS and there's nothing like green in there... Anyone have clues as to what's causing the text within textboxes and such to be green?

jeroenhd3• 4 years ago

My guess is subpixel rendering. The single pixel lines ending up halfway across a pixel, activating more green than it intended to do.

This fix (https://stackoverflow.com/a/22925525) removes the green shine despite being prefixed with -webkit. It's not longer a pixel-perfect match with Windows 98, though, so CRT users may notice the difference!

alberth• 4 years ago

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

tomxor• 4 years 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).

duskwuff2• 4 years ago

Classic Mac OS in what era?

The System 7 UI toolkit was underdeveloped, and forced a lot of applications to roll their own controls (with mixed success). The System 8 "Platinum" appearance mostly resolved that, though; I'd point to that as an excellent design for the era.

clnq• 4 years ago

The UIs around the year 2001 were fantastically accessible. The recent obsession with flatness undid a lot of good practices.

zozbot234• 4 years 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.

pshirshov• 4 years ago

Cool. Does not support dark mode though.

girvo3• 4 years 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

dec0dedab0de• 4 years ago

There were preset themes. Some were dark.

MisterTea• 4 years 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-con...

edit: yellow and red is from win 3.1's hotdog mode: https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho...

wishfish4• 4 years ago

You could come close to a proper dark mode, but would fall short. That's with using the color scheme editor in the control panels. I wasted too much time back in '98 trying to make a proper dark mode. Not that we called it that back then.

The downfall was a type of text (body text?) which used the same color as the titlebar. It couldn't be independently set. Was a bit frustrating back then.

There were the high contrast modes back then, but they were too ugly to use unless you needed the contrast.

laserdancepony• 4 years ago

There was no dark mode fad in 1998. Different color schemes for visually impaired people existed, but they were most often not very aesthetic.

ranger_danger4• 4 years ago

it's not a fad.

rietta• 4 years ago

I remember Encarta being darkmode in 98. Maybe some of the MSN stuff too. Even painted their own titlebars differently.

wishfish4• 4 years ago

You are correct. There was no OOTB dark mode in 1998. I remember it well because I wasted some time every now and then trying to make one using the appearance control panel. It was frustrating because I could come very close to a universal dark mode. But I remember certain types of text couldn't have their color independently set. One of them (body text? can't remember) used the same color as title bars. Which would make it unusable in a proper dark mode.

I guess I was slightly ahead of my time in wanting system wide dark mode. XP with the theming hacks made me very happy.

raydiatian3• 4 years ago

DarkReader extension (available on all browsers) makes everything have DarkMode. Unless you’re visiting a website designed by <canvas /> loving sadists, then you’ll need a welding helmet.

whatwhatwhat_2• 4 years ago

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

ranger_danger4• 4 years ago

nostalgia.

raydiatian3• 4 years 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).

atoav2• 4 years 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_2• 4 years 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

chillfox3• 4 years ago

First computer I used was running Dos and Windows 3.1.

But my favorite Windows version is XP, I was doing service desk / junior sysadmin at the time and XP was just so easy to work with. You could fix a lot of problems by simply editing the registry or files in the windows folder directly and you could re-image a machine in about 2 minutes. The control panel was really easy to navigate and consistent.

I really wish XP was still supported.

int_19h4• 4 years ago

When it comes to look and feel specifically, these days it's not rare for websites and even apps to use styling such that it's impossible to tell a link from a label, and either from a button - everything is flat, and color differences are often deliberately minimal. That was not a problem in Win98 days.

masswerk5• 4 years ago

I was never a Windows guy, even less then, but you just have to love this demo page.

userbinator• 4 years ago

If you think the Win9x UI was terrible, have you seen what passes for "design" these days...?

ranger_danger4• 4 years 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.

prezjordan4• 4 years ago

I would

metadat2• 4 years ago

^ @prezjordan is the creator of 98.css, FYI :)

replwoacause• 4 years ago

I absolutely would. Not really sure what you’re on about.

ranger_danger4• 4 years ago

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/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/

dhiggdyjkb• 4 years ago

does a similiar thing exist for old macos style?

MitPitt• 4 years ago

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

jw1224• 4 years ago

I’ve always been a Mac guy, but there’s no denying XP really stood the test of time.

usrusr• 4 years 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)

wsc9812• 4 years 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• 4 years ago

i liked macos 7/8/9 aesthetics. Windows 7 comes close.

warning264• 4 years 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• 4 years ago

I built https://simulator.money using this

panzi4• 4 years 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.

warning264• 4 years 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• 4 years 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.

behnamoh• 4 years 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.

byw• 4 years ago

I don't know why MS went ahead with this soulless design for so many years after Windows 8 came to be.

My guess is they need it to feel different enough to justify the price tag of a major upgrade.

In reality the changes behind the scene since Windows 7 have been incremental.

warning264• 4 years ago

I liked rounded corners on Windows XP. It was the only version of Windows that looked professional and nice at the same time.

It's interesting you say that, since I remember back at the time XP was released, so many people complained about how Windows XP had a "Fisher Price" UI that was distinctly non-professional. (Personally, I always liked XP's look.)

iforgotpassword5• 4 years ago

Now that's a first to me. Like other commenters said, I also think there was nothing nice about Windows XP's theme. It looked clunky and childish. I mean, I know some people who liked it, but never have I heard anyone refer to it as professional looking.

tshaddox2• 4 years ago

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

quickthrower2• 4 years ago

Yes!

jeroenhd3• 4 years 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• 4 years ago

Is it possible to reproduce that effect on an LCD to restore the original contrast?

crazygringo• 4 years ago

Yes and no?

I mean yes it was black text (0, 0, 0) against light gray background (192, 192, 192) as shown here.

But there's no universe in which that is "laughably low contrast". It's a full three-quarters of maximum contrast (not accounting for gamma). In fact, the WebAIM contrast checker says that's a contrast ratio of 11.54:1 which far surpasses even the AAA standard of 7:1 [1].

So not really sure what you're talking about.

Also, this was only for UX elements in things like dialogs and toolbars. Obviously content areas like inside a text editor were against a white background.

[1] https://webaim.org/resources/contrastchecker/

tshaddox2• 4 years ago

It does pass the old WebAIM contrast test, although that test doesn't consider font size or font weight.

The proposed WCAG 3 contrast test, the Advanced Perceptual Contrast Algorithm, does consider font size and font weight. If I'm reading this correctly, the minimum recommended font size for normal 400 font weight with these colors is 16.75px, and the 11px seen in this 98.css demo is indeed laughably small: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=222222&DEV=G4g&BU...

That said, what I was referring to primarily was the blue text color (#007AFF) against that grey background color (#dfdfdf), but reviewing that now it appears that blue text color is the default button color in iOS Safari, and likely not the intention of the 98.css authors. I'm only seeing this blue color in iOS Safari, so it likely merely indicates some CSS bug somewhere between 98.css and iOS Safari. But for reference, this blue color scores a dreadful 3:1 on the old WebAIM contrast test, and according this this APCA Contrast Calculator is only suitable for 400 font weight at 37px font size: https://www.myndex.com/APCA/?BG=dfdfdf&TXT=007aff&DEV=G4g&BU...

prezjordan4• 4 years 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

[1] https://twitter.com/jdan/status/1528026508564078593

azlyrics• 4 years 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

masswerk5• 4 years 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• 4 years 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• 4 years ago

I made Obsidian's windows 98 ui theme (now almost defunct with UI overhaul) with help of this.

temporallobe• 4 years ago

This is awesome that it was so therapeutic to you! I have several such personal projects that I occasionally work on for similar reasons, moreover to experience the joy of pure programming as opposed to the daily BS I deal with.

One critique (more of a suggested improvement) - the dropdown boxes don’t look/behave as they did in Win 98. They actually render as native select tags on my browser when focused and it kind of breaks the immersion. I’m pretty sure implementing this to simulate the 98 version would be a bit difficult and would involve some JavaScript (which I know you want to avoid), but it may be a neat challenge to tinker with.

jacob0193• 4 years ago

Sounds like you want that commit access.

ctxc• 4 years ago

Can you elaborate, what's it supposed to behave like?

mysterydip• 4 years ago

Seeing the "hello world from VB4" brought back many fond memories. Definitely integrating this into some projects!

tux• 4 years ago

Very nice thank you for sharing this.

dt3ft• 4 years ago

Nice touch with the cowbell slider ;)

jks• 4 years ago

Sounds like the optimistic merging principle of the late Pieter Hintjens: http://hintjens.com/blog:106

nashashmi• 4 years ago

Were there times you felt like you were wasting your time when doing this project?

prezjordan4• 4 years ago

No - I tend to not take myself too seriously and was very much optimizing for smiles over "usefulness" or "github stars" so it was a self-fulfilling prophecy.

Gordonjcp• 4 years ago

I don't know what I'm going to do with it, but I'm going to do *something* with it.

hnthrowaway0315• 4 years ago

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

Etesam• 4 years ago

I created a browser extension using this library! https://chrome.google.com/webstore/detail/xp-newtab/ncfmloga...

https://addons.mozilla.org/en-US/firefox/addon/xp-newtab/

slim• 4 years 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?

jeroenhd3• 4 years 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• 4 years ago

Did you actually use w9x at 800x600 or 1024x768? It was perfectly fine.

masswerk5• 4 years 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-elemen...

mook• 4 years 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…

8n4vidtmkvmk2• 4 years 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.

lelandfe3• 4 years 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.

lelandfe3• 4 years 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

masswerk5• 4 years 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• 4 years 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• 4 years 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• 4 years 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• 4 years 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

jacob0193• 4 years ago

My favorite part of Windows is how it likes to add new features and demand my attention. And constantly use tons of cycles on VMs that aren't doing any work. And the bifurcated GUI configuration.

leidenfrost• 4 years ago

MacOS desktop feels weird after years of using gnome2, gnome3 and Kde as dsily driver.

Some things are a dream come true in terms of utility. Others feel really archaic compared to FOSS desktops.

rollcat• 4 years ago

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)

I have a strong feeling that this is Chrome's limitation. The builtin Activity Monitor on macOS can even plot a realtime graph of CPU usage in the dock icon, and various other apps (including third party) are able to alter their own icon as well, so this doesn't look like a private API. Having two separate instances of an app in the dock is achievable with minimal hackery (I managed to do this a couple of times by accident, just by poking at and exploring the system).

Of course nothing helps if the app doesn't want to go the extra mile to integrate with the platform, which is how we keep ending up with the lowest common denominators for everything.

buryat• 4 years ago

if you havent used in 10 years how can you judge the usability objectively?

cube002• 4 years ago

I'll take it over the current slow WPF mess.

ripley122• 4 years ago

What WPF mess are you talking about? Aside from Visual Studio, I can't think of many first-party GUIs that are written in WPF.

Aeolun3• 4 years ago

I have more or less this theme on my linux installation. It’s both nostalgic and very useable. Just need a slight update for high dpi, since the buttons are a tad hard to click.

Karupan• 4 years 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!

api• 4 years 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• 4 years ago

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

ammo1662• 4 years ago

There is a Windows 7 version mentioned above.

https://khang-nd.github.io/7.css

Aeolun3• 4 years ago

Either this is some sarcasm, or this is the first time I found anyone that liked Vista.

tralarpa• 4 years 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.

ilaksh2• 4 years ago

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

nielssp3• 4 years 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&ski... It also includes all the default color schemes.

ilaksh2• 4 years ago

Yes thank you!!

vbezhenar• 4 years 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.

jacob0193• 4 years ago

Better to contribute.

david2ndaccount• 4 years 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• 4 years 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• 4 years ago

I've previously attempted this for Windows 95. I tried very hard to be pixel-accurate. 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• 4 years ago

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

jp1016• 4 years 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 and select Windows 98

nielssp3• 4 years 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 (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• 4 years ago

I think the thick black border marks the "default dialog button", not focus.

nielssp3• 4 years 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.

prezjordan4• 4 years 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/X3DJ50T.png

[0] https://www.amazon.com/Microsoft-Windows-Experience-Professi...

xyzzy_plugh• 4 years ago

Probably a design bug in win98! I love that you used the book as reference. Incredible stuff.

iamtedd• 4 years ago

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

amfan• 4 years 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

ycuser2• 4 years 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• 4 years 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• 4 years ago

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

eternityforest2• 4 years 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• 4 years 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.

eternityforest2• 4 years 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• 4 years 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/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

rogual• 4 years 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• 4 years ago

This was pure joy to interact with

kup0• 4 years 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• 4 years ago

This brought back a wave of nostalgia, thank you!

coldacid• 4 years ago

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

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

Related Stories