Why I created and released NES.css

NES.css — NES-style(8bit-like) CSS Framework

Original article(Japanese): ファミコン風CSSフレームワーク「NES.css」をリリースしました

I released version 1.0.0 of NES.css on December 19, 2018. NES.css is NES-style(8bit-like) CSS Framework. I’ll write about NES.css, timeline, the background of development, and so on.

And I hope that you will love NES.css even just a little.

NES.css 🎮

I created and released a CSS Framework that makes your website a familiar NES style.

NES.css — Demo page

The concept of NES.css is Simple and Minimal 📝

In developing NES.css, I first decided that concept to Simple & Minimal.

I like Simple️ ❤️

In other words, I don’t like complexity.

  • The complexity of CSS creates bugs
  • The complexity of CSS prevents any changes
  • The complexity of CSS makes us trouble and vex
  • The complexity of CSS keeps the contribution away

So I like Simple.

I like Minimal ❤️

  • I don’t want to use JavaScript
  • The existing CSS Frameworks are too fat

I want to make it easy to use, so I don’t want to use JavaScript.

The existing CSS Frameworks has many styles, components, utilities, helpers, grid layout system, and so on to respond to requests of many developers. But to fulfill everyone’s wishes, it is more than enough and not enough. Because CSS Framework provide the largest common denominator styles.

It may be strange expression, but developers who have used CSS Frameworks will understand.

So I like Minimal.

Just so you know, I respect the developers of existing CSS Frameworks.

Just have fun 😆

I wanted to enjoy the development. The reason will be described later.

Timeline 🗓

September 22, 2018

  • I created 8bit.css
  • This is a draft version of NES.css

September 24, 2018

  • I started to create a alpha version of NES.css

November 15, 2018

  • NES.css got a star by kazuya kawaguchi
  • He is one of core member of Vue.js
  • NES.css spreads to Asia(mainly China and Korea)

November 18, 2018

  • I started to create a beta version of NES.css

November 27, 2018

November 28, 2018

  • Ranking in GitHub Trending Developers and Repositories

November 29, 2018

  • NES.css got 1,000 stars
  • I won 1st on GitHub Trending Developers and Repositories

December 6, 2018

December 19, 2018

  • We released ver 1.0.0 of NES.css

January 21, 2019

Motivation for development is “I hate CSS” 😠

I changed jobs from Software developer (C#+ASP.NET) to Front-end developer 3 years ago. But I still hated CSS because I couldn’t use CSS well. Still I must use CSS at my work.

I thought about how to learn CSS in a fun way.

At first, I learned drawing pixel art by box-shadow property. And I wrote an article of “How to draw pixel art with only CSS using box-shadow and animate it”.

Next, I learned methodologies of CSS. I thought about how to create a CSS Framework with pixel art. Then I created 8bit.css. As previously stated, 8bit.css is a draft version of NES.css.

These tweet and article were shared by many people.

In this successful experience I have come to like CSS a little.

Why is the icon of NES.css SNES/SFC? 🤔

So Many people pointed out “Why is the icon of NES.css SNES” and “Icon is not a NES controller” on Twitter, GitHub, Product Hunt, and other discussion sites.

I’m surprised. So I answered with Issues and Pull Request on GitHub, but I’ll explain why the icon is SNES again.

  • I’m not asking for accuracy. In other words, I’d like to enjoy NES(8bit) vibe.
  • I’m a SUPER Famicon(SNES) Generation. When the NES was released, I wasn’t born yet.
  • So I love SNES Controller.
  • I got ideas from MOTHER2. The protagonist is NESS. And MOTHER2 released for SNES.
  • NES of NES.css isn’t exactly Nintendo Entertainment System.

For these reasons, I used icon like SNES Controller on NES.css logo.

nostalgic-css core member 👍

I got the cooperation of many people. The people who shared NES.css, the people who gave us a lot of idea, the people who sent us the issue, the people who sent us the Pull Request, and so on. I'm very grateful to everyone.

I’ll introduce the people who created it together as a core member among them.


I’ve never managed my own OSS project. He advised me at such time. He set up DevOps. So we merged Pull Request, we were able to release automatically. It’s so cool!


He set up storybook and test suite. And he often reply to Issues and review of Pull Request. I’m not good at English, so I’m very grateful with his behavior.

Igor Guastalla de Lima(@guastallaigor)

He added a lot of cool pixel art icons. And he organized the issues and the Pull Requests. As he is a non-English speaker like me, I feel a sense of familiarity.

Lastly… 👋

I never thought that the project which started for my CSS learning would grow. To be honest, I’m a bit tired of OSS activities. Because I have a full-time job. Therefore, I’ll advance development at my own pace.

Lastly, I respect all OSS owners and contributors and thank all the contributors of NES.css.

Thank you for reading to the end.

See you later. 👋

written by B.C.Rikko

Front-end developer / Creator of NES.css / I wanna be CSS Magician.