diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..5ddada6 --- /dev/null +++ b/CONTRIBUTING.md @@ -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/ diff --git a/README.md b/README.md index d7aa5c8..2d1af23 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,34 @@ -
- NES.css: NES-style CSS framework +
+ NES.css: NES-style CSS framework English / 日本語 / Español / Português
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 `` element: ```html @@ -19,29 +37,28 @@ NES.css is a **NES-style(8bit-like)** CSS Framework. ``` -OR +### Fonts -```html - - - - -``` +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 +