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

Merge branch 'develop' into add-badges-component

Browse Source
This commit is contained in:
Igor Guastalla
2018-12-27 19:04:44 -02:00
committed by GitHub
parent d8367ff75d 3ab3cd5d9b
commit aaf278c256
26 changed files with 541 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/CODE_OF_CONDUCT-es.md vendored
View File

@@ -1,7 +1,7 @@
# Código de Conducta convenido para Contribuyentes # Código de Conducta convenido para Contribuyentes
Ver este documento en otro idioma: Ver este documento en otro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md) [简体中文](.github/CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
## Nuestro compromiso ## Nuestro compromiso

2
.github/CODE_OF_CONDUCT-jp.md vendored
View File

@@ -1,7 +1,7 @@
# コントリビューター行動規範 # コントリビューター行動規範
このドキュメントを別の言語で表示する： このドキュメントを別の言語で表示する：
[English](CONTRIBUTING.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) [简体中文](.github/CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
## 私たちの約束 ## 私たちの約束

2
.github/CODE_OF_CONDUCT-pt-BR.md vendored
View File

@@ -1,7 +1,7 @@
# Código de Conduta para Colaboradores # Código de Conduta para Colaboradores
Veja este documento em outro idioma: Veja este documento em outro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) [简体中文](.github/CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md)
## Nossa promessa ## Nossa promessa

57
.github/CODE_OF_CONDUCT-zh-CN.md vendored Normal file
View File

@@ -0,0 +1,57 @@
# 参与者行为准则
使用其他语言来阅读本文档:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
## 我们的誓言
为了维护一个开放并且友好的环境, 作为贡献者以及维护者，我们宣誓确保参与我们的项目以及社区的每一个人都有免受骚扰的体验，不管他/她的年纪，体型，残疾与否，种族，性别特征与表达，经验程度，国籍，个人外貌，种族，宗教信仰，性特征以及性取向如何。
## 我们的标准
关于创建积极的环境的贡献的例子包括:
* 使用欢迎友好以及包容的语言
* 尊重不同的视角以及经验
* 优雅的接受有建设性的批评
* 聚焦于对社区有利的方面
* 展现对应其他社区成员的认同
对于参与者来说不可接受的行为包括:
* 性语言的使用或者具象化并且不受欢迎的性诱惑或者更进一步
* 抹黑，羞辱的/贬损的评论，和针对个人或政治性的攻击
* 公开或者私下骚扰
* 公开其他人的隐私信息，比如未经许可的物理或者电子(邮箱)地址
* 在专业领域其他被认为不合时宜的行为
## 我们的义务
项目维护者们有义务澄清可以被接受的行为的标准，并且对于任何不可接受的行为应当采取合适并且正确的行动来对待。
项目维护者们有权利和义务去删除，编辑，或者拒绝评论，提交，代码，维基编辑，问题等，以及其他不符合行为准则的贡献，或者当某些贡献者被视为不合时宜的，威胁性的，冒犯的或者有害的时候，我们也可以临时性地或者永久性地封禁他们。
## 范畴
本行为准则适用于本项目空间，或者当个人代表本项目或社区在公共场合出席的场合。代表一个项目或者社区的例子包括使用一个官方的项目邮件地址，通过官方社交媒体账号发帖，或者作为一个指定的代表参与线上或者线下的活动。如何作为一个项目的代表可能会进一步被项目维护者定义并且澄清。
## 执行
你可以通过[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)>
所有的投诉都会被审核并且进行调查，并且会对公众出具一个视为必要且合适的回复。项目组有义务维护举报者个人的隐私。进一步的具体执行细节政策可能会分开来发布。
不真诚地遵守或者执行行为准则的项目维护者可能会面临项目领导其他成员所决定的临时的或者永久的影响。
## 归属
本行为准则改编自[贡献者契约][homepage], 版本 1.4, 可以从这里访问 [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/

4
.github/CONTRIBUTING-es.md vendored
View File

@@ -1,7 +1,7 @@
# Contribución # Contribución
Ver este documento en otro idioma: Ver este documento en otro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md) [简体中文](CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
¿Quieres contribuir al proyecto? ¡Genial! ¿Quieres contribuir al proyecto? ¡Genial!
@@ -96,7 +96,7 @@ Utilizamos [Commitizen][commitizen] and [`commitlint`][commitlint] para asegurar
[commitizen]: https://github.com/commitizen/cz-cli [commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint] [commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github [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-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop [new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release [semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/ [sentimental-versioning]: http://sentimentalversioning.org/

4
.github/CONTRIBUTING-jp.md vendored
View File

@@ -1,7 +1,7 @@
# 貢献する # 貢献する
このドキュメントを別の言語で表示する： このドキュメントを別の言語で表示する：
[English](CONTRIBUTING.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) [简体中文](CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
このプロジェクトに貢献したいですか?素晴らしい! このプロジェクトに貢献したいですか?素晴らしい!
@@ -96,7 +96,7 @@
[commitizen]: https://github.com/commitizen/cz-cli [commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint] [commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github [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-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop [new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release [semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/ [sentimental-versioning]: http://sentimentalversioning.org/

4
.github/CONTRIBUTING-pt-BR.md vendored
View File

@@ -1,7 +1,7 @@
# Contribuindo # Contribuindo
Veja este documento em outro idioma: Veja este documento em outro idioma:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) [简体中文](CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md)
Quer contribuir para este projeto? Legal! Quer contribuir para este projeto? Legal!
@@ -96,7 +96,7 @@ Nós usamos [Commitizen][commitizen] e [`commitlint`][commitlint] a fim de asseg
[commitizen]: https://github.com/commitizen/cz-cli [commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint] [commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github [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-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop [new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release [semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/ [sentimental-versioning]: http://sentimentalversioning.org/

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

@@ -0,0 +1,102 @@
# 贡献
使用其他语言来阅读本文档:
[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
你打算为本项目做贡献？太棒了！
## 需要知道的事情
本项目与参与者行为准则保持一致. 我们期望你在参与本项目的时候也赞同并支持该行为准则. 关于报告不可接受的行为，请参考我们的[行为准则][code-of-conduct].
**在忙于你的第一个PR吗?**
[如何在GitHub上面为开源项目做贡献][egghead]
## 如何
* 搭建项目?
[我们有详细的说明!](#project-setup)
* 找到了bug?
[请让我们知道!][new-issue]
* 为bug打补丁?
[提交PR!][new-pr]
* 添加一个新功能?
请确保[新开一个issue][new-issue] 来描述你的功能, 当你准备好接受反馈的时候再提交一个[新的PR][new-pr]!
## 搭建项目
你有想为我们的项目做贡献，我们真的很高兴! ❤️ 请参考如下的步骤开始吧:
1. Fork 并且 clone 我们的代码仓库
2. 安装必须的依赖:
```sh
$ npm install
```
3. 启动开发服务器:
```sh
$ npm run storybook
```
### 目录结构
```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
```
> 小建议: 确保你的 `master` 分支指向原始的代码仓库并且从你fork的分支上创建PR. 请按如下命令进行操作:
>
> ```
> git remote add upstream https://github.com/nostalgic-css/NES.css.git
> git fetch upstream
> git branch --set-upstream-to=upstream/master master
> ```
>
> 这样就会把原始的代码仓库添加为一个名为"upstream"的远程连接,并且从这个远程的仓库连接获取git的信息, 然后当你运行`git pull`命令的时候会指定本地的`master`分支去使用`upstream/master`分支. 在这个时候, 你就能基于这个`master` 分支来创建所有你自己的分支. 当你想更新你的`master`的版本信息的时候, 执行一个常规的`git pull`命令即可.
## `nostalgic-css` 组织如何为项目做贡献
`nostalgic-css` 组织的成员必须遵守如下的步骤. 外部的贡献者只需要遵守以上的准则即可.
### 开发步骤
1. 使用下面的格式化规则从`develop`分支来创建自己的分支。
2. 做满足问题要求的必要的工作。如果发现你的工作跟该问题无关，请[创建一个新的问题][new-issue]并且在另外一个分支在进行你的工作。
3. 提交你的PR然后合并回`develop`分支.
* 任何影响当前开发的改变都必须在文档里面描述清楚.
* 跟某一问题相关的PRs必须把那个问题的号码标注在标题里. 比如: `[#33] Fix bug`
* 分配一个问题给你自己.
* 当这个问题准备合并的时候, 必须向`nostalgic-css/NES.css` 小组申请审核.
4. 一旦PR被批准了，接下来合并分支的更改就是被分配者的义务了。
### 提交格式化
我们使用[Commitizen][commitizen] 以及 [`commitlint`][commitlint] 来确保所有的项目提交都是易于阅读的, 并且使用 [`semantic-release`][semantic-release] 来确保我们的发布是自动化的, [不浪漫的以及不带情感色彩的][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/choose
[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/

2
.github/README-es.md vendored
View File

@@ -1,7 +1,7 @@
<div align="center"> <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=".github/README-jp.md">日本語</a> / <a href=".github/README-pt-BR.md">Português</a> <a href="README-zh-CN.md">简体中文</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> </div>
NES.css is a **NES-style(8bit-like)** CSS Framework. NES.css is a **NES-style(8bit-like)** CSS Framework.

2
.github/README-jp.md vendored
View File

@@ -1,7 +1,7 @@
<div align="center"> <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-es.md">Español</a> / <a href="README-pt-BR.md">Português</a> <a href="README-zh-CN.md">简体中文</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> </div>
NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。 NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。

2
.github/README-pt-BR.md vendored
View File

@@ -1,7 +1,7 @@
<div align="center"> <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=".github/README-jp.md">日本語</a> / <a href=".github/README-es.md">Español</a> <a href="README-zh-CN.md">简体中文</a> / <a href="README.md">English</a> / <a href=".github/README-jp.md">日本語</a> / <a href=".github/README-es.md">Español</a>
</div> </div>
NES.css é um Framework CSS, no **estilo NES(8bit)**. NES.css é um Framework CSS, no **estilo NES(8bit)**.

130
.github/README-zh-CN.md vendored Normal file
View File

@@ -0,0 +1,130 @@
<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 是一款 **NES-风格(8位机)** 的CSS 框架.
[![Gitter][gitter-badge]][gitter] [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
## 安装
### 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" />
```
或者
```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 での使用方法を書く
## 使用
NES.css 只提供组件. 你需要定义你自己的布局.
默认字体[Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P?selection.family=Press+Start+2P) 只支持英文字符. 当你把这个框架与其他非英语的语言一起使用的时候, 请使用另外的字体. 请根据这个关于Google Fonts的 [说明](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>
```
### 推荐字体
|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
NES.css 仅仅需要 CSS 而不依赖其他任何 JavaScript.
## 浏览器支持
NES.css 与如下浏览器的最新版本兼容.
* Chrome
* Firefox
* Safari
未经测试
* IE/Edge
## 开发
### 命令
```sh
git clone git@github.com:BcRikko/NES.css.git
cd NES.css
npm i
npm run watch
npm run build
```
#### 运行 Storybook
```
npm run storybook
```
在预提交阶段Linting, 格式化以及构建都会自动运行.
TODO: ビルドはCIでするように変更したい
### 目录结构
```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
```
## 版权许可
代码以及文档版权 2018 [B.C.Rikko](https://github.com/BcRikko). 代码基于MIT许可发布. 文档基于Creative Commons许可发布.
[gitter]: https://gitter.im/nostalgic-css/Lobby
[gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg

5
.storybook/addons.js
View File

@@ -1 +1,4 @@
import '@storybook/addon-knobs/register'; // eslint-disable-line import/no-extraneous-dependencies /* eslint-disable import/no-extraneous-dependencies */
import '@storybook/addon-knobs/register';
import '@storybook/addon-backgrounds/register';
/* eslint-enable */

19
.storybook/config.js
View File

@@ -1,4 +1,10 @@
import { configure } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies /* eslint-disable import/no-extraneous-dependencies */
import {
addDecorator,
configure,
} from '@storybook/html';
import { withBackgrounds } from '@storybook/addon-backgrounds';
/* eslint-enable */
import '../scss/nes.scss'; // eslint-disable-line import/no-unresolved import '../scss/nes.scss'; // eslint-disable-line import/no-unresolved
@@ -8,4 +14,15 @@ function loadStories() {
req.keys().forEach(filename => req(filename)); req.keys().forEach(filename => req(filename));
} }
addDecorator(withBackgrounds([
{ name: 'Blue', value: 'blue' },
{ name: 'Green', value: 'green' },
{ name: 'Yellow', value: 'yellow' },
{ name: 'Orange', value: 'orange' },
{ name: 'Red', value: 'red' },
{ name: 'Purple', value: 'purple' },
{ name: 'Black', value: 'black' },
{ name: 'White', value: 'white', default: true },
]));
configure(loadStories, module); configure(loadStories, module);

1
.storybook/preview-head.html
View File

@@ -2,6 +2,7 @@
<style> <style>
html, body, #root { html, body, #root {
align-items: center; align-items: center;
background-color: transparent !important;
display: flex; display: flex;
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;

2
CODE_OF_CONDUCT.md
View File

@@ -1,7 +1,7 @@
# Contributor Covenant Code of Conduct # Contributor Covenant Code of Conduct
View this document in another language: View this document in another language:
[日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) [简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
## Our Pledge ## Our Pledge

4
CONTRIBUTING.md
View File

@@ -1,7 +1,7 @@
# Contributing # Contributing
View this document in another language: View this document in another language:
[日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) [简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.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! You want to contribute to the project? Awesome!
@@ -96,7 +96,7 @@ We use [Commitizen][commitizen] and [`commitlint`][commitlint] to make sure all
[commitizen]: https://github.com/commitizen/cz-cli [commitizen]: https://github.com/commitizen/cz-cli
[commitlint]: [https://github.com/marionebl/commitlint] [commitlint]: [https://github.com/marionebl/commitlint]
[egghead]: https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github [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-issue]: https://github.com/nostalgic-css/NES.css/issues/new/choose
[new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop [new-pr]: https://github.com/nostalgic-css/NES.css/compare/develop...develop
[semantic-release]: https://github.com/semantic-release/semantic-release [semantic-release]: https://github.com/semantic-release/semantic-release
[sentimental-versioning]: http://sentimentalversioning.org/ [sentimental-versioning]: http://sentimentalversioning.org/

2
README.md
View File

@@ -1,7 +1,7 @@
<div align="center"> <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=".github/README-jp.md">日本語</a> / <a href=".github/README-es.md">Español</a> / <a href=".github/README-pt-BR.md">Português</a> <a href=".github/README-zh-CN.md">简体中文</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> </div>
NES.css is a **NES-style(8bit-like)** CSS Framework. NES.css is a **NES-style(8bit-like)** CSS Framework.

26
docs/select.stories.js Normal file
View File

@@ -0,0 +1,26 @@
import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
import { // eslint-disable-line import/no-extraneous-dependencies
withKnobs, radios,
} from '@storybook/addon-knobs';
const stories = storiesOf('Select', module);
stories.addDecorator(withKnobs);
stories.add('select', () => {
const selectedClass = radios('class', {
default: '',
'is-success': 'is-success',
'is-warning': 'is-warning',
'is-error': 'is-error',
}, '');
return `
<div class="nes-select ${selectedClass}">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
`;
});

33
index.html
View File

@@ -132,6 +132,39 @@
<label for="textarea_field">Textarea</label> <label for="textarea_field">Textarea</label>
<textarea id="textarea_field" class="nes-textarea"></textarea> <textarea id="textarea_field" class="nes-textarea"></textarea>
</div> </div>
<div class="field">
<label for="selects">Select</label>
<div id="selects" class="selects">
<div class="nes-select">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<div class="nes-select is-success">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<div class="nes-select is-warning">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
<div class="nes-select is-error">
<select required>
<option value="" disabled selected hidden>Select...</option>
<option value="0">To be</option>
<option value="1">Not to be</option>
</select>
</div>
</div>
</div>
</section> </section>
<section class="balloon nes-container with-title"> <section class="balloon nes-container with-title">

66
package-lock.json generated
View File

@@ -1176,6 +1176,66 @@
} }
} }
}, },
"@storybook/addon-backgrounds": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-4.1.3.tgz",
"integrity": "sha512-cJZw5HYzNooWbp2bOL7kAnbY1Xx4bqB5r6mJoThaVHqQ/utLbbwsWhXNUjSVtmdipck0UJzZ/QaCcOZEAgTM7w==",
"dev": true,
"requires": {
"@emotion/styled": "^0.10.6",
"@storybook/addons": "4.1.3",
"@storybook/core-events": "4.1.3",
"core-js": "^2.5.7",
"eventemitter3": "^3.1.0",
"global": "^4.3.2",
"prop-types": "^15.6.2",
"util-deprecate": "^1.0.2"
},
"dependencies": {
"@storybook/addons": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-4.1.3.tgz",
"integrity": "sha512-6orT1pp0NCfqEABV8iVPkcIn/hIKHd5bA9JC0pQYz50LDIOPsohf1L5dvPwaJzaPVqLNexHUXOxxCRqyxhF21w==",
"dev": true,
"requires": {
"@storybook/channels": "4.1.3",
"@storybook/components": "4.1.3",
"global": "^4.3.2",
"util-deprecate": "^1.0.2"
}
},
"@storybook/channels": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-4.1.3.tgz",
"integrity": "sha512-SaxHlNbNO2yXwg7GI4k6TGWhYK+WdXEDLfDp9w2BigZQel5SCDZsuOCYtE3yG6ajrdBq4ehkhnLPE0wQcupp7A==",
"dev": true
},
"@storybook/components": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/components/-/components-4.1.3.tgz",
"integrity": "sha512-Ik1j04pAw/i9wsxIQLSkbR1B5l7B23kMtzGtcVPRp1seunypxqNdX7o0sxg+xPFWNL7YDsrwP0FIP0HgUuriLQ==",
"dev": true,
"requires": {
"@emotion/core": "^0.13.1",
"@emotion/provider": "^0.11.2",
"@emotion/styled": "^0.10.6",
"global": "^4.3.2",
"lodash": "^4.17.11",
"prop-types": "^15.6.2",
"react-inspector": "^2.3.0",
"react-split-pane": "^0.1.84",
"react-textarea-autosize": "^7.0.4",
"render-fragment": "^0.1.1"
}
},
"@storybook/core-events": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-4.1.3.tgz",
"integrity": "sha512-mMHclba/+TCPdz+UXX0TYXN3SVe17p5n9OuZ6h0hZPdUPaqwN5xsi+UmYH6jGutHEzwkiVzw4cs5QvkcxuUzng==",
"dev": true
}
}
},
"@storybook/addon-knobs": { "@storybook/addon-knobs": {
"version": "4.0.12", "version": "4.0.12",
"resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.12.tgz", "resolved": "https://registry.npmjs.org/@storybook/addon-knobs/-/addon-knobs-4.0.12.tgz",
@@ -5037,6 +5097,12 @@
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
"dev": true "dev": true
}, },
"eventemitter3": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
"integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==",
"dev": true
},
"events": { "events": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz", "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",

8
package.json
View File

@@ -38,6 +38,7 @@
"@commitlint/cli": "^7.2.1", "@commitlint/cli": "^7.2.1",
"@commitlint/config-conventional": "^7.1.2", "@commitlint/config-conventional": "^7.1.2",
"@semantic-release/exec": "^3.3.0", "@semantic-release/exec": "^3.3.0",
"@storybook/addon-backgrounds": "^4.1.3",
"@storybook/addon-knobs": "^4.0.11", "@storybook/addon-knobs": "^4.0.11",
"@storybook/html": "^4.0.11", "@storybook/html": "^4.0.11",
"autoprefixer": "^9.1.5", "autoprefixer": "^9.1.5",
@@ -110,9 +111,12 @@
"@semantic-release/release-notes-generator", "@semantic-release/release-notes-generator",
"@semantic-release/npm", "@semantic-release/npm",
"@semantic-release/github", "@semantic-release/github",
["@semantic-release/exec", { [
"@semantic-release/exec",
{
"prepareCmd": "./scripts/updatePackageHeader.js ${nextRelease.version}" "prepareCmd": "./scripts/updatePackageHeader.js ${nextRelease.version}"
}] }
]
] ]
}, },
"stylelint": { "stylelint": {

1
scss/form/_index.scss
View File

@@ -1,3 +1,4 @@
@charset "utf-8"; @charset "utf-8";
@import "inputs.scss"; @import "inputs.scss";
@import "selects.scss";

4
scss/form/inputs.scss
View File

@@ -58,7 +58,7 @@
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.field.is-inline { .nes-field.is-inline {
display: block; display: block;
> label { > label {
@@ -66,7 +66,7 @@
text-align: left; text-align: left;
} }
.input { .nes-input {
max-width: 100%; max-width: 100%;
} }
} }

64
scss/form/selects.scss Normal file
View File

@@ -0,0 +1,64 @@
.nes-select {
// prettier-ignore
$dropdown: (
(1,1,1,1,1,1,1),
(1,1,1,1,1,1,1),
(0,1,1,1,1,1,0),
(0,1,1,1,1,1,0),
(0,0,1,1,1,0,0),
(0,0,0,1,0,0,0),
);
$colors: ($base-color, map-get($default-colors, "shadow"));
position: relative;
width: 100%;
margin: 4px;
select {
width: 100%;
padding: 0.5rem 2.5rem 0.5rem 1rem;
-webkit-appearance: none;
appearance: none;
cursor: $cursor-click-url, pointer;
border: none;
border-radius: 0;
outline-color: map-get($default-colors, "hover");
box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black;
&:invalid {
color: map-get($disabled-colors, shadow);
}
}
&::after {
@include pixelize($dropdown, $colors);
position: absolute;
top: calc(50% - 11px);
right: 36px;
font-size: 3px;
pointer-events: none;
content: "";
}
// prettier-ignore
$types:
"success" map-get($success-colors, "normal") map-get($success-colors, "hover"),
"warning" map-get($warning-colors, "normal") map-get($warning-colors, "hover"),
"error" map-get($error-colors, "normal") map-get($error-colors, "hover");
@each $type in $types {
&.is-#{nth($type, 1)} {
$color: nth($type, 2);
&::after {
color: $color;
}
select {
outline-color: nth($type, 3);
box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color;
}
}
}
}

14
style.css
View File

@@ -16,6 +16,20 @@ div.containers > .nes-container {
max-width: 400px; max-width: 400px;
} }
.selects {
display: flex;
justify-content: space-between;
margin-left: 4px;
}
.selects .nes-select {
display: inline-flex;
}
.nes-select + .nes-select {
margin-left: 24px;
}
.balloon.nes-container .nes-balloon { .balloon.nes-container .nes-balloon {
max-width: 600px; max-width: 600px;
margin: 2rem 2rem; margin: 2rem 2rem;