mirror_css/nes.css
1
0
Fork 0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-30 09:20:02 +02:00
Code Issues Releases Wiki Activity

docs: Update README and add CONTRIBUTING

Browse Source 
I've moved all of the development information from `README.md` to `CONTRIBUTING.md`, plus added some
information that I included in a lot of my other contributing instructions.
This commit is contained in:
Trezy
2018-12-10 23:26:36 -06:00
parent 8acab18bfd
commit 9352ea9ced
2 changed files with 142 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,100 @@
# Contributing
You want to contribute to the project? Awesome!
## Things to know
This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code. Please see our [Code of Conduct][code-of-conduct] for details on reporting unacceptable behavior.
**Working on your first Pull Request?**
[How to Contribute to an Open Source Project on GitHub][egghead]
## How do
* Project setup?
[We've got you covered!](#project-setup)
* Found a bug?
[Let us know!][new-issue]
* Patched a bug?
[Make a PR!][new-pr]
* Adding a new feature?
Make sure to [open an issue][new-issue] describing your feature, then open a [new PR][new-pr] when you're ready for feedback!
## Project setup
We're really happy you want to contribute to the project! ❤️ The following steps will get you up and running:
1. Fork and clone the repo
2. Install the required dependencies:
```sh
$ npm install
```
3. Start up the dev server:
```sh
$ npm run storybook
```
### 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
```
> Tip: Keep your `master` branch pointing at the original repository and make pull requests from branches on your fork. To do this, run:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> This will add the original repository as a "remote" called "upstream," Then fetch the git information from that remote, then set your local `master` branch to use the upstream master branch whenever you run `git pull`. Then you can make all of your pull request branches based on this `master` branch. Whenever you want to update your version of `master`, do a regular `git pull`.
## Contributing for members of the `nostalgic-css` organization
Below are steps which must be followed by the members of the `nostalgic-css` organization. External collaborators only have to follow the above guidelines.
### Steps for development
1. Branch from `develop` using the formatting rules below.
2. Do the work required to satisfy the issue. If you identify work that is unrelated to the issue, please [create a new issue][new-issue] and do the work on a separate branch.
3. Submit your PRs to merge back into `develop`.
* Any change which would affect current development should be documented in the description.
* PRs with an issue should be include that issue's number in the title. IE: `[#33] Fix bug`
* Assign the PR to yourself.
* When the PR is ready to be merged, A review should be requested from the `nostalgic-css/NES.css` team.
4. Once the PR is approved, it is the responsibility of the **assignee** to merge the changes to the branch.
### Commit formatting
We use [Commitizen][commitizen] and [`commitlint`][commitlint] to make sure all of the commits to the project are easy to read, and [`semantic-release`][semantic-release] to ensure that our releases are automated, [unromantic, and unsentimental][sentimental-versioning].
[all-contributors]: https://github.com/kentcdodds/all-contributors
[code-of-conduct]: https://github.com/nostalgic-css/NES.css/blob/master/CODE_OF_CONDUCT.md
[commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github
[new-issue]: https://github.com/nostalgic-css/NES.css/issues/new
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/

112
README.md
View File

@@ -1,16 +1,34 @@
<div align="center">
<a href="https://nostalgic-css.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>
<div style="text-align: center;">
<a href="https://nostalgic-css.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>
<a href="README.md">English</a> / <a href="README-jp.md">日本語</a> / <a href="README-es.md">Español</a> / <a href="README-pt-BR.md">Português</a>
</div>
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/)
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Install
## Installation
### CDN
### Styles
NES.css is available via either npm (preferred) or Yarn, or a CDN.
#### via package manager
```shell
npm install nes.css
# or
yarn add nes.css
```
Our `package.json` contains some additional metadata under the following keys:
* `sass` - path to our main Sass source file
* `style` - path to our non-minified CSS
#### via CDN
Import the CSS via a `<link />` element:
```html
<!-- minify -->
@@ -19,29 +37,28 @@ NES.css is a **NES-style(8bit-like)** CSS Framework.
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
```
OR
### Fonts
```html
<!-- 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" />
```
NES.css doesn't provide any fonts, but we do maintain the following list of fonts that we recommend for usage alongside the library.
### npm
TODO: npm での使用方法を書く
| 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/) |
## 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:
The recommended font for NES.css is [Press Start 2P][press-start-2p-font]. However, [Press Start 2P][press-start-2p-font] only supports English characters. When you're using this framework with any language other than English, please use another font. Follow the Google Fonts [instructions][google-fonts-guide] about how to include them, or simply include it as below:
```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" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
@@ -50,21 +67,10 @@ The default font is [Press Start 2P](https://fonts.google.com/specimen/Press+Sta
</head>
```
### 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.
@@ -75,56 +81,22 @@ NES.css is compatible with the newest version of the following browsers.
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.
## Development
If you'd like to help us out with the project, we welcome contributions of all types! Check out our [`CONTRIBUTING.md`][contributing-document] for more details on how you can help make NES.css amazing!
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: https://github.com/nostalgic-css/NES.css/blob/master/CONTRIBUTING.md
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg
[google-fonts-guide]: https://developers.google.com/fonts/docs/getting_started
[press-start-2p-font]: https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P