NES.css: A CSS repository from albertodeago

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

Install

CDN

<!-- minify -->
<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />

<!-- non-minified -->
<link href="https://unpkg.com/nes.css@0.0.2/css/nes.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />

npm

TODO: npm での使用方法を書く

Usage

NES.css only provides components. You will need to define your own layout.

The default font is Press Start 2P which only supports English characters. When you're using this framework with any language except English, please use another font.

Recommended Fonts

Language	Font
(Default)	Press Start 2P
English	Kongtext
Japanese	美咲フォント
Japanese	Nu もち

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

Development

Commands

git clone git@github.com:BcRikko/NES.css.git
cd NES.css

npm i

npm run watch
npm run build

Run Storybook

npm run storybook

Linting, formatting and building runs automatically in the pre-commit hook. TODO: ビルドはCIでするように変更したい

Directories

.
├── index.html: Demo page
├── style.css: Demo page style
├── css: Distribution files
├── docs: Storybook stories
└── scss: Source
    ├── base
    │   ├── reboot.scss: Don't change! (Bootstrap Reboot)
    │   ├── generic.scss: Generic style and reboot.css
    │   └── variables.scss: Common variables
    ├── elements
    ├── form
    ├── icons: 16x16 icons
    ├── pixel-arts: For icons other than 16x16.
    └── utilities

albertodeago/NES.css