DOCSEARCHbyAlgolia
Submit Docs

NES.css

repository·develop·Indexed 12 days ago

https://github.com/nostalgic-css/nes.css

An 8-bit, NES-style CSS framework for creating nostalgic, retro-themed user interfaces. It provides a collection of CSS components without requiring JavaScript or a built-in layout system.

Tokens
720
Snippets
3
Records
5
Agent score
48%

What's inside NES.css

  1. Core concepts of NES.css usage

    develop
    NES.css is a CSS-only framework that provides UI components. It does not include any JavaScript and does not provide a layout system. You are responsible for defining your own page layout and positioning components.

  2. Configure fonts for NES.css

    develop

    NES.css does not include fonts. The recommended font is Press Start 2P, which is ideal for English characters. If you are using other languages, you must provide a compatible font (e.g., Zpix for Chinese, Nu Mochi for Japanese).

    To apply a font globally, include the font stylesheet and override the font-family for standard elements in your CSS:

    <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>

  3. Install NES.css via CDN

    develop

    You can import NES.css directly into your HTML using a <link /> element from unpkg. You can choose between the minified version, the latest version, or the core styles only.

    <!-- 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" />

  4. Install NES.css via package managers

    develop

    You can install NES.css using npm or Yarn. Once installed, you can access the main Sass source file via the sass key in package.json or the non-minified CSS via the style key.

    To use with Sass/SCSS:

    @import "./node_modules/nes.css/css/nes.css"

    To use with JavaScript (requires css-loader):

    import "nes.css/css/nes.min.css";

    To use directly in HTML:

    <link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
    npm install nes.css
# or
yarn add nes.css

  5. Recommended fonts for NES.css

    develop

    Since NES.css is designed for an 8-bit aesthetic, use the following recommended fonts for different languages:

    LanguageFont
    (Default)Press Start 2P
    EnglishKongtext
    Japanese美咲フォント
    JapaneseNu もち
    Korean둥근모꼴
    ChineseZpix (最像素)