NES.css – NES-Style CSS Framework
nostalgic-css.github.io
nostalgic-css.github.io
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!
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.
https://github.com/sw-yx/spark-joy/blob/master/README.md#fun...
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.
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).
This kind of thing: https://upload.wikimedia.org/wikipedia/en/thumb/c/c6/Windows...
(Though ME did have some white-background panels with large headers and graphical fluff, where I think previously you'd only find grey. In this vein: https://www.operating-system.org/betriebssystem/bsgfx/micros...)
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?
On the other hand: Lots of modern apps are using web things (like electron etc.) Thus doing web tech using web tech isn't a challenge ...
https://github.com/sw-yx/spark-joy/blob/master/README.md#fun...
everything from PS1 to Futuristic Sci Fi CSS!
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.
[1] `CreateIconIndirect`, when `fIcon = FALSE`.
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=1609827
[3] https://bugs.chromium.org/p/chromium/issues/detail?id=104298...
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.
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.
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”.
Yes it can: 0x37 (https://wiki.nesdev.com/w/index.php/PPU_palettes).
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)
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.
[0]: https://wiki.nesdev.com/w/images/5/59/Savtool-swatches.png
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’ll use it on the next ERP system I build, to make it look like SAP.
Pure curiosity, the author can do what they want.
The default name of the protagonist of Mother 1 (released on the original Nintendo Famicom) was... ニンテン (Ninten).
Though, I suppose the author seems to somewhat regularly use the English parts of the internet. They'd pick up the term even if it wasn't common.
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.
but, It's a joke framework. So, it might not be accurate.
Please have fun and use it "
https://github.com/nostalgic-css/NES.css/issues/5#issuecomme...
It's a very fun looking page.
Ligatures are my pet peeve. They're unnecessary 90% of the time.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visi...
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 lowercase ones I don't think were designed by the same person or company, but I'm not really sure.
[0] Why would you want to generate CSS, I hear you ask? Check out https://sass-lang.com/guide
It's a low res monitor, but that font was supposed to be bulky, rendering on a low res monitor shouldn't look soft.
I looked at the source it's it's a neat use of CSS.
Clicking the dialog box buttons sends you straight to the bottom of the page in Firefox
{{ sample.title || capitalize }}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.
Great effort, though!
class="nes-icon medium is-medium"