NES.css
A CSS library that styles buttons, boxes and forms to look like retro NES-era games.
- Stars
- 21.9k
- Forks
- 1.7k
- Licence
- MIT
- Language
- SCSS
- Last update
- 2.8 years ago
- Type
- Library
No commits in over a year — check for forks or alternatives before adopting.
What it is
NES.css is a CSS framework that gives web pages a retro 8-bit look inspired by Nintendo Entertainment System games. It provides ready-made components such as buttons, containers and forms, but the README says it only supplies components and you define your own layout. It needs no JavaScript.
- Style buttons, dialogs and forms on a retro-themed landing page
- Add an 8-bit look to a personal portfolio or game-related site
- Prototype a pixel-style interface before building a custom design
Great for
- Developers building a retro or game-themed web page or demo
- Designers prototyping pixel-style interfaces quickly
- Developers who want styled components without writing CSS from scratch
- Projects that need Japanese or other non-English text with a pixel font
Not ideal for
- Projects needing a full layout system, since the README says NES.css only provides components
- Corporate or minimal interfaces, because the retro style is its defining look
- Users who need Internet Explorer or Edge support, which the README lists as untested
How to get it
- 1
Install with a package manager
Install via npm
npm install nes.cssInstall via Yarn
yarn add nes.css - 2
Run it
- Install nes.css with npm or Yarn, or add the CDN link tag to your HTML head.
- Link nes.min.css in your HTML page with a link element.
- Add a pixel font such as Press Start 2P through Google Fonts for English text.
- Apply NES.css classes to your buttons or containers and open the page in a browser.
- 3
Get the most out of it
- Use the recommended fonts table to choose a pixel font for your language, such as Zpix for Chinese or Misaki for Japanese.
- Use the core-only stylesheet nes-core.min.css if you want the base styles without the full set.
- Use the Sass source through the sass key in package.json if you want to customize the styles.
- Pin the CDN link to a specific version such as nes.css@2.3.0 for stable output.
Downloads
Strengths
- Installs with npm or Yarn, or loads from a CDN with one link tag
- Requires only CSS and no JavaScript
- MIT licensed and actively starred on GitHub
Trade-offs
- The README says it provides no fonts; you must pick and load a pixel font yourself, and Press Start 2P only covers English
- Browser support is listed for Chrome, Firefox and Safari; IE/Edge is untested
- The README does not describe the full component list, and the last push shown is January 2024
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| NES.css (this) | 21.9k | Library | beginner | 2.8 years ago | Developers building a retro or game-themed web page or demo |
| bulma | 50k | Library | beginner | 2 months ago | Developers who want a quick, consistent styling baseline for a web page |
| bootstrap | 175k | Library | beginner | 4 days ago | Developers building responsive websites or web app interfaces quickly |
| pico | 16.8k | Library | beginner | 1 months ago | Developers who want a quick, clean look for a small static page or prototype |
| tailwindcss | 98.3k | Library | intermediate | 4 days ago | Web developers who build their own interfaces and want to avoid writing large custom stylesheets |
| daisyui | 42.7k | Library | intermediate | 6 days ago | Developers already using Tailwind CSS who want prebuilt components |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.