NES-style CSS Framework | ファミコン風CSSフレームワーク

  • By null
  • Last update: Jan 4, 2023
  • Comments: 15

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

Gitter Commitizen friendly

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 file
  • style - 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/[email protected]/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/[email protected]/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!

Github

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

Comments(15)

  • 1

    🐁 add cursor

    Hey! I wanted to solve this issue: https://github.com/BcRikko/NES.css/issues/2.

    I saw how you did the icons with the pixelize mixin, however, as far as I know, the cursor property can only receive an URL. So I added the images folder and cursor-url variable which holds the url for the cursor.png. MDN Docs Reference for cursor.

    Also, I wasn't very sure how to test this, I don't know how to build the project. I wanted either a .css file or a URL to import it. So I couldn't test this branch :slightly_frowning_face: .

    Can you help me to do this? I am not that good in CSS at all hahha.

  • 2

    More icons

    Is there any way we can get more social-media icons? Like Gmail, Youtube, and phone number? :heart: Or how can i make it?

    • [X] Medium
    • [X] Twitch
    • [X] Google
    • [X] Youtube
    • [x] Phone
  • 3

    Buttons color Error

    The color of the buttons stays the same when you click it then you need to click other place to restore the original button color. It's a little hard to explain.

    ezgif com-video-to-gif

  • 4

Popular Tag

Related