What is this?
NES.css is a CSS framework that styles HTML components with a NES (Famicom) 8-bit retro-game look, as if your web page were a game on the old console.
NES.css is a CSS framework that styles HTML components with a NES (Famicom) 8-bit retro-game look, as if your web page were a game on the old console.Is it a full framework with a grid and layout system, or just component styling?Just component styling. NES.css only provides styled components — you have to define your own page layout yourself.
Just component styling. NES.css only provides styled components — you have to define your own page layout yourself.How do I add it to my project?Install it with npm (preferred) or Yarn, or skip the package manager entirely and import the CSS from a CDN with a link element. Sass/SCSS users can import the Sass source directly.
Install it with npm (preferred) or Yarn, or skip the package manager entirely and import the CSS from a CDN with a link element. Sass/SCSS users can import the Sass source directly.Do I need to include any JavaScript for it to work?No. NES.css is CSS-only with zero runtime JavaScript dependencies — you just load the stylesheet. The only exception is importing it through a bundler, which needs css-loader.
No. NES.css is CSS-only with zero runtime JavaScript dependencies — you just load the stylesheet. The only exception is importing it through a bundler, which needs css-loader.My text looks off — does the retro style need a special font?Yes, and it is not bundled: NES.css ships no fonts. Press Start 2P is the recommended default, but it covers only English characters, so for Japanese, Korean or Chinese text you should pick one of the dedicated pixel fonts the README lists.
Yes, and it is not bundled: NES.css ships no fonts. Press Start 2P is the recommended default, but it covers only English characters, so for Japanese, Korean or Chinese text you should pick one of the dedicated pixel fonts the README lists.Which browsers does it work in?It targets the newest versions of Chrome, Firefox and Safari. Internet Explorer and Edge are untested.
It targets the newest versions of Chrome, Firefox and Safari. Internet Explorer and Edge are untested.Is it free to use in my own projects?Yes. The code is released under the MIT License and the documentation under Creative Commons — free to use, including commercially.
Yes. The code is released under the MIT License and the documentation under Creative Commons — free to use, including commercially.Can I import the Sass sources instead of the compiled CSS?Yes. The package exposes its main Sass source file, so Sass and SCSS users can pull in the sources directly instead of the compiled CSS.
Yes. The package exposes its main Sass source file, so Sass and SCSS users can pull in the sources directly instead of the compiled CSS.How would I customize the styles and rebuild it from source?Clone the repo and use its npm build scripts: they compile the Sass, add vendor prefixes and minify the CSS. Building requires Node 10 or newer.
Clone the repo and use its npm build scripts: they compile the Sass, add vendor prefixes and minify the CSS. Building requires Node 10 or newer.Why is it called NES.css?It imitates the look of the NES (Nintendo Entertainment System, sold as the Famicom in Japan) — the Japanese part of the project description literally reads 'Famicom-style CSS framework'.
It imitates the look of the NES (Nintendo Entertainment System, sold as the Famicom in Japan) — the Japanese part of the project description literally reads 'Famicom-style CSS framework'.What are similar projects?css, yeti, mdb-ui-kit, Flat-UI, materialize, daisyui, weui, 98.css
css, yeti, mdb-ui-kit, Flat-UI, materialize, daisyui, weui, 98.cssWhich topics is it in?web-design, pixel-art, styling, retro, css-framework, scss, retrogaming, gaming, design, ui-components, css, ui
web-design, pixel-art, styling, retro, css-framework, scss, retrogaming, gaming, design, ui-components, css, ui