2018-11-27 15:04:11 +09:00
< div align = "center" >
< a href = "https://bcrikko.github.io/NES.css/" target = "_blank" > < img src = "https://user-images.githubusercontent.com/5305599/49061716-da649680-f254-11e8-9a89-d95a7407ec6a.png" alt = "NES.css: NES-style CSS framework" style = "max-width:100%;" width = "600" height = "315" > < / a >
2018-09-24 10:55:24 +09:00
2018-12-01 14:39:13 +01:00
< a href = "README.md" > English< / a > / < a href = "README-jp.md" > 日本語< / a >
2018-11-27 15:04:11 +09:00
< / div >
2018-09-24 13:35:33 +09:00
2018-12-01 14:39:13 +01:00
NES.css is a **NES-style(8bit-like)** CSS Framework.
2018-11-27 15:04:11 +09:00
2018-11-30 16:43:13 -06:00
[![Gitter][gitter-badge]][gitter] [](http://commitizen.github.io/cz-cli/)
2018-12-03 08:41:21 -06:00
2018-11-27 15:04:11 +09:00
## Install
### CDN
```html
<!-- minify -->
2018-11-28 18:22:08 +09:00
< 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" / >
2018-11-27 15:04:11 +09:00
```
OR
```html
<!-- non - minified -->
2018-11-28 18:22:08 +09:00
< 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" / >
2018-11-27 15:04:11 +09:00
```
### npm
TODO: npm での使用方法を書く
## Usage
2018-11-30 17:45:49 +08:00
NES.css only provides components. You will need to define your own layout.
2018-11-30 01:01:15 +08:00
2018-12-01 12:58:04 +01:00
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:
2018-12-01 13:43:23 +01:00
NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
デフォルトでは`Press Start 2P` フォントを使っています。英語以外（日本語など）で利用される場合は、別途フォントを読み込んで使ってください。
2018-12-01 12:58:04 +01:00
```html
< 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" / >
2018-12-01 13:44:33 +01:00
< style >
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
< / style >
2018-12-01 12:58:04 +01:00
< / head >
```
2018-11-30 01:01:15 +08:00
2018-12-01 23:40:38 +09:00
### 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/ )|
2018-11-27 15:04:11 +09:00
## CSS Only
2018-11-30 17:45:49 +08:00
NES.css only requires CSS and doesn't depend on any JavaScript.
2018-11-30 01:01:15 +08:00
2018-11-27 15:04:11 +09:00
## Browser Support
2018-11-30 17:45:49 +08:00
NES.css is compatible with the newest version of the following browsers.
2018-11-27 15:04:11 +09:00
* Chrome
* Firefox
* Safari
2018-11-30 17:45:49 +08:00
Untested
2018-11-27 15:04:11 +09:00
* IE/Edge
2018-11-29 16:50:16 +09:00
## Development
### Commands
```sh
git clone git@github .com:BcRikko/NES.css.git
cd NES.css
npm i
npm run watch
npm run build
```
2018-12-04 19:43:07 +02:00
#### Run Storybook
```
npm run storybook
```
2018-12-01 14:39:13 +01:00
Linting, formatting and building runs automatically in the pre-commit hook.
2018-11-29 16:50:16 +09:00
TODO: ビルドはCIでするように変更したい
### Directories
2018-12-01 14:37:11 +01:00
```sh
2018-11-29 16:50:16 +09:00
.
2018-12-01 14:37:11 +01:00
├── index.html: Demo page
├── style.css: Demo page style
├── css: Distribution files
2018-12-04 19:43:07 +02:00
├── docs: Storybook stories
2018-12-01 14:37:11 +01:00
└── 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
2018-11-29 16:50:16 +09:00
```
2018-11-27 15:04:11 +09:00
## 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.
2018-12-03 08:41:21 -06:00
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
