NES.css is a **NES-style(8bit-like)** CSS Framework.
[![Gitter][gitter-badge]][gitter] [](http://commitizen.github.io/cz-cli/)
## Install
### CDN
```html
```
OR
```html
```
### npm
TODO: npm での使用方法を書く
## Usage
NES.css only provides components. You will need to define your own layout.
The default font is [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P) which only supports English characters. When you're using this framework with any language except English, please use another font. Please follow the [instructions](https://developers.google.com/fonts/docs/getting_started) from Google Fonts about how to include them, or simply include it as below:
NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
デフォルトでは`Press Start 2P`フォントを使っています。英語以外(日本語など)で利用される場合は、別途フォントを読み込んで使ってください。
```html
```
### Recommended Fonts
|Language|Font|
|----|----|
|(Default)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
|English|[Kongtext](https://www.dafont.com/kongtext.font)|
|Japanese|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)|
|Japanese|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|
## 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
```sh
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
```sh
.
├── 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
```
## Copyright and license
Code and documentation copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg