NES.css: NES-style  CSS framework English / 日本語
NES.css is a **NES-style(8bit-like)** CSS Framework. [![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](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