NES-style CSS Framework | ファミコン風CSSフレームワーク
Clone or download
BcRikko Merge pull request #243 from nostalgic-css/fix-is-disabled-btn-status
fix(buttons): fix is-disabled button state being able to click
Latest commit 5677c54 Jan 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci fix: Fix ci config syntax Dec 18, 2018
.github Add components dir and split css file (#224) Dec 28, 2018
.storybook Add Storybook backgrounds (#231) Dec 27, 2018
assets fix: removed background white and changed path Dec 10, 2018
docs Merge branch 'develop' into add-badges-component Dec 29, 2018
scripts Add components dir and split css file (#224) Dec 28, 2018
scss fix(buttons): fix is-disabled button state being able to click Jan 4, 2019
sketch docs(add sketch file): added sketch file and fixed favicon file Dec 17, 2018
.editorconfig ⚙️ 開発環境の構築 Sep 24, 2018
.gitignore fix: add css to .gitignore and exclude it from .npmignore Dec 7, 2018
.npmignore perf: Remove unnecessary files from package Dec 11, 2018
.prettierignore 👍 READMEの修正 Nov 27, 2018
CODE_OF_CONDUCT.md Add links for different languages Dec 23, 2018
CONTRIBUTING.md Add components dir and split css file (#224) Dec 28, 2018
LICENSE 🌱 ライセンスファイルの作成 Nov 27, 2018
README.md Add components dir and split css file (#224) Dec 28, 2018
commitlint.config.js build: fix config files Dec 5, 2018
favicon.png docs(add sketch file): added sketch file and fixed favicon file Dec 17, 2018
index.html feat(index.html): added reddit, whatsapp, gmail and linkedin is-small ( Jan 3, 2019
package-lock.json Add components dir and split css file (#224) Dec 28, 2018
package.json Add components dir and split css file (#224) Dec 28, 2018
style.css refactor(select): add @BcRikko's suggestions for the select component Dec 22, 2018

README.md

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

Gitter Commitizen friendly

Installation

Styles

NES.css is available via either npm (preferred) or 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

via CDN

Import the CSS via a <link /> element:

<!-- minify -->
<link href="https://unpkg.com/nes.css@1.0.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css/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 둥근모꼴

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!