10 ms·
NES.css: 8-bit style CSS framework
- rajangdavis 8y agoIt looks pretty cool but the containers, inputs, balloons look a bit funky on Android mobile.
- IgorPartola 8y agoSame on iOS. Containers overflow horizontally.
- grenoire 8y agoMixed pixel scaling and incorrectly offset items make this seem a little cheap and doesn't really give me the NES feel. Colours are also not necessarily so well picked either. Meh...
- analogmemory 8y agoI really want to say something mean to this toxic comment. But if you're having a bad day/week, I hope things get better for you.
- stencil25 8y agoI think it's a fair critique. The lib is called "NES", yet doesn't appear to follow the NES's own available palette: https://en.wikipedia.org/wiki/List_of_video_game_console_palettes#NES https://en.wikipedia.org/wiki/List_of_video_game_console_pal...
- danellis 8y agoIt's okay to constructively criticize things. Better than being needlessly condescending.
- kanon 8y agoTo add to this; It's not a framework but a theme. Looks alright tho.
- mosselman 8y agoPot calling the kettle black?
- eddieh 8y agoI’m not sure it is a toxic comment. The site looks bad in portrait, but it looks good in landscape. I only thought to rotate my phone after reading the comments. It certainly seems constructive to point out when something doesn’t look or feel right to you. Maybe it was only tested on a desktop?
- Lorkki 8y agoSame concerns for me in HiDPI on the desktop. I suspect it's due to mixing em and pixel alignments.
- a-nikolaev 8y agoagreed about mixed pixel sizes
- hyuuu 8y agoI really like it, really pulls on my nostalgic strings :)
- analogmemory 8y agoI love passion projects like this. Keep up the work!
- LoSboccacc 8y agoneed some fixing on mobile but works great, could be a great match to phaser.js games and the like, much better than slickui within the canvas
- RandyRanderson 8y agoThis is amazing!
- gnarbarian 8y agoI love stuff like this.
- yoklov 8y agoHm, it would be great to fix the pixel mixing. Cool nonetheless.
- anilakar 8y agoAt least the checkboxes and radio buttons could use some user-select: none. Currently a mouse click is enough to trigger accidental selection on Chrome.
- throwaway3265 8y agoMy intuition was clear, it's made from a Japanese company! While the style is of course inspired on old Japanese games, the clear clue was "SNS" (confirmed by visiting the company link). If the authors are here, this is an example of wasei eigo not used at all in international English, like "salary man" or "office lady". Relevant: https://ell.stackexchange.com/questions/10624/is-sns-social-networking-site-used-by-native-speakers-of-english https://ell.stackexchange.com/questions/10624/is-sns-social-...
- yellowapple 8y agoWait, "office lady" ain't used internationally? Could've sworn I've heard it in the wild here in the US.
- kristianc 8y agoOL has different (and slightly derogatory) connotations in Japan.
- freehunter 8y agoI've never heard anyone in the US saying "office lady" and to be honest if I did hear that I would think it's being used in a derogatory fashion. I actually just looked up what "office lady" means and yeah... I can't think of a lot of offices in the US that would have such a concept, especially not where it has to be a female employee doing those tasks. It'd be more common to say "personal assistant" or "office assistant".
- temporallobe 8y agoAmerican here...that’s definitely offensive and would not be used in a professional setting.
- yellowapple 8y agoI never said it wasn't offensive. Just that I've indeed heard folks use that term (in a very-not-professional-setting, mind you).
- fazlerocks 8y agoThis is amazing! Sharing it on Hashnode now.
- james_anderson 8y agoThe controller in the top left is for the SNES (sorry). Really nice work though!
- darekkay 8y agoI'm currently evaluating a lot of CSS frameworks on how accessible they are (for an upcoming blog post), so I'd like to give it a go: 1. "Focus ring" (focus indicator) is completely missing for buttons. I cannot navigate the site with my keyboard if I don't see the currently focused element. Never remove the outline for focusable elements without providing a sufficient alternative. 2. The focus ring for the form elements is insufficient, especially for input fields. 3. The green, blue and red buttons have insufficient contrast ratio. Use something like [0] to find accessible color combinations. 4. Only native components are used (button, input) - that's great! This way, almost no ARIA is needed. Adding role="alert" [1] to the balloons is the only one I'm missing. 5. The mobile layout is broken for inputs. Unfortunately, many CSS frameworks either partially or fully ignore the accessibility aspect. It takes a lot of experience and time to make a website fully WCAG-compliant, but it's quite easy to follow some basic guidelines, like in this cheatsheet [2]. [0] https://contrast-ratio.com/ https://contrast-ratio.com/ [1] https://www.w3.org/TR/wai-aria-practices-1.1/#alert https://www.w3.org/TR/wai-aria-practices-1.1/#alert [2] https://moritzgiessmann.de/accessibility-cheatsheet/ https://moritzgiessmann.de/accessibility-cheatsheet/
- dsamarin 8y agoI've been considering evaluating the accessibility of my sites and I would like to see the impact of the changes I make with WAI-ARIA. Can I do this with a screen reader and are there FOSS or built-in screen readers you can recommend I test with?
- bambataa 8y agoNot the OP but you can do a lot with the following: - view your site in lynx - try and navigate around it with only your keyboard - try navigating around it using your OS' screen reader
- darekkay 8y agoThere are free and built-in screen readers: NVDA[0] (Windows), VoiceOver[1] (Apple) and Orca[2] (Linux). I've been only working with NVDA so far. I highly recommend this NVDA Cheatsheet [3] to get a quick overview. It's also important to test NVDA with Firefox, as it has a better compatibility and thus it is the more common setup for users relying on a screen reader. Look into the difference between "Browse Mode" and "Focus Mode" (briefly explained in the cheatsheet) and how to switch between them. In the Focus Mode you can just tab through all of your focusable elements and check if the announced texts are understandable and no information is missing. In Browse Mode you go through all of the non-focusable content, and again, check if the output is clear and no (implicit) information is missing. This applies especially to all custom components which may announce gibberish if not handled correctly. Finally, you can look into my slides and examples for my "Accessible Web" talk [4]. [0] https://www.nvaccess.org/ https://www.nvaccess.org/ [1] https://www.apple.com/de/accessibility/mac/vision/ https://www.apple.com/de/accessibility/mac/vision/ [2] https://wiki.gnome.org/Projects/Orca https://wiki.gnome.org/Projects/Orca [3] https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts https://dequeuniversity.com/screenreaders/nvda-keyboard-shor... [4] https://darekkay.github.io/presentations/ https://darekkay.github.io/presentations/
- naikrovek 8y agoThis kind of thing makes me wonder just how small (in terms of pixel count) a UI could be, while still being as intuitive as necessary and as complete as necessary to accomplish its goals. I bet we're being super wasteful currently. Like REALLY super wasteful of screen space.
- jarcane 8y agoThe designs for a company web site I'm working on now are targeting a 2K screen as the default viewport. So yes, we are.
- boyter 8y agoI’d quite like a guide for that. I imagine making something in as small a space as possible is even harder then most common design trends to pull off.
- reaperducer 8y agoOne of my early cell phones (AMPS days) had a solitaire game, and it fascinated me that solitaire could be played in such a small screen. I spent a while figuring out the minimum number of pixels needed to play a game of solitaire. Unfortunately, this was years ago so I don't remember the number. But it seems like as good a benchmark as anything else.
- PavlovsCat 8y agoI once modified a traybar icon thingy to display download rates in a 16x16 pixel area, and I'm quite proud of what I came up with, though I'm sure this is a "thing", it just has to be -- if anyone knows "the official name" for this concept I would be very grateful: Let's say you have 16 arrays with N values each, each having their own pointer to the current element. It starts out with everything zero. On each tick, you take the current value and put it in the current element of the first array, and increase the current element pointer. When you reach N, you reset the pointer to zero, take the average of all values in the array, and put that into the current element of the next array to the right, and so on. Then you draw the current average of all elements in each array as a 1 pixel bar, color according to preference, and the result is that you have near real-time values to the left, and a rather long, if very rough history to the right. Depending on how many elements each array has, you can basically fit the current frame, second, minute, hour, day, week, month, year and more all in 16x16 pixels, especially since each array doesn't have to have the same number of elements.
- agumonkey 8y agoPerfect for 1) kids, 2) grandparents
- magnat 8y agoIt's CSS-only, so works just fine with NoScript. That's kind of unexpected, compared to other modern web frameworks. Though using <i> tag for icons feels weird.
- bananatron 8y agoFont-awesome also does this, I've always found it strange but assumed it was done for some reason.
- ataylor32 8y agoTheir documentation says: We like the <i> tag for brevity and for the fact that most folks are using <em></em> for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a <span> is more semantically correct. https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use https://fontawesome.com/how-to-use/on-the-web/referencing-ic...
- Blaiz0r 8y agoThe i and the b tag are now superfluous as the em and strong tag has taken over their semantic meaning. This frees their use for other things.
- PavlovsCat 8y agoActually, all elements still have kinda distinct uses: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i > represents a range of text that is set off from the normal text for some reason. Some examples include technical terms, foreign language phrases, or fictional character thoughts. It is typically displayed in italic type. Typically, but doesn't have to be. It's just about stuff that's set off, but not necessarily more or less important, "just different" I would say. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em > marks text that has stress emphasis. can be nested, with each level of nesting indicating a greater degree of emphasis. Oh, I did not know it can be nested. At any rate, emphasis doesn't have to be bold, it can be anything that gets emphasis across. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b > is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. [..] However, you should not use <b> for styling text; instead, you should use the CSS font-weight property to create boldface text, or the <strong> element to indicate that text is of special importance. Okay, to be perfectly honest, I can't think of a good example for something I would want to draw attention to without considering it more important. Maybe the names of persons in a news story? Hmmm. I don't know, but notice making something blink is a perfect and sensible way to draw attention to it... so the blink tag never went away, it just got shorter, so we can use it more liberally. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong https://developer.mozilla.org/en-US/docs/Web/HTML/Element/st... > The HTML Strong Importance Element (<strong>) indicates that its contents have strong importance, seriousness, or urgency. So basically, this means flashing text in various bright colors while changing size rapidly. I know how to read standards, so nobody even pretend it could be otherwise; let's just fix our websites accordingly. A "call to action" with a big green button is way too tame, if it doesn't trigger a primal survival reaction, you might lose the client.
- La_Beffa 8y agoLove it, and it works without js, great work!
- arayh 8y agoAm I the only one experiencing an interlace effect from Firefox rendering the icons? https://i.imgur.com/N6vnaJe.png https://i.imgur.com/N6vnaJe.png
- scrollaway 8y agoI can reproduce that in Chromium on Arch Linux at some zoom levels. Fun!
- mcdevilkiller 8y agoFirefox on Android @ 1440p also does this. I'd say it is because they are using svg for the images and the "pixels" are each separate rects. Just a guess, cannot look at the source rn.
- lostgame 8y agoFantastic work, very cute - but you'd better get on renaming the project ASAP to avoid a cease + desist. Nintendo does not take kindly to even the most casual use of their trademarks, even in FOSS projects.
- kbenson 8y agoIs NES trademarked as well as Nintendo? I would think as long as the word "Nintendo" itself is avoided it should be fairly safe.
- lostgame 8y agoOf course, do you not think they'd have that covered? ;) https://trademarks.justia.com/858/08/nes-85808681.html https://trademarks.justia.com/858/08/nes-85808681.html
- mantenpanther 8y agoRelevant is the scope ("Goods And Services"), which seems to be: "Downloadable multimedia files, namely, video games; downloadable electronic game programs; downloadable electronic game software; electronic game programs; electronic game software; video game programs; video game software" So a CSS-framework named NES should be OK.
- nathancahill 8y agoKnowing how this things are argued in C&D letters, I wouldn't put it past them saying the a CSS framework is a downloadable multimedia file. They don't have to be right to send the letter.
- mantenpanther 8y agoIn this case the focus is pretty clear on games/computer programs ("multimedia files, namely, video games"). But agreed, it probably would not be worth it to stand against a giant as small dev/company for a fun project.
- bluetidepro 8y agoThis would be cool to be paired up with a site using a Konami code. Do the code ("Up Up Down Down Left Right Left Right B A Select Start"), and it changes your stylesheet to use this. Hahah Would be fun!
- h1d 8y agoPerhaps use space and enter for last 2 keys.
- jordache 8y agoAuthor needs to redo the demo page in black on white. That will be much more in line with NES styles.. I can't think of any NES UI with black text on white background.
- jldugger 8y agoShadowgate and the other MacVenture games were black text on a white or beige background but they were originally Mac games so that explains the design. Final fantasy was white on blue. As was Crystalis. I suspect the reason it's not more common is the NES pallets sharing a color for color0. You can use black to indicate lines or shadow depth on basically all objects, whereas white is less universal.
- lostgame 8y agoYou could take Pokémon, while technically a GB/C title, as a solid 8-bit example of some of this. Yet another reason why perhaps NES isn’t the best title.
- BFatts 8y agoThis is pretty darn sweet - well done!
- evsamsonov 8y agoGood work. Does anyone know a terminal UI style CSS framework?
- noicebrewery 8y agohttps://github.com/kristopolous/BOOTSTRA.386 https://github.com/kristopolous/BOOTSTRA.386 enjoy
- maticaputti 8y agoInteresting - well done!
- garysahota93 8y agowhy? just why? lol
- temporallobe 8y agoFascinating! As a joke, I wrote a similar CSS stylesheet recently that simulated the look and feel of a greenscreen mainframe app, complete with bright green text and blocky containers (I spent maybe all of an hour on it over a few days of tinkering). I added it as an style option in a web app that was supposed to replace a legacy system and the customer absolutely loved it. Unfortunately I had to explain it was a joke.