I was building an electron AIM clone a few years ago (that ran over IRC) and used some of the CSS I wrote for the buttons in 98.css. (Never finished the AIM clone)
Also really wanted to make a music player (maybe just a frontend for Spotify?) that resembled Kazaa/Limewire. All that to say - whoever does use this in electron has my full support.
Wow all these are just amazing. The time and effort - not to mention attention to detail - these individuals have is mind blowing.
But this just gets me wondering. Why can't I find any css framework that emulates like windows 10 UI or the current macOS? Is it just the nostalgia aspect that pushes someone to create something like this? Or people just don't find todays OS's emulate-worthy?
Perhaps there are other problems if you try to make the appearance too much like something still in wide use? For example, companies may believe they own trademarks or copyright over the design elements, and be more motivated to enforce them. Also, browser vendors or Google might perceive that such a design is trying to fool users and treat any content using it as malicious. I don't know whether they do this; just speculating.
They're both Windows but are based on entirely different kernels. Windows 98 is DOS based and Windows 2000 is NT based. Some software runs on both thanks to compatibility layers.
Ah, and I also remembered that 2000 loved header panels at top of windows, with white background and a little artwork in them. This also worked to make the interface considerably brighter than in 98.
Microsoft seemed to have a better understand of UX design back then. I'm not saying it's prettier, it's not, but it seemed more consistent across the operating system.
Windows 2000 was much more stable being based on a different NT-based kernel.
Which meant you couldn't play many Windows games on Win2K - I remember that Quake 3 was the only game which would run without issues. Other games either required some configuration, or simply wouldn't run.
I hear that comment a lot but I used Windows 2000 for gaming and I seldom ran into issues with Windows games. DOS games were a problem but that was predictably so given the lack of DOS on NT. If anything, Windows games generally ran better on Windows 2000, but for reasons I'll go into later...
The interesting thing about Quake 3 was that it's engine supported SMP which Windows 9x obviously wouldn't so Quake 3 must have been designed with workstation-class desktops in mind (I guess that makes some sense when you think that some of Id's earlier games were written on NeXT hardware and then ported to PCs).
At the time I ran an Abit BP6, it had dual Celeron IIs overclocked from 500MHz to > 700MHz. I think I got them as high as 900MHz once but the system as hugely unstable. I also had a bunch of BIOS optimisations for gaming too. It was an awesome motherboard in an era long before dual core processors were a thing. And surprisingly games actually ran better on Windows 2000 than they would if I'd dual boot into Windows 95. My suspicion was that while most games were still single threaded, NT would schedule the heavy process on one CPU while running all the background OS tasks on the other CPU. Thus giving the game a little extra overhead that wouldn't have been there on Windows 95 due to everything running on the same CPU.
I do miss that computer. It lasted far longer than Moores law should have allowed and it was probably the last computer I've owned where I could boast about understanding pretty much everything about it from the ground up (the chipsets, BIOS options, pins on the motherboard, bootloaders, software loaded, etc...every system since has been just that little bit too complicated that there's been some chip inside or background process that I've not understood).
You just dredged up memories of trying to run Thief: The Dark Project on Win2k and the installer failing, until I found an obscure forum post saying I should just run the installer with the "-lgntforce" flag. Dear god, the stability gained from running on a sane OS! On Win98 on the same hardware I was forced to save early and often or risk losing hours of patient sneaking and hiding when the OS inevitably borked out.
Hey, if anyone at Microsoft is lurking here, the custom cursor on this theme doesn’t[0] scale properly according to the user’s EoA setting in Windows 10.
I tried to reach out a few times last year to get someone to fix the affected API[1], or to tell me a suitable replacement so I could patch Blink and Gecko[2][3], and had no luck.
If you could look into this, and maybe let me know what to do or what is going on, I would be grateful. Thanks!
[0] Probably; I don’t run Windows so I don’t have an fully up-to-date version to check right now, but nobody told me it was fixed, so I assume it is still broken.
I usually hate HN nitpicking like this but I have to agree. The author could have called it 8bit.css instead of NES.css because the NES was a specific thing that had specific colors and style.
The NES is a dark palette, with often games just having a single colour background and a few sprites here and there.
At least is how I remember those games.
There isn't really a default "feel" for the NES. Different games would have their own distinct style. The key thing about this CSS framework is that it looks "8-bit" and fun, both of which are true of the NES; rather than it being a literal port of the NES look and feel to CSS.
Names are seldom meant to be taken literally but the fact that people are comparing this to a literal Nintendo Entertainment System seems to me that at least the name here is good enough in conjuring peoples expectations otherwise it wouldn't be possible to make that literal comparison in the first place.
"Names are seldom meant to be taken literally but the fact that people are comparing this to a literal Nintendo Entertainment System seems to me that at least the name here is good enough in conjuring peoples expectations otherwise it wouldn't be possible to make that literal comparison in the first place."
People are only making the comparison because it's in the name. They're making the comparison and finding it turns out far short of their expectations. If it wasn't called NES.css, people wouldn't bothering comparing it to the NES, and they certainly wouldn't complain that it doesn't look like NES because the name wouldn't have implied it. So it's a bad name.
I think a big part of the feel of NES is that there's only certain colours that are valid. And that palettes are limited in size so too many colours at the same time breaks that feel.
The NES had a 54 colour pallet with up to 25 colours on screen (without mid-refresh pallet swapping, a technique some games employed to access more colours). By contrast NES.css uses 12 distinct colours. So how exactly is NES.css breaking "that feel"?
The biggest issue I complaint I could make about NES.css is that it's type face has a weird ligature with "fi" which is somewhat distracting from the rest of the text. But even that is forgivable considering this isn't a serious project. And before the obvious comments that "the type face isn't the same as in ${NES_GAME}": the NES, like all 8-bit systems I've programmed on, does allow you to define your own type faces as well. Thus Capcom games have different looking letters to Hudson games to Nintendo's own releases.
I've got a NES and a Famicom (plus a Famicom FDD and 3D System). I still play them regularly. This CSS framework is clearly just a bit of fun but it does capture the general aesthetic of the era. All these complaints about colour pallets, while demonstrably wrong, is just nitpicking of the highest order. And the fact that I got downvoted in my earlier comment for saying "naming things is hard" (a point so true it has it's own joke) is pretty evident of just how ridiculous the complaints are.
> NES.css uses 12 distinct colours. So how exactly is NES.css breaking "that feel"?
Some of the colors used here don’t exist in the NES palette — for example, the NES cannot display bright yellow (the best it can do are are the colors of the coins in Super Mario Bros. or the colors of Brinstar enemies in Metroid). The NES does not at all look “vibrant” or “crisp”, especially after all the artifacts from its cheap analog video generator.
> the NES [...] does allow you to define your own type faces
Yes, but (unless you want to do some really awkward tricks) the characters must be aligned to an 8x8-pixel grid. The text in this page is ~9x12 or something like that (including spacing), and the alignment is not consistent throughout the page.
> All these complaints about colour pallets, while demonstrably wrong, is just nitpicking of the highest order.
Sure, it’s definitely nitpicking. This framework looks great: it perfectly captures the “faux-8-bit” style that’s popular today. And it’s true that the NES is now the representative console of the 8-bit era. However, it’s also true that the NES (like every console of that era) had its own distinctive look-and-feel beyond just “big pixels”.
Plus there isn't any bright yellow in NES.css; there's an orange / yellow colour that I agree isn't precisely matched in the NES colour palette but the other colours aren't a million miles away.
The other thing people forget when talking about retro systems is the colours they could display were greater than the sum of colours the chipsets could output because RF and CRTs created so much dither that the artists would place different coloured pixels adjacent to each other to blend new colours and add transparencies.
> The NES does not at all look “vibrant” or “crisp”, especially after all the artifacts from its cheap analog video generator.
You're right that no system of that era looked crisp (they definitely looked vibrant though! Especially if you cranked the brightness and contrast up on your TV) but the analogue video generator wasn't the real issue. It's pushing a signal out via RF and into a CRT TV that caused most of the dithering. And actually these days you can get a crisp RGB signal out of a NES if you wanted (https://duckduckgo.com/?q=rgb+nes+mod, emulation, or just using a modern LCD as your display instead of an 80s era TV).
> Yes, but (unless you want to do some really awkward tricks) the characters must be aligned to an 8x8-pixel grid. The text in this page is ~9x12 or something like that (including spacing), and the alignment is not consistent throughout the page.
You can hardly blame the alignment issues when web sites aren't rendered using cell positioning. I do take your point about type face's pixel grid though.
> However, it’s also true that the NES (like every console of that era) had its own distinctive look-and-feel beyond just “big pixels”.
Yes and no. That's such a loaded statement that on the surface appears true but really isn't once you dig deeper.
First off lets dismiss the slew of 8-bit micros (Amstrad, Commodore, Dragon, Sinclair, Acorn, etc) those definitely had distinct characteristics, but they were also massively more limited systems.
Since we're talking 8-bit, I'm going to assume 16-bit consoles aren't part of the comparison as well.
In fact let's be fair and just compare the NES to other systems of the same generation: Sega SG100, Sega Master System / Mark III, Atari 7800 and of course the NES / Famicom (https://en.wikipedia.org/wiki/Third_generation_of_video_game...). Games from that era follow similar tropes: for example chequerboard patterns used to give the illusion of speed (as seen in Sega's Space Harrier and countless Space Harrier clones ported to the Famicom). A casual observer could easily mistake Final Fantasy (NES) and Phantasy Star (Master System) games for one another.
Take hardware, the colour pallets between 3rd generation console (SG-1000 aside as that was very early 3rd gen) are largely. Similar enough where the dithering tricks I described earlier could make up the difference (the difference between the 4th gen colour pallets was massive though). Sound wise, the NES had the superior processing chip of the generation but even here, that was entirely down to the developers taking advantage of that and not being imaginative with it's counterparts (which isn't the case since there's a slew of SMS games with awesome sound tracks). Also both the NES and SMS had FM models too.
The 4th generation systems (SNES, Genesis, etc) all had their own distinctive feel. As did the 2nd gen. But the NES did have similar counterparts in the 3rd gen.
(If you can't already tell, I'm still heavily involved in retro systems...repairing, playing, developing)
Thank you for your expertise! Retro systems are a hobby of mine as well, though clearly I don’t have as much experience with it as you.
Agreed on all counts except the yellow: AFAIK 0x37 is usually a pale whitish-orange [0]. Is it possible you were looking one of the PlayChoice palettes on that page? I know I’ve done that more times than I care to admit...
And you’re right about gen3 consoles being fairly similar. I am not very familiar with that generation besides the NES, so for some reason my mind was going to a bunch of gen2 consoles and home computers as comparison points.
I had a go at making a SNES "Super Mario World" block CSS effect recently in order to play around with border-image properties. They're a lot of fun. I was tempted to do more of SMW but work got in the way... https://ooer.com/blog/2020-09-10-image-border/
So their reason seems to involve some usage of the NES Ness pun, but does that pun work in Japanese? Is there an equivalent shortening of Famicom, and does Ness's Japanese name bare any relation?
According to the Earthbound wiki, the default name of the protagonist in Mother 2 (the Japanese version of Earthbound) is ネス (Ness), which doesn't really resemble the name of the Japanese name of the console (Super Famicom).
The default name of the protagonist of Mother 1 (released on the original Nintendo Famicom) was... ニンテン (Ninten).
The Japanese slang terms for the NES/SNES are "Famicom" and "Sufami" respectively. HAL Laboratories may not have felt that those terms would make for a good protagonist name, especially since the characters are supposed to be American with American sounding names (like Jeff and Paula). But "Ness" is an anagram of SNES and is similar enough to other English names like Jess, Jeff, etc. But it's important to note that in Earthbound, the name Ness is not so much the default name as it is the first of the suggested names if you "Don't Care" what the protagonist's name is. In the Japanese manual in fact, the Ness character's title is "Me" and in parenthesis it says "Nesu" and Jeff, Paula, and Poo are named Friends 1, 2, and 3. [1]
So even though NES might not have been a term known to the general Japanes public, it didn't need to be. Ness is not the intended name of the character, it is only the most common suggested name and hence more like an easter egg.
In episode 2F09, when Itchy plays Scratchy's skeleton like a xylophone, he strikes the same rib in succession, yet he produces two clearly different tones. I mean, what are we to believe, that this is a magic xylophone, or something? Ha ha, boy, I really hope somebody got fired for that blunder.
Note that you can scroll down (white screen) and scroll right (only background) if using Android mobile device, even post recent fix. Still cool, though!
Very cool - would love to see this use :focus-visible[1] though for active effects rather than :focus. The background effect feels distracting when clicking the buttons.
Would love to see something like this for the original Wii.
I really love the UI of that system and the 3DS too. Huge icons and skeuomorphism with a nice light colour scheme. The Switch UI feels so slapdash in comparison.
The Switch UI is intentionally simplistic to keep it in memory while software is running — and let one of the apps (eShop, Photos, News, Settings, etc.) to run. The Wii U Home Menu, by comparison, could not run while a game was loaded.
Oh man I love this framework. I actually ended up using it on a "Pokemon Sword/Shield helper app" I made back when the game released. Made it feel very authentic!
These fonts give me the warm fuzzy feeling of opening the CPC Amstrad or developing back in my first language, GW-BASIC, and the awesomeness of discovering Word 6 (in DOS with window management!!!) or every subsequent iteration til designers walked in and made fashionably stylish fonts.
I am not a web developer, but I don't understand what is needed to be 'installed' to use a css? Could someone explain why the default install isn't a clone of a nes.css?
The tl;dr is it's using SCSS, which is a language that generates CSS for you[0], and therefore needs a build step. They haven't bothered to put the build output into their repo because anyone who wants the minified file can build it themselves or use wget to download it from the CDN.
I was hoping this was in the style and color scheme of the NES case, controllers, cartridges, box art, etc. That would be rad. Fake pixelation, on the other hand, is not something I usually enjoy.
I don't know what it is, but the change in cursor shape is really off-putting to me. Almost to the point of feeling motion sick. I've never experienced something like this before.
Is the text blurry for you? Something about the mix of blurred text that should be sharp + a pixel-perfect cursor seems to be the culprit for my discomfort.
It is going for simple and CSS-only, so I don't see that fitting in.
The author created this because they hate CSS but have to use it for work, so they wrote this library to get more comfortable with it.
I agree, though, it would be cool to have a custom dropdown in the same style. Maybe someone will use this to make a component library with Vue or WebComponents or something.
98.css https://jdan.github.io/98.css/
XP.css https://botoxparty.github.io/XP.css/
7.css https://khang-nd.github.io/7.css/
Each iteration excoriating layers of usability, pragmatism and clarity heading towards absolute cluster fuck of UX/UI we have today!