Overview of the NES.css Framework

Subscribe to my newsletter and never miss my upcoming articles

If you’re a retro gamer fan and wanted to incorporate a fun design on your next web & app project, then I highly recommend checking out NES.css!

Installation of the framework

Setting up the NES.css framework is easy to install. It's available on npm, Yarn, and CDN. The GitHub documentation provides a detailed installation on how you can incorporate the CSS framework in your project.

Since this is a lightweight framework, The NES.css library only provides components. In terms of the layout, you'll need to supply them. Additionally, the NES.css does not have any JavaScript implemented.

What's included in the framework

Taking a look at the NES.css main page, you'll notice that your cursor is in the shape of a finger. You'll also see that many of the buttons are pixelated and follows the basic coloring format for the Primary, Success, Warning, Error, Disabled classes.

image.png

image.png

I really dig the dialogue boxes for this one. Would be perfect to see this incorporated on a landing page for an indie game app:

image.png

The speech balloons component adds a nice touch to the design if you're looking to have your characters or areas in your layout with a talkative feel.

image.png

This was my favorite part of the CSS framework - the inclusion of Nintendo characters!

image.png

The one thing I've noticed where it doesn't follow the same pixel style is when clicking on the drop-down menu.

image.png

Other than that, I adore the components of this framework! Really easy to use and fun to work with when developing some layouts.

Sample Project

To see the NES.css framework in action, I've created a landing page where it prompts the gamer to write their name and has a pop-up dialogue box. For this design, I included this font style as one of the recommended fonts for recreating a retro effect.

Note that the dialogue box will not work on Safari (whether mobile or desktop). The experience is best viewed on Google Chrome.


Special shoutout to my sister-in-law who introduced me to this cool CSS framework while she was working on her web development project!

Let me know what you think about the CSS framework in the comments below. You can also tweet at me with your thoughts about my article. Happy designing!

Comments (2)

Syed Fazle Rahman's photo

Great overview, Diana Chin. 👏

Diana Chin's photo

Thanks so much, Syed!