Top Related Projects
Quick Overview
NES.css is a NES-style (8-bit-like) CSS Framework for nostalgic web design. It provides a set of CSS classes that mimic the look and feel of classic Nintendo Entertainment System games, allowing developers to create retro-styled websites and applications easily.
Pros
- Easy to use and integrate into existing projects
- Comprehensive set of UI components and styles
- Customizable with CSS variables
- Lightweight and performant
Cons
- Limited use cases, mainly suitable for retro-themed projects
- May not be appropriate for professional or modern-looking websites
- Potential accessibility issues due to pixelated fonts and low-contrast colors
- Requires additional effort to make responsive on various screen sizes
Code Examples
- Adding a button:
<button type="button" class="nes-btn">Normal</button>
<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
- Creating a dialog box:
<dialog class="nes-dialog" id="dialog-default">
<form method="dialog">
<p class="title">Dialog</p>
<p>This is a dialog.</p>
<menu class="dialog-menu">
<button class="nes-btn">Cancel</button>
<button class="nes-btn is-primary">Confirm</button>
</menu>
</form>
</dialog>
- Adding an icon:
<i class="nes-icon twitter is-large"></i>
<i class="nes-icon facebook is-large"></i>
<i class="nes-icon github is-large"></i>
Getting Started
To use NES.css in your project, follow these steps:
- Add the CSS file to your HTML:
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
- Add the Press Start 2P font:
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
- Apply the
nes-containerclass to your main content:
<div class="nes-container with-title">
<h3 class="title">Your Title</h3>
<p>Your content goes here.</p>
</div>
Now you can use NES.css classes to style your elements with a retro 8-bit look.
Competitor Comparisons
A design system for building faithful recreations of old UIs
Pros of 98.css
- Lighter weight and more focused on a single Windows 98 aesthetic
- Simpler implementation with fewer components and options
- Easier to integrate into existing projects due to its minimalistic approach
Cons of 98.css
- Less versatile and customizable compared to NES.css
- Fewer pre-built components and UI elements
- Limited to Windows 98 style, while NES.css offers a broader retro gaming aesthetic
Code Comparison
NES.css example:
<button type="button" class="nes-btn is-primary">Primary</button>
<button type="button" class="nes-btn is-success">Success</button>
<button type="button" class="nes-btn is-warning">Warning</button>
<button type="button" class="nes-btn is-error">Error</button>
<button type="button" class="nes-btn is-disabled">Disabled</button>
98.css example:
<button>OK</button>
<button disabled>Cancel</button>
<button class="active">Active</button>
Both libraries aim to provide nostalgic UI elements, but NES.css offers more variety and customization options, while 98.css focuses on a specific Windows 98 look with simpler implementation. NES.css includes more pre-built components and variations, whereas 98.css provides a streamlined approach to achieving the classic Windows 98 aesthetic.
A JS-independent, tree-shakeable CSS framework for building faithful recreations of the Windows 7 UI.
Pros of 7.css
- Lightweight and focused on replicating Windows 7 UI
- Includes specific Windows 7 components like the taskbar and start menu
- Easier to integrate for projects aiming for a Windows 7 look
Cons of 7.css
- Limited scope compared to NES.css's broader retro styling options
- Smaller community and fewer contributors
- Less customization options for non-Windows 7 designs
Code Comparison
NES.css example:
<button type="button" class="nes-btn is-primary">Primary</button>
<progress class="nes-progress is-primary" value="90" max="100"></progress>
7.css example:
<button>OK</button>
<progress value="70" max="100"></progress>
<div class="window">
<div class="title-bar">Window Title</div>
<div class="window-body">Window content</div>
</div>
Both libraries offer easy-to-use class-based styling, but 7.css focuses on Windows 7-specific elements like the window component, while NES.css provides more general retro-styled elements. NES.css uses more descriptive class names for variations, while 7.css relies on simpler, native HTML elements with default styling.
A CSS framework for building faithful recreations of operating system GUIs.
Pros of XP.css
- More focused on replicating the Windows XP aesthetic, providing a nostalgic experience for users familiar with that era
- Includes specific Windows XP-style components like the start menu and taskbar
- Lighter weight, with a smaller file size and fewer components
Cons of XP.css
- Less comprehensive set of UI components compared to NES.css
- Limited customization options and color schemes
- Lacks extensive documentation and examples
Code Comparison
NES.css:
.nes-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 0;
font-size: 1rem;
}
XP.css:
.xp-button {
border: 1px solid #003c74;
background: linear-gradient(180deg, #fff, #ecebe5 86%, #d8d0c4);
box-shadow: inset 0 -1px 1px rgba(0,0,0,.1);
}
Both CSS frameworks aim to provide a retro aesthetic, but NES.css focuses on a more general 8-bit style, while XP.css specifically targets the Windows XP look. NES.css offers a wider range of components and customization options, making it more versatile for various projects. XP.css, on the other hand, excels at recreating the Windows XP interface but may be more limited in its applications. The code comparison shows how each framework approaches styling buttons, with XP.css using more complex gradients and shadows to achieve the characteristic Windows XP appearance.
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
NES.css is a NES-style(8bit-like) CSS Framework.
Installation
Styles
NES.css is available via either npm (preferred), Yarn, or a CDN.
via package manager
npm install nes.css
# or
yarn add nes.css
Our package.json contains some additional metadata under the following keys:
sass- path to our main Sass source filestyle- path to our non-minified CSS
AltCSS(sass, scss...)
// style.scss
@import "./node_modules/nes.css/css/nes.css"
JavaScript
// script.js
import "nes.css/css/nes.min.css";
You need to install css-loader.
HTML
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
via CDN
Import the CSS via a <link /> element:
<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
Fonts
NES.css doesn't provide any fonts, but we do maintain the following list of fonts that we recommend for usage alongside the library.
| Language | Font |
|---|---|
| (Default) | Press Start 2P |
| English | Kongtext |
| Japanese | ç¾å²ãã©ã³ã |
| Japanese | Nu ãã¡ |
| Korean | ë¥ê·¼ëª¨ê¼´ |
| Chinese | Zpix (æåç´ ) |
Usage
NES.css only provides components. You will need to define your own layout.
The recommended font for NES.css is Press Start 2P. However, Press Start 2P only supports English characters. When you're using this framework with any language other than English, please use another font. Follow the Google Fonts instructions about how to include them, or simply include it as below:
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
CSS Only
NES.css only requires CSS and doesn't depend on any JavaScript.
Browser Support
NES.css is compatible with the newest version of the following browsers:
- Chrome
- Firefox
- Safari
Untested
- IE/Edge
Copyright and license
Code and documentation copyright 2018 B.C.Rikko. Code released under the MIT License. Docs released under Creative Commons.
Development
If you'd like to help us out with the project, we welcome contributions of all types! Check out our CONTRIBUTING.md for more details on how you can help make NES.css amazing!
Top Related Projects
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot