61

GitHub - nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレー...

 5 years ago
source link: https://github.com/nostalgic-css/NES.css
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

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

Gitter

Install

CDN

<!-- minify -->
<link href="https://unpkg.com/[email protected]/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />

OR

<!-- non-minified -->
<link href="https://unpkg.com/[email protected]/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 [email protected]:BcRikko/NES.css.git
cd NES.css

npm i

npm run watch
npm run build

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
└── 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. Code released under the MIT License. Docs released under Creative Commons.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK