Live data from Hacker News

NES.css – NES-Style CSS Framework

nostalgic-css.github.io

111–120 of 124 posts

Re: NES.css – NES-Style CSS Framework

#111

This is great. I’ll use it on the next ERP system I build, to make it look like SAP.

I'm pretty sure it's against international law to purposefully submit people to SAP-like software.

it's actually a UN Convention, but yes, you're correct

Re: NES.css – NES-Style CSS Framework

#112
post #83

Earlier quoted context omitted.

Last version of Windows I had installed on a personal computer. It was a better time.

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.

I'm not sure it was a better understanding so much as it was much simpler back then. There were no radical changes to the GUI since 95/NT 4.

Re: NES.css – NES-Style CSS Framework

#113
post #94

Earlier quoted context omitted.

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…

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.

Re: NES.css – NES-Style CSS Framework

#114

Earlier quoted context omitted.

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.…

> 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”.

Re: NES.css – NES-Style CSS Framework

#115

Earlier quoted context omitted.

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.…

> 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 ana…

> Some of the colors used here don’t exist in the NES palette — for example, the NES cannot display bright yellow

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)

Re: NES.css – NES-Style CSS Framework

#116

Earlier quoted context omitted.

> 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 ana…

> Some of the colors used here don’t exist in the NES palette — for example, the NES cannot display bright yellow 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 talki…

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.

[0]: https://wiki.nesdev.com/w/images/5/59/Savtool-swatches.png

Re: NES.css – NES-Style CSS Framework

#118
post #66

Earlier quoted context omitted.

Thanks and nice catch! Fixed it!

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!

Thanks for the bug report! I never tested to scroll on mobile. Fixed!

Re: NES.css – NES-Style CSS Framework

#120
post #117

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.

[0] Why would you want to generate CSS, I hear you ask? Check out https://sass-lang.com/guide

Post reply on HN