
NES.css: 8-bit style CSS framework - RyanShook
https://bcrikko.github.io/NES.css/
======
darekkay
I'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
I'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?

~~~
darekkay
There 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-
shor...](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)

[4]
[https://darekkay.github.io/presentations/](https://darekkay.github.io/presentations/)

~~~
vanadium
Accessibility is one place where you'll invariably be forced to pay at some
point because the 800lb gorilla of screenreaders (JAWS) is also what's used
most often in both home and in most corporate environments.

[https://webaim.org/projects/screenreadersurvey7/](https://webaim.org/projects/screenreadersurvey7/)

------
throwaway3265
My 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-...](https://ell.stackexchange.com/questions/10624/is-sns-social-
networking-site-used-by-native-speakers-of-english)

~~~
yellowapple
Wait, "office lady" ain't used internationally? Could've sworn I've heard it
in the wild here in the US.

~~~
temporallobe
American here...that’s definitely offensive and would not be used in a
professional setting.

~~~
yellowapple
I never said it wasn't offensive. Just that I've indeed heard folks use that
term (in a very-not-professional-setting, mind you).

------
lostgame
Fantastic 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
Is NES trademarked as well as Nintendo? I would think as long as the word
"Nintendo" itself is avoided it should be fairly safe.

~~~
lostgame
Of 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
Relevant 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
Knowing 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
In 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.

------
naikrovek
This 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.

~~~
boyter
I’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
One 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.

------
magnat
It'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
Font-awesome also does this, I've always found it strange but assumed it was
done for some reason.

~~~
Blaiz0r
The 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
Actually, 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/st...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/strong)

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

------
bluetidepro
This 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
Perhaps use space and enter for last 2 keys.

------
rajangdavis
It looks pretty cool but the containers, inputs, balloons look a bit funky on
Android mobile.

~~~
IgorPartola
Same on iOS. Containers overflow horizontally.

------
jordache
Author 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
Shadowgate 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.

------
yoklov
Hm, it would be great to fix the pixel mixing. Cool nonetheless.

------
analogmemory
I love passion projects like this. Keep up the work!

------
james_anderson
The controller in the top left is for the SNES (sorry). Really nice work
though!

~~~
wingi
Just scroll down - the correct controller is on the end of the examples.

------
arayh
Am 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)

~~~
mcdevilkiller
Firefox 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.

------
temporallobe
Fascinating! 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.

------
hyuuu
I really like it, really pulls on my nostalgic strings :)

~~~
BozeWolf
Really cool indeed. Got the same feeling. I still remember this geocities-
bootstrap theme. Love it :)

[http://code.divshot.com/geo-bootstrap/](http://code.divshot.com/geo-
bootstrap/)

~~~
majewsky
My eyes! The goggles do nothing!

------
La_Beffa
Love it, and it works without js, great work!

------
anilakar
At least the checkboxes and radio buttons could use some user-select: none.
Currently a mouse click is enough to trigger accidental selection on Chrome.

------
evsamsonov
Good work. Does anyone know a terminal UI style CSS framework?

~~~
noicebrewery
[https://github.com/kristopolous/BOOTSTRA.386](https://github.com/kristopolous/BOOTSTRA.386)

enjoy

------
gnarbarian
I love stuff like this.

------
LoSboccacc
need 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
This is amazing!

------
BFatts
This is pretty darn sweet - well done!

------
maticaputti
Interesting - well done!

------
grenoire
Mixed 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
I 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
I 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_pal...](https://en.wikipedia.org/wiki/List_of_video_game_console_palettes#NES)

~~~
jldugger
And the icon is clearly a SNES controller.

------
agumonkey
Perfect for 1) kids, 2) grandparents

------
fazlerocks
This is amazing! Sharing it on Hashnode now.

