a34cac4aca
Hehehehe, this is really cool. I've removed the hardcoded version number from `nes.scss` and
replaced it with a custom function. This function does all sorts of cool stuff.
1. **Injects the framework version from `package.json`
This prevents us from having to inject the version number manually.
2. **Adds build info…**
The branch that the CSS was built from, when it was built, what version of Node was used… All of the useful information that we could possibly provide. If it’s built on CircleCI, it even includes the build number.
3. **…but not too much build info**
If the build is running against the `master` branch, we only inject the framework version. No need to bloat production builds with all the other junk. 😁
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" />
OR
<!-- 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. Please follow the instructions from Google Fonts about how to include them, or simply include it as below:
<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" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
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
Copyright and license
Code and documentation copyright 2018 B.C.Rikko. Code released under the MIT License. Docs released under Creative Commons.