12 ms·
NES.css – NES-Style CSS Framework
- tailspin2019 6y agoThis is great. I’ll use it on the next ERP system I build, to make it look like SAP.
- FriedrichN 6y agoI'm pretty sure it's against international law to purposefully submit people to SAP-like software.
- tailspin2019 6y agoIf only...
- skeeter2020 6y agoit's actually a UN Convention, but yes, you're correct
- p1mrx 6y agoCool, but why is the logo an SNES controller?
- curo 6y agosharp eye
- dylan604 6y agoIs it? It's pretty obvious it's not an NES controller. It's a pretty glaring oversight on the part of the devs to be honest.
- adyavanapalli 6y agoYou can find the author's responses at this link: https://github.com/nostalgic-css/NES.css/issues/432 https://github.com/nostalgic-css/NES.css/issues/432
- boomboomsubban 6y agoSo 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? Pure curiosity, the author can do what they want.
- thristian 6y agoAccording 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).
- boomboomsubban 6y agoThanks, all that's left is whether the term NES is common in Japan as one of the bizarre American loan words for Japanese things. 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.
- jbermudes 6y agoThe 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. [1] https://motherforever.net/official-artwork-of-mother-2/ https://motherforever.net/official-artwork-of-mother-2/
- Philip-J-Fry 6y agoIt looks cool but it renders horribly in Chromium based browsers at least. Where all the borders glitch out. I looked at the source it's it's a neat use of CSS.
- mrweasel 6y agoI think there's a few bugs to work out. Clicking the dialog box buttons sends you straight to the bottom of the page in Firefox
- systemvoltage 6y agoBut wait! There's more! 98.css https://jdan.github.io/98.css/ https://jdan.github.io/98.css/ XP.css https://botoxparty.github.io/XP.css/ https://botoxparty.github.io/XP.css/ 7.css https://khang-nd.github.io/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!
- rusk 6y agoIs there a c64 one?
- tyingq 6y agoThere's this: http://pixelambacht.nl/2013/css3-c64/ http://pixelambacht.nl/2013/css3-c64/
- jszymborski 6y agoI'm just imagining the irony of using these in an electron app.
- reaperducer 6y agoWell, it does have installation instructions for Node, so you're already halfway there!
- franklampard 6y agoIsn’t it nice?
- prezjordan 6y agoI 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.
- SCUSKU 6y ago
- Waterluvian 6y agoThis looks really nice. I love it. But to be honest, nothing about it feels "NES" to me.
- allenu 6y agoIt looks more SNES to me, including the controller.
- cjones26 6y agoI was thinking SNES or GameBoy!
- anthk 6y agoThe 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.
- noobermin 6y agoThat was indeed due to hardware constraints on the machine [0] https://www.youtube.com/watch?v=QaIoW1aL9GE https://www.youtube.com/watch?v=QaIoW1aL9GE
- hnlmorg 6y agoThere 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.
- Waterluvian 6y agoI 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.
- krets 6y agoI love this! I'm using it for my homepage: https://www.oskarlindgren.se https://www.oskarlindgren.se
- Yabood 6y agoNice landing page! I suggest adding "overflow:hidden" to your <body> to stop it from scrolling to the right.
- krets 6y agoThanks and nice catch! Fixed it!
- mod 6y agoIf it matters you also spelled nostalgic wrong. It's a very fun looking page.
- krets 6y agoWow, that's embarrassing! Fixed
- inakarmacoma 6y agoNote that you can scroll down (white screen) and scroll right (only background) if using Android mobile device, even post recent fix. Still cool, though!
- krets 6y agoThanks for the bug report! I never tested to scroll on mobile. Fixed!
- mssundaram 6y agoIt's more hassle but would be nice to not use native dropdowns and instead custom ones so that they could keep the same styling.
- ficklepickle 6y agoIt 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.
- zestyping 6y agoArrrrgh the font has ligatures! Noooooo... the word "files" looks just awful. Ligatures are my pet peeve. They're unnecessary 90% of the time.
- stanislavb 6y agoIt's the 10th most popular CSS Framework based on the number of Github stars https://www.libhunt.com/css https://www.libhunt.com/css
- ttt0 6y agoMy only question is: was using a JS framework really necessary for such a simple website?
- travbrack 6y agoMaybe it wasn't necessary but the author obviously has a personal reason to do so which is completely valid
- swyx 6y agoI keep a list of these every time they show up on HN: https://github.com/sw-yx/spark-joy/blob/master/README.md#fun-css-frameworks https://github.com/sw-yx/spark-joy/blob/master/README.md#fun... everything from PS1 to Futuristic Sci Fi CSS!
- Sn0wCoder 6y agoThank you.
- thih9 6y agoYou could add Framework7[1], a framework that imitates the style of iOS 7+. It’s not as much nostalgia, but can be fun. https://framework7.io/ https://framework7.io/
- swyx 6y agonahh this strays too far from the pure css ethos. but thx :)
- iomcr 6y agoA similar list for free to use bootstrap 4/5 themes (like https://bootswatch.com/ https://bootswatch.com/ but I already know about bootswatch) is in my wishlist.
- jjcm 6y agoVery 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. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visi...
- qazwse_ 6y agoI 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.
- jml7c5 6y agoIs 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.
- mjrbrennan 6y agoI was really weirded out by this too, almost felt like the cursor was snapping!
- laurent92 6y agoThese 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.
- tenebrisalietum 6y agoThe uppercase glyphs I think earliest appeared in a 1976 arcade game by Atari or Kee Games called "Sprint 2". The lowercase ones I don't think were designed by the same person or company, but I'm not really sure.
- Lucasoato 6y agoThanks, I've created my personal blog with this style :D https://www.lucasoato.com/home https://www.lucasoato.com/home
- flareback 6y agoThis is the kind of css I would use as an easter egg. Enter the konami code and swap the css for this.
- csnover 6y agoHey, 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. [1] `CreateIconIndirect`, when `fIcon = FALSE`. [2] https://bugzilla.mozilla.org/show_bug.cgi?id=1609827 https://bugzilla.mozilla.org/show_bug.cgi?id=1609827 [3] https://bugs.chromium.org/p/chromium/issues/detail?id=1042980 https://bugs.chromium.org/p/chromium/issues/detail?id=104298...
- deleted 6y ago[deleted]
- bussierem 6y agoOh 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!
- peanut_worm 6y agoWhat makes it a framework rather than a stylesheet?
- Igelau 6y agoOh, those beautiful blinking radio buttons.
- Camillo 6y agoThat lowercase "m" is criminal.
- sam0x17 6y agoLooks so good in dark reader
- jp1016 6y agoI have made a code screenshot tool based out of nes.css , thanks for making this. https://codekeep.io/screenshot https://codekeep.io/screenshot , we have the nes template
- modeless 6y agoI 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.
- techbio 6y agoFun to see this while running NoScript, and Vue code leaking in to 8-bit/4:3 resolution: {{ sample.title || capitalize }}
- dirtnugget 6y agotext-transform: uppercase would also have worked I guess. Although .toUpperCase also normalizes
- onion2k 6y agoI 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/ https://ooer.com/blog/2020-09-10-image-border/
- nxpnsv 6y agoMy favorite tautological feature class="nes-icon medium is-medium"
- mouzogu 6y agoWould 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.
- zapzupnz 6y agoThe 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.
- powerapple 6y agoVery nice！Love it.
- mdtrooper 6y agoThe gamepad from the logo....it is from chinese bootleg version.
- solidist 6y agoIt doesn't look like how I remember it.
- mrtobo 6y agoOpening a dialog shouldn't scroll you to the top of the page. Also, this doesn't work at all in mobile. Great effort, though!
- ChrisArchitect 6y ago(2018)
- ChrisArchitect 6y agoprevious discussion on original repo/url: https://news.ycombinator.com/item?id=18557861 https://news.ycombinator.com/item?id=18557861
- pedro_hab 6y agoThe fonts render badly on Chrome + Mac + a 27" 1080p It's a low res monitor, but that font was supposed to be bulky, rendering on a low res monitor shouldn't look soft.
- ron0c 6y agoI 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?
- strken 6y agoThe 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 https://sass-lang.com/guide