1
0
mirror of https://github.com/nostalgic-css/NES.css.git synced 2025-08-21 13:31:24 +02:00

Merge branch 'develop' into autoupdate-version

This commit is contained in:
Trezy
2018-12-16 22:55:42 -06:00
18 changed files with 1007 additions and 467 deletions

56
.github/CODE_OF_CONDUCT-es.md vendored Normal file
View File

@@ -0,0 +1,56 @@
# Código de Conducta convenido para Contribuyentes
Ver este documento en otro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
## Nuestro compromiso
En el interés de fomentar una comunidad abierta y acogedora, nosotros como contribuyentes y administradores nos comprometemos a hacer de la participación en nuestro proyecto y nuestra comunidad una experiencia libre de acoso para todos, independientemente de la edad, dimensión corporal, discapacidad, etnia, identidad y expresión de género, nivel de experiencia, nacionalidad, apariencia física, raza, religión, identidad u orientación sexual.
## Nuestros estándares
Ejemplos de comportamiento que contribuyen a crear un ambiente positivo:
* Uso de lenguaje amable e inclusivo
* Respeto a diferentes puntos de vista y experiencias
* Aceptación de críticas constructivas
* Enfocarse en lo que es mejor para la comunidad
* Mostrar empatía a otros miembros de la comunidad
Ejemplos de comportamiento inaceptable por participantes:
* Uso de lenguaje o imágenes sexuales y atención sexual no deseada
* Comentarios insultantes o despectivos (*trolling*) y ataques personales o políticos
* Acoso público o privado
* Publicación de información privada de terceros sin su consentimiento, como direcciones físicas o electrónicas
* Otros tipos de conducta que pudieran considerarse inapropiadas en un entorno profesional.
## Nuestras responsabilidades
Los administradores del proyecto son responsables de clarificar los estándares de comportamiento aceptable y se espera que tomen medidas correctivas y apropiadas en respuesta a situaciones de conducta inaceptable.
Los administradores del proyecto tienen el derecho y la responsabilidad de eliminar, editar o rechazar comentarios, *commits*, código, ediciones de documentación, *issues*, y otras contribuciones que no estén alineadas con este Código de Conducta, o de prohibir temporal o permanentemente a cualquier colaborador cuyo comportamiento sea inapropiado, amenazante, ofensivo o perjudicial.
## Alcance
Este código de conducta aplica tanto a espacios del proyecto como a espacios públicos donde un individuo esté en representación del proyecto o comunidad. Ejemplos de esto incluye el uso de la cuenta oficial de correo electrónico, publicaciones a través de las redes sociales oficiales, o presentaciones con personas designadas en eventos *online* u *offline*. La representación del proyecto puede ser clarificada explicitamente por los administradores del proyecto.
## Aplicación
Ejemplos de abuso, acoso u otro tipo de comportamiento inaceptable puede ser reportado al equipo del proyecto en [support@nostalgi.cc][support-email]. Si no deseas contactar a todo el equipo, siéntete libre de contartar a cualquiera de manera individual:
* B. C. Rikko <[bcrikko@example.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
Todas los reportes serán revisadas e investigadas, lo que resultará en una respuesta adecuada a las necesidades y circunstancias. El equipo del proyecto está obligado a mantener confidencialidad de la persona que reportó el incidente. Detalles específicos acerca de las políticas de aplicación pueden ser publicadas por separado.
Administradores que no sigan o que no hagan cumplir este Código de Conducta pueden ser eliminados de forma temporal o permanente del equipo administrador.
## Atribución
Este Código de Conducta es una adaptación del [Contributor Covenant][homepage], versión 1.4, disponible en https://www.contributor-covenant.org/es/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/

56
.github/CODE_OF_CONDUCT-jp.md vendored Normal file
View File

@@ -0,0 +1,56 @@
# コントリビューター行動規範
このドキュメントを別の言語で表示する:
[English](CONTRIBUTING.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
## 私たちの約束
私たちはオープンかつ友好的なコミュニティーを育成するために、コントリビューターやメンテナーとして、年齢、体型、障碍、民族性、性自認および性別表現、経験レベル、国籍、個人の容姿、人種、信仰、性的同一性および指向に関わりなく、私たちのプロジェクトやコミュニティーへの参加を誰にとっても嫌がらせのない体験にすることを誓います。
## 私たちの標準
前向きな環境を作り上げることに貢献する振る舞いの例:
* 友好的かつ男女包括用語の使用
* 異なる観点や経験の尊重
* 建設的批判の率直な受容
* コミュニティーにとっての最善への集中
* 他のコミュニティーメンバーへの共感
参加者による容認できない行動の例:
* 性的な意味を含む言葉や画像、相手の意思に反した性的関心や接近
* あおり、侮辱的または軽蔑的なコメント、個人攻撃や政治攻撃
* 公的または私的な嫌がらせ
* 住所、メールアドレスなど、他者のプライベート情報の明示的な許可なき公開
* 職場において合理的に不適切であると考えられる他の行為
## 私たちの責任
プロジェクトのメンテナーは、許容できる行動の基準を明確にすることに責任があります。また、何かしらの許容できない行動に対応する、適切かつ公平な是正処置をとることが期待されています。
プロジェクトのメンテナーは、この行動規範に沿っていない、コメント、コミット、コード、wiki編集、issue、その他の貢献を削除、編集、拒否する権利と義務を有します。また、他の不適切、脅迫的、攻撃的、嫌がらせと考えられる行動を取ったコントリビューターを一時的もしくは恒久的に追放する権利と義務を有します。
## 適用範囲
この行動規範は、個人がプロジェクトやそのコミュニティーを代表するとき、プロジェクト内と公共空間の両方において適用されます。プロジェクトやコミュニティーを代表する例として、プロジェクトの公式メールアドレスの使用、ソーシャルメディアの公式アカウント経由の投稿、指名された代表としてのオンラインやオフラインのイベントにおける行動があります。プロジェクトを代表することは、プロジェクトのメンテナーにより、さらに定義され明確化される可能性があります。
## 執行
暴言、嫌がらせ、またはそれ以外の受け入れられない行動は、[support@nostalgi.cc][support-email]に連絡して、プロジェクトチームに報告される可能性があります。プロジェクトチームに連絡することが望ましくない場合は、以下のいずれかにお気軽にお問い合わせください:
* B.C.Rikko <[b.c.rikko@gmail.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
すべての苦情は、レビュー、調査され、必要かつ適切と判断された対応がとられます。プロジェクトチームは、事象の報告者に関する守秘義務があります。具体的な執行に関する詳細が別途設定されているかもしれません。
この行動規範に誠意を持って従うまたは執行することができないプロジェクトのメンテナーは、プロジェクトをリードしている他のメンバーの判断により、一時的または恒久的な影響を受けることがあります。
## 帰属
この行動規範は[http://contributor-covenant.org/version/1/4][version]にある[Contributor Covenant][homepage]に バージョン1.4 に適合しています。
[homepage]: http://contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/

56
.github/CODE_OF_CONDUCT-pt-BR.md vendored Normal file
View File

@@ -0,0 +1,56 @@
# Código de Conduta para Colaboradores
Veja este documento em outro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md)
## Nossa promessa
Com o interesse de fomentar uma comunidade aberta e acolhedora, nós, como colaboradores e administradores deste projeto, comprometemo-nos a fazer a participação deste projeto uma experiência livre de assédio para todos, independentemente da aparência pessoal, deficiência, etnia, gênero, idade, identidade ou expressão de gênero, identidade ou orientação sexual, nacionalidade, nível de experiência, porte físico, raça ou religião.
## Nossos padrões
Exemplos de comportamentos que contribuem a criar um ambiente positivo incluem:
* Usar linguagem acolhedora e inclusiva
* Respeitar pontos de vista e experiências diferentes
* Aceitar crítica construtiva com graça
* Focar no que é melhor para a comunidade
* Mostrar empatia com outros membros da comunidade
Exemplos de comportamentos inaceitáveis por parte dos participantes incluem:
* Uso de linguagem ou imagens sexuais e atenção ou avanço sexual indesejada
* Comentários insultuosos e/ou depreciativos e ataques pessoais ou políticos (Trolling)
* Assédio público ou privado
* Publicar informação pessoal de outros sem permissão explícita, como, por exemplo, um endereço eletrônico ou residencial
* Qualquer outra forma de conduta que pode ser razoavelmente considerada inapropriada num ambiente profissional
## Nossas responsibilidades
Os administradores do projeto são responsáveis por esclarecer os padrões de comportamento e deverão tomar ação corretiva apropriada e justa em resposta a qualquer instância de comportamento inaceitável.
Os administradores do projeto têm o direito e a responsabilidade de remover, editar ou rejeitar comentários, commits, código, edições na wiki, erros ou outras formas de contribuição que não estejam de acordo com este Código de Conduta, bem como banir temporariamente ou permanentemente qualquer colaborador por qualquer outro comportamento que se considere impróprio, perigoso, ofensivo ou problemático.
## Escopo
Este Código de Conduta aplica-se dentro dos espaços do projeto ou qualquer espaço público onde alguém represente o mesmo ou a sua comunidade. Exemplos de representação do projeto ou comunidade incluem usar um endereço de email oficial do projeto, postar por uma conta de mídia social oficial, ou agir como um representante designado num evento online ou offline. A representação de um projeto pode ser ainda definida e esclarecida pelos administradores do projeto.
## Aplicação
Comportamento abusivo, de assédio ou de outros tipos pode ser comunicado contatando a equipe do projeto [support@nostalgi.cc][support-email]. If contacting the full project team is not desirable, feel free to contact any of them individually:
* B.C.Rikko <[b.c.rikko@gmail.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
Todas as queixas serão revistas e investigadas e resultarão numa resposta necessária e apropriada à situação. A equipe é obrigada a manter a confidencialidade em relação ao elemento que reportou o incidente. Demais detalhes de políticas de aplicação podem ser postadas separadamente.
Administradores do projeto que não sigam ou não mantenham o Código de Conduta em boa fé podem enfrentar repercussões temporárias ou permanentes determinadas por outros membros da liderança do projeto.
## Atribuição
Este Código de Conduta é adaptado do [Contributor Covenant][homepage], versão 1.4, disponível em [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/

102
.github/CONTRIBUTING-es.md vendored Normal file
View File

@@ -0,0 +1,102 @@
# Contribución
Ver este documento en otro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
¿Quieres contribuir al proyecto? ¡Genial!
## Cosas que tienes que saber
Este proyecto se apega al Código de Conducta convenido para Contribuyentes. Al participar, se espera que te apegues a este código. Por favor, revisa nuestro [Código de Conducta][code-of-conduct] para más información acerca de reportar comportamiento no apropiado.
**¿Trabajando en tu primer Pull Request?**
[Cómo contribuir a un proyecto de código abierto en GitHub][egghead]
## Cómo
* ¿Configuración del proyecto?
[¡Te tenemos cubierto!](#project-setup)
* ¿Encontraste un bug?
[¡Házlono saber!][new-issue]
* ¿Arreglaste un bug?
[¡Haz un PR!][new-pr]
* ¿Agregando una nueva característica?
Asegúrate de [abrir un issue][new-issue] describiendo tu característica o mejora, ¡Después abre un [nuevo PR][new-pr] cuando estés listo para recibir retroalimentación!
## Configuración del proyecto
¡Estamos muy felices porque quieras contribuir al proyecto! ❤️ Los siguientes pasos te ayudarán a poner el proyecto en marcha:
1. Haz un Fork y Clon del repositorio.
2. Instala las dependencias necesarias:
```sh
$ npm install
```
3. Ejecuta el servidor de desarrollo:
```sh
$ npm run storybook
```
### Directorios
```sh
.
├── index.html: Página demo
├── style.css: Estilo de la página demo
├── css: Archivos de distribución
├── docs: Storybook stories
└── scss: Código fuente
├── base
│ ├── reboot.scss: ¡No cambiar! (Bootstrap Reboot)
│ ├── generic.scss: Estilo general y reboot.css
│ └── variables.scss: Variables comunes
├── elements
├── form
├── icons: Iconos 16x16
├── pixel-arts: Para iconos que no son 16x16.
└── utilities
```
> Tip: Manten tu rama `master` apuntando al repositorio original y haz pull request de las ramas en tu fork. Para hacer esto, ejecuta:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> Esto añadirá el repositorio original como un "remoto" llamado "upstream", *fetch* la información de git desde el remoto, y configura tu rama local `master` para utilizar la rama `upstream/master` cuando ejecutes `git pull`. En este punto, tú puedes crear todas tus ramas desde esta rama `master`. Cuando quieras actualizar tu versión de `master`, haz un `git pull`.
## Contribución para miembros de la organización `nostalgic-css`
Debajo hay pasos, los cuales deben ser seguidos por los miembros de `nostalgic-css`. Colaboradores externos sólo tienen que seguir los pasos anteriores.
### Pasos para desarrollo
1. Haz una rama desde `develop` utilizando las siguientes reglas de tomato.
2. Haz el trabajo para resolver el *issue*. Si identificas trabajo que no está relacionado con el *issue*, por favor [crea un nuevo issue][new-issue] y haz el trabajo en una rama independiente.
3. Envía tus PRs a hacer *merge* en `develop`.
* Todo cambio que pueda afectar el desarrollo actual deberá ser documentado en la descripción.
* PRs con un *issue* deberán incluir en el título el número del *issue*. E.g. `[#33] Arregla bug`
* Asígnate el PR.
* Cuando el PR esté listo mara ser unido, se deberá solicitar una revisión por parte el equipo de `nostalgic-css/NES.css´.
4. Una vez que el PR sea aprobado, será responsabilidad de la persona **encargada** de unir los cambios a la rama.
### Formatos de commit
Utilizamos [Commitizen][commitizen] and [`commitlint`][commitlint] para asegurarnos que nuestros lanzamientos sean automáticos, [unromantic, and unsentimental][sentimental-versioning].
[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/

102
.github/CONTRIBUTING-jp.md vendored Normal file
View File

@@ -0,0 +1,102 @@
# 貢献する
このドキュメントを別の言語で表示する:
[English](CONTRIBUTING.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
このプロジェクトに貢献したいですか?素晴らしい!
## 知るべきこと
このプロジェクトはコントリビューター行動規範に準拠しています。参加する場合、あなたにはこの規範を守ることが求められます。許容できない行為の報告の詳細については[行動規範][code-of-conduct]をご覧ください。
**はじめてのPull Requestに取り組んでいますか?**
[GitHubでオープンソースプロジェクトに貢献する方法][egghead]
## どのように行うか
* プロジェクトのセットアップは?
[カバーしています!](#project-setup)
* バグを見つけましたか?
[お知らせください!][new-issue]
* バグを修正しましたか?
[PRをつくってください][new-pr]
* 新しい機能を追加しましたか?
必ず機能を説明する[Issueを立てて][new-issue]ください。フィードバックの準備ができたら、[新しいPR][new-pr]を作成してください!
## プロジェクトの設定
私たちはあなたがプロジェクトに貢献したいと思ってくれることを非常に嬉しく思います! :heart: 以下の手順を実行すると準備ができます:
1. リポジトリをフォークし、クローンする
2. 必要な依存関係をインストールする:
```sh
$ npm install
```
3. 開発用サーバを起動する:
```sh
$ npm run storybook
```
### ディレクトリ
```sh
.
├── index.html: デモページ
├── style.css: デモページのスタイル
├── css: 配布用ファイル
├── docs: Storybookのストーリー
└── scss: ソースファイル
├── base
│ ├── reboot.scss: 変更しないで! (Bootstrap Reboot)
│ ├── generic.scss: 一般的なスタイルとreboot.cssの上書き
│ └── variables.scss: 共通変数
├── elements
├── form
├── icons: 16x16のアイコン
├── pixel-arts: 16x16以外のアイコン
└── utilities
```
> Tip: あなたの`master`ブランチは元のリポジトリを指すようにし、フォークしたブランチからPull Requestを作成します。これを行うには:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> これにより、元のリポジトリが"upstream"という名前の"remote"として追加されます。そのリモートからgitの情報を取得し、`git pull`を実行する度に`upstream/master`ブランチを使用するように、`master`ブランチを設定します。この時点で、この`master`ブランチからすべてのブランチを作成することができます。あなたの`master`のバージョンを更新したいときは、通常の`git pull`を行います。
## `nostalgic-css` Organizationのメンバーに貢献する
以下は、`nostalgic-css` Organizationのメンバーが従わなければならない手順です。外部のコラボレーターは、上記のガイドラインに従うだけです。
### 開発手順
1. 以下の書式ルールで`develop`からブランチを切る。
2. Issue対応に必要な作業。Issueに関係のない問題がある場合は、[新しいIssueを立てて][new-issue]別ブランチで作業してください。
3. `develop`にマージするようPRを作成する
* 現在の開発に影響を与えるような変更は、その説明を文書化する必要があります。
* PRのタイトルにIssue番号を含める必要があります。 IE: `[#33] Fix bug`
* 自分自身にPRをアサインします。
* PRがマージできるようになったら、レビューは`nostalgic-css/NES.css`チームから依頼する必要があります。
4. PRが承認されたら、変更をマージするのは**assignee**の仕事です。
### コミットフォーマット
プロジェクトへのすべてのコミットは[Commitizen][commitizen]と[`commitlint`][commitlint]を使って読みやすいようにします。さらにリリースが自動化され、[ロマンティックでなく、センチメンタルでもない][sentimental-versioning]ことを保証するために[`semantic-release`]を使用します。
[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/

102
.github/CONTRIBUTING-pt-BR.md vendored Normal file
View File

@@ -0,0 +1,102 @@
# Contribuindo
Veja este documento em outro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md)
Quer contribuir para este projeto? Legal!
## Coisas para saber
Este projeto adere o código de conduta "Contributor Covenant". Ao participar do projeto, é esperado que você apoie este código. Por favor, verifique o [Código de conduta][code-of-conduct] para mais detalhes sobre como reportar comportamentos inaceitáveis.
**Trabalhando em sua primeira Pull Request?**
[Como Realizar uma Contribuição em um Projeto Open Source no GitHub][egghead]
## Como
* Configurar o projeto?
[Nós te ajudamos com isto!](#project-setup)
* Encontrou um bug?
[Nos avise!][new-issue]
* Corrigiu um bug?
[Faça uma PR!][new-pr]
* Adicionando uma nova funcionalidade?
Certifique-se de [abrir uma issue][new-issue] descrevendo sua funcionalidade, em seguida faça uma [nova PR][new-pr] quando estiver pronto para o feedback!
## Configurar o projeto
Nós estamos muito felizes de você querer contribuir para o projeto! Os próximos passos irão deixá-lo pronto em pouco tempo:
1. Fork e clone o repositório
2. Instale as dependências necessárias:
```sh
$ npm install
```
3. Inicie o servidor de desenvolvimento:
```sh
$ npm run storybook
```
### Diretórios
```sh
.
├── index.html: Página de demonstração
├── style.css: Estilização da página de demonstração
├── css: Arquivos de distribuição
├── docs: "Histórias" Storybook
└── scss: Código fonte
├── base
│ ├── reboot.scss: Não modifique-o! (Bootstrap Reboot)
│ ├── generic.scss: Estilização genérica e reboot.css
│ └── variables.scss: Variáveis em comum
├── elements
├── form
├── icons: 16x16 icons
├── pixel-arts: Para ícones que não são 16x16.
└── utilities
```
> Dica: Deixa sua branch `master` apontando para o repositório de origem, e faça suas pull requests de branchs do seu fork. Para realizar isto, execute:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> Isto irá adicionar o repositório de origem como um repositório "remoto" chamado de "upstream", então busque as informações do git deste repositório remoto, em seguida defina que a sua branch `master` local irá usar a branch `master` chamada de "upstream" toda vez que você executar o comando `git pull`. Por fim, você poderá executar todas as suas branchs para pull requests com base nesta branch `master`. Toda vez que você desejar atualizar sua versão da `master`, basta realizar um `git pull`.
## Informações de contribuição para os membros da organização `nostalgic-css`
Abaixo estão os passos que devem ser seguidos pelos membros da organização `nostalgic-css`. Colaboradores externos deverão seguir apenas as diretrizes acima.
### Passos para o desenvolvimento
1. Crie uma branch a partir da `develop`, utilizando as regras de formação abaixo.
2. Faça o trabalho requerido para satisfazer toda a issue. Se você identificar algum trabalho não relacionado a esta issue, por favor [crie uma nova issue][new-issue] e faça este trabalho em uma branch separada.
3. Envie suas PRs para serem realizadas o merge de volta a `develop`.
* Qualquer mudança que possa afetar o desenvolvimento atual, deve ser documentada na descrição.
* PRs que possuam issue deverão ter seus números inclusos nos títulos. IE: `[#33] Fix bug`
* Atribua (assign) a PR para você mesmo.
* Quando a PR estiver pronta para a realização do merge, Uma revisão deve ser solicitada à equipe `nostalgic-css/NES.css`.
4. Uma vez que a PR for aprovada, é de responsabilidade do **atribuído** realizar o merge das mudanças para a branch.
### Formatação de commit
Nós usamos [Commitizen][commitizen] e [`commitlint`][commitlint] a fim de assegurar que todos os commits feitos para o projeto sejam fáceis de ler, e [`semantic-release`][semantic-release] para assegurar que nossas releases sejam automatizadas, [sem romance, e sem sentimentos][sentimental-versioning].
[code-of-conduct]: https://github.com/nostalgic-css/NES.css/blob/master/CODE_OF_CONDUCT-pt-BR.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/

104
.github/README-es.md vendored Normal file
View File

@@ -0,0 +1,104 @@
<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>
<a href="README.md">English</a> / <a href=".github/README-jp.md">日本語</a> / <a href=".github/README-pt-BR.md">Português</a>
</div>
NES.css is a **NES-style(8bit-like)** CSS Framework.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Instalación
### Hojas de estilo
NES.css se encuentra disponible a través de npm (preferente), Yarn o un CDN.
#### Vía gestor de paquetes
```shell
npm install nes.css
# o
yarn add nes.css
```
Nuestro `package.json` contiene metadata adicional bajo las siguientes keys:
* `sass` - path to our main Sass source file
* `style` - path to our non-minified CSS
#### Vía CDN
Importa el CSS utiliando un elemento `<link />`:
```html
<!-- minificado -->
<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
<!-- último -->
<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
```
### Tipografías
NES.css no contiene ninguna tipografía, pero recomendamos la siguiente lista de tipografías para utilizar junto a la biblioteca.
| Idioma | Tipografía |
|-----------|--------------------------------------------------------------------|
| (Default) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| Inglés | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japonés | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm) |
| Japonés | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Coreano | [둥근모꼴](http://cactus.tistory.com/193) |
## Uso
NES.css sólo contiene componentes. Tú tienes que definir tu propio diseño.
La tipografía recomendada para utilizar junto a NES.css es [Press Start 2P][press-start-2p-font]. Sin embargo, [Press Start 2P][press-start-2p-font] sólo soporta caracteres latinos. Si utilizas este framework con otro idioma, por favor utiliza otra tipografía. Sigue las [instrucciones][google-fonts-guide] de Google Fonts acerca de como incluirlas, o simplemente utilizalas como se muestra a continuación:
```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";
}
</style>
</head>
```
## Sólo CSS
NES.css sólo requiere de CSS y no depende de JavaScript.
## Soporte de navegadores
NES.css es compatible con las versiones más recientes de los siguientes navegadores.
* Chrome
* Firefox
* Safari
Sin probar
* IE/Edge
## Derechos de autor y licencia
Código y documentación copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Código publicado con Licencia MIT. Documentación publicada con Creative Commons.
## Desarrollo
Si deseas colaborar con el proyecto ¡Recibimos todo tipo de contribuciones! ¡Revisa nuestro [`CONTRIBUTING-es.md`][contributing-document] para más información acerca de cómo puedes ayudar a hacer NES.css algo grandioso!
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: .github/CONTRIBUTING-es.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

104
.github/README-jp.md vendored Normal file
View File

@@ -0,0 +1,104 @@
<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>
<a href="README.md">English</a> / <a href="README-es.md">Español</a> / <a href="README-pt-BR.md">Português</a>
</div>
NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## インストール
### スタイル
NES.cssはnpm(推奨)、またはYarn、CDNのいずれかを介して利用できます。
#### パッケージマネージャを使う場合
```shell
npm install nes.css
# or
yarn add nes.css
```
私たちの`package.json`には、以下のキーの配下にいくつかの追加のメタデータが含まれています:
* `sass` - メインのSassソースファイルへのパス
* `style` - 非圧縮のCSSへのパス
#### CDNを使う場合
`<link />`要素を使ってCSSをインポートする:
```html
<!-- 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" />
```
### フォント
NES.cssはいかなるフォントも提供していませんが、ライブラリと一緒に使用をお勧めするフォントリストを整備しています。
| 言語 | フォント |
|-----------|--------------------------------------------------------------------|
| (デフォルト) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| 英語 | [Kongtext](https://www.dafont.com/kongtext.font) |
| 日本語 | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm) |
| 日本語 | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| 韓国語 | [둥근모꼴](http://cactus.tistory.com/193) |
## 使い方
NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
NES.cssの推奨フォントは[Press Start 2P][press-start-2p-font]です。ただし、[Press Start 2P][press-start-2p-font]は英語の文字のみをサポートしています。英語以外の言語でこのフレームワークを使用する場合は、別のフォントを使用してください。それらを読み込む方法は方法はGoogle Fontsの[指示][google-fonts-guide]に従うか、以下のように読み込んでください。
```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";
}
</style>
</head>
```
## CSSのみ
NES.cssはCSSのみで構成されており、JavaScriptには依存しません。
## ブラウザサポート
NES.cssは次のブラウザの最新バージョンと互換性があります。
* Chrome
* Firefox
* Safari
未確認
* IE/Edge
## コピーライトとライセンス
コードとドキュメント copyright 2018 [B.C.Rikko](https://github.com/BcRikko). コードはMITライセンスの下で公開されています。ドキュメントはクリエイティブ コモンズの下で公開されています。
## 開発
このプロジェクトにご協力いただける場合は、すべてのコントリビュートを歓迎します。NES.cssを素晴らしいものにする方法の詳細は[`CONTRIBUTING.md`][contributing-document]をご覧ください。
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: 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

103
.github/README-pt-BR.md vendored Normal file
View File

@@ -0,0 +1,103 @@
<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>
<a href="README.md">English</a> / <a href=".github/README-jp.md">日本語</a> / <a href=".github/README-es.md">Español</a>
</div>
NES.css é um Framework CSS, no **estilo NES(8bit)**.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly][commitizen-badge]][commitizen]
## Instalação
### Estilos
NES.css está disponível seja através do npm (preferível) ou Yarn, ou pelo CDN.
#### via gerenciador de pacotes
```shell
npm install nes.css
# ou
yarn add nes.css
```
Nosso `package.json` contém alguns metadata adicionais, sob as seguintes chaves:
* `sass` - caminho para nosso arquivo fronte Sass principal
* `style` - caminho para nosso CSS não-minificado
### via CDN
Importe o CSS através de um elemento `<link />`:
```html
<!-- 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" />
```
### Fontes
NES.css não fornece nenhuma fonte, mas nós mantemos uma lista de fontes recomendadas por nós para a utilização em conjunto com a biblioteca.
| Idioma | Fonte |
|-----------|--------------------------------------------------------------------|
| (Padrão) | [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) |
| Inglês | [Kongtext](https://www.dafont.com/kongtext.font) |
| Japonês | [美咲フォント](http://www.geocities.jp/littlimi/misaki.htm) |
| Japonês | [Nu もち](http://kokagem.sakura.ne.jp/font/mochi/) |
| Coreano | [둥근모꼴](http://cactus.tistory.com/193) |
## Utilização
NES.css apenas fornece os componentes. Você precisará definir seu próprio layout.
A fonte recomendada para NES.css é a [Press Start 2P][press-start-2p-font]. No entanto, ela apenas fornece suporte para caracteres ingleses. Quando você estiver usando este framework em qualquer outro idioma com exceção do inglês, por favor use outra fonte. Siga as [instruções][google-fonts-guide] fornecidas pelo Google Fonts sobre como incluí-la, ou simplismente faça a inclusão como consta abaixo:
```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";
}
</style>
</head>
```
## Exclusivamente CSS
NES.css apenas usa CSS e não depende de qualquer JavaScript.
## Suporte para Browsers
NES.css é compatível com as mais novas versões dos seguintes browsers.
* Chrome
* Firefox
* Safari
Não testado
* IE/Edge
## Copyright e licença
Código e documentação copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Código lançado sobre a Licença MIT. Documentação e novos lançamentos com Creative Commons.
## Desenvolvimento
Se você quiser nos ajudar com o projeto, nós agradecemos contribuições de todos os tipos! Verifique nosso [`CONTRIBUTING-pt-BR.md`][contributing-document] para mais detalhes em como você pode ajudar a tornar o NES.css incrível!
[commitizen]: http://commitizen.github.io/cz-cli/
[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[contributing-document]: .github/CONTRIBUTING-pt-BR.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

56
CODE_OF_CONDUCT.md Normal file
View File

@@ -0,0 +1,56 @@
# Contributor Covenant Code of Conduct
View this document in another language:
[日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
## Our Pledge
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [support@nostalgi.cc][support-email]. If contacting the full project team is not desirable, feel free to contact any of them individually:
* B.C.Rikko <[b.c.rikko@gmail.com](mailto:b.c.rikko@gmail.com)>
* Igor Guastalla <[limaguastallaigor@gmail.com](mailto:limaguastallaigor@gmail.com)>
* Trezy <[tre@trezy.com](mailto:tre@trezy.com)>
All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[support-email]: mailto:support@nostalgi.cc
[version]: http://contributor-covenant.org/version/1/4/

102
CONTRIBUTING.md Normal file
View File

@@ -0,0 +1,102 @@
# Contributing
View this document in another language:
[日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
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," fetch the git information from that remote, and set your local `master` branch to use the `upstream/master` branch whenever you run `git pull`. At that point, you can create all of your branches from 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].
[code-of-conduct]: 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/

View File

@@ -1,120 +0,0 @@
<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>
<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 es un Framework CSS **Estilo-NES (8bit)**
[![Gitter][gitter-badge]][gitter]
## Instalación
### CDN
```html
<!-- 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" />
```
O
```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" />
```
### npm
TODO: npm での使用方法を書く
## Uso
NES.css sólo tiene componentes. Tienes que definir tu propio diseño.
La tipogfrafía por fefecto es Press Start 2P, la cual tiene soporte para caracteres latinos (acentos, ñ y ü).
### Tipografías recomendadas
|Idioma|Tipografía|
|----|----|
|(Default)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
|Latino|[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 sólo requiere CSS y no depende de JavaScript.
## Soporte de navegadores
NES.css es compatible con las versiones más recientes de los siguientes navegadores.
* Chrome
* Firefox
* Safari
Sin probar
* IE/Edge
## Desarrollo
### Comandos
```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 se ejecutan automáticamente en el pre-commit hook.
TODO: ビルドはCIでするように変更したい
### Directorios
```sh
.
├── index.html: Página demo
├── style.css: Estilo de página demo
├── css: Archivos de distribución
├── docs: Storybook stories
└── scss: Código fuente
├── base
│ ├── reboot.scss: ¡No cambiar! (Bootstrap Reboot)
│ ├── generic.scss: Estilo genérico y reboot.css
│ └── variables.scss: Variables comunes
├── elements
├── form
├── icons: 16x16 iconos
├── pixel-arts: Para iconos que no son 16x16.
└── utilities
```
## Derechos de autor y licencia
Código y documentación copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Código publicado con Licencia MIT. Documentación publicada con Creative Commons.
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg

View File

@@ -1,126 +0,0 @@
<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>
<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は **ファミコン風(8bit ライク)** なCSSフレームワークです。
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
## Install
### CDN
```html
<!-- 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
```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" />
```
### npm
TODO: npm での使用方法を書く
## Usage
NES.cssはコンポーネントのスタイルのみを提供しています。レイアウトはみなさんが好きなように定義してください。
デフォルトのフォントは[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P)を使っています。英語以外(日本語など)で利用される場合は、別途フォントを読み込んで使ってください。 フォントを読み込む方法は、Google Fontsの[Get Started](https://developers.google.com/fonts/docs/getting_started)を参照するか、または以下のように読み込んでください。
```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";
}
</style>
</head>
```
### Recommended Fonts
|言語|フォント|
|----|----|
|(デフォルト)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
|英語|[Kongtext](https://www.dafont.com/kongtext.font)|
|日本語|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)|
|日本語|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|
## CSS Only
NES.cssはCSSのみで構成されています。JavaScriptは不要です。
## Browser Support
次のブラウザの最新バージョンをサポートしています。
* Chrome
* Firefox
* Safari
未確認
* 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
```
pre-commit hookにより、コミット時に自動でLint→format→buildが走り、`css`ディレクトリにファイルが出力されます。
TODO: ビルドはCIでするように変更したい
### Directories
```sh
.
├── 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](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg

View File

@@ -1,131 +0,0 @@
<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>
<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 é um Framework CSS, no **estilo NES(8bit)**.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
## Instalação
### CDN
```html
<!-- 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" />
```
OU
```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" />
```
### npm
TODO: Como utilizar com npm
## Utilização
NES.css apenas fornece os componentes. Você precisará definir seu próprio layout.
A fonte padrão é a [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P) o qual oferece suporte apenas para caracteres ingleses. Quando você estiver usando este framework em qualquer outro idioma com exceção do inglês, por favor use outra fonte. Por favor, siga as [instruções](https://developers.google.com/fonts/docs/getting_started) fornecidas pelo Google Fonts sobre como incluí-la, ou simplismente faça a inclusão como consta abaixo:
```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";
}
</style>
</head>
```
### Fontes Recomendadas
|Idioma|Fonte|
|----|----|
|(Padrão)|[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)|
|Inglês|[Kongtext](https://www.dafont.com/kongtext.font)|
|Japonês|[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm)|
|Japonês|[Nu もち](http://kokagem.sakura.ne.jp/font/mochi/)|
## Exclusivamente CSS
NES.css apenas usa CSS e não depende de qualquer JavaScript.
## Suporte para Browsers
NES.css é compatível com as mais novas versões dos seguintes browsers.
* Chrome
* Firefox
* Safari
Não testado
* IE/Edge
## Desenvolvimento
### Comandos
```sh
git clone git@github.com:BcRikko/NES.css.git
cd NES.css
npm i
npm run watch
npm run build
```
#### Execute Storybook
```
npm run storybook
```
Lint, formatação e build são executados automaticamente em um hook de pré-commit.
TODO: Mudar a compilação para fazer com CI
### Diretórios
```sh
.
├── index.html: Página de demonstração
├── style.css: Estilização da página de demonstração
├── css: Arquivos de distribuição
├── docs: "Histórias" Storybook
└── scss: Código fonte
├── base
│ ├── reboot.scss: Não modifique-o! (Bootstrap Reboot)
│ ├── generic.scss: Estilização genérica e reboot.css
│ └── variables.scss: Variáveis em comum
├── elements
├── form
├── icons: ícones 16x16
├── pixel-arts: Para ícones que não são 16x16.
└── utilities
```
## Copyright e licença
Código e documentação copyright 2018 [B.C.Rikko](https://github.com/BcRikko). Código lançado sobre a Licença MIT. Documentação e novos lançamentos com Creative Commons.
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg

113
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>
<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>
<a href=".github/README-jp.md">日本語</a> / <a href=".github/README-es.md">Español</a> / <a href=".github/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,29 @@ 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/) |
| Korean | [둥근모꼴](http://cactus.tistory.com/193) |
## 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 +68,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 +82,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]: 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

View File

@@ -173,40 +173,54 @@
<section class="nes-container with-title">
<h2 class="title">Table</h2>
<div class="tables">
<div class="nes-table-responsive">
<table class="nes-table is-bordered is-centered">
<thead>
<tr>
<th>Table.is-bordered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
<th>Table.is-centered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
</tbody>
</table>
</div>
<div class="nes-table-responsive">
<table class="nes-table is-bordered is-dark">
<thead>
<tr>
<th>Table.is-dark</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
<th>Table.is-bordered</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternon</td>
<td>Thou hast had a good evening</td>
<td>Thou hast had a good night</td>
</tr>
<tr>
<td>Thou hast had a good morning</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
<td>Thou hast had a good afternoon</td>
</tr>
</tbody>
</table>

View File

@@ -1,3 +1,8 @@
.nes-table-responsive {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.nes-table {
table-layout: fixed;
background-color: $background-color;

View File

@@ -16,20 +16,6 @@ div.containers > .nes-container {
max-width: 400px;
}
div.tables {
display: flex;
flex-wrap: wrap;
}
div.tables > .nes-table {
min-width: 350px;
max-width: calc(50% - 2rem);
}
div.tables > .nes-table:first-child {
margin-right: 2rem;
margin-bottom: 2rem;
}
.balloon.nes-container .nes-balloon {
max-width: 600px;
margin: 2rem 2rem;
@@ -92,10 +78,6 @@ div.tables > .nes-table:first-child {
padding: 0;
margin: 2rem 0.2rem;
}
div.tables > .nes-table {
max-width: 100%;
margin-right: 0;
}
.balloon.nes-container .nes-balloon {
max-width: 70%;
}