From 671334437927356a186cc716a3c7628249d5ff95 Mon Sep 17 00:00:00 2001 From: Wojciech Olejnik Date: Thu, 20 Dec 2018 19:36:05 +0100 Subject: [PATCH 01/11] feat(component): add a select component --- docs/select.stories.js | 26 +++++++++++++++++++++++++ scss/form/_index.scss | 1 + scss/form/select.scss | 43 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 docs/select.stories.js create mode 100644 scss/form/select.scss diff --git a/docs/select.stories.js b/docs/select.stories.js new file mode 100644 index 0000000..7ed10b6 --- /dev/null +++ b/docs/select.stories.js @@ -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 ` +
+ +
+ `; +}); diff --git a/scss/form/_index.scss b/scss/form/_index.scss index b38295f..70c4e1f 100644 --- a/scss/form/_index.scss +++ b/scss/form/_index.scss @@ -1,3 +1,4 @@ @charset "utf-8"; @import "inputs.scss"; +@import "select.scss"; diff --git a/scss/form/select.scss b/scss/form/select.scss new file mode 100644 index 0000000..ab2ca2e --- /dev/null +++ b/scss/form/select.scss @@ -0,0 +1,43 @@ +.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%; + + select { + width: 100%; + padding: 0.5rem 1rem; + -webkit-appearance: none; + appearance: none; + cursor: $cursor-click-url, pointer; + border: none; + border-radius: 0; + box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529; + + &:invalid { + color: $color-00; + } + } + + &::after { + @include pixelize($dropdown, $colors); + + position: absolute; + top: calc(50% - 11px); + right: 36px; + width: 2px; + height: 2px; + font-size: 2px; + content: ""; + transform: scale(1.5); + } +} From 13d4d7ec9ba361f39e3bacc711789b9a500894cc Mon Sep 17 00:00:00 2001 From: Wojciech Olejnik Date: Thu, 20 Dec 2018 20:41:24 +0100 Subject: [PATCH 02/11] feat(component): implement select states, add examples to the demo page re #152 --- index.html | 35 ++++++++++++++++++++++++++++++- scss/form/select.scss | 49 ++++++++++++++++++++++++++++++++++++++++--- style.css | 14 +++++++++++++ 3 files changed, 94 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 894c363..70e3882 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ NES.css - NES-style CSS Framework - + @@ -132,6 +132,39 @@ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
diff --git a/scss/form/select.scss b/scss/form/select.scss index ab2ca2e..d5d6a3e 100644 --- a/scss/form/select.scss +++ b/scss/form/select.scss @@ -8,20 +8,19 @@ (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%; select { width: 100%; - padding: 0.5rem 1rem; + padding: 0.5rem 2.5rem 0.5rem 1rem; -webkit-appearance: none; appearance: none; cursor: $cursor-click-url, pointer; border: none; border-radius: 0; - box-shadow: 0 4px #212529, 0 -4px #212529, 4px 0 #212529, -4px 0 #212529; + box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black; &:invalid { color: $color-00; @@ -29,6 +28,8 @@ } &::after { + $colors: ($base-color, map-get($default-colors, "shadow")); + @include pixelize($dropdown, $colors); position: absolute; @@ -40,4 +41,46 @@ content: ""; transform: scale(1.5); } + + &.is-success { + $color: map-get($success-colors, "normal"); + + &::after { + $colors: ($color, map-get($default-colors, "shadow")); + + @include pixelize($dropdown, $colors); + } + + select { + box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; + } + } + + &.is-warning { + $color: map-get($warning-colors, "normal"); + + &::after { + $colors: ($color, map-get($default-colors, "shadow")); + + @include pixelize($dropdown, $colors); + } + + select { + box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; + } + } + + &.is-error { + $color: map-get($error-colors, "normal"); + + &::after { + $colors: ($color, map-get($default-colors, "shadow")); + + @include pixelize($dropdown, $colors); + } + + select { + box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; + } + } } diff --git a/style.css b/style.css index 498e264..11d97d1 100644 --- a/style.css +++ b/style.css @@ -16,6 +16,20 @@ div.containers > .nes-container { max-width: 400px; } +.selects { + display: flex; + justify-content: space-between; + margin-left: 4px; +} + +.selects .nes-select { + display: inline-flex; +} + +.nes-select + .nes-select { + margin: 0 0 0 24px; +} + .balloon.nes-container .nes-balloon { max-width: 600px; margin: 2rem 2rem; From 981307363064a00b702cc364a8a96b688328091e Mon Sep 17 00:00:00 2001 From: Wojciech Olejnik Date: Thu, 20 Dec 2018 21:52:06 +0100 Subject: [PATCH 03/11] refactor(select): Refactor #pixelize usage, fix link in index.html Use remove width, height and transform properties and use font-size to adjust #pixelize output. #152 --- index.html | 2 +- scss/form/select.scss | 20 +++++--------------- 2 files changed, 6 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 70e3882..3d4e519 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ NES.css - NES-style CSS Framework - + diff --git a/scss/form/select.scss b/scss/form/select.scss index d5d6a3e..1a630dd 100644 --- a/scss/form/select.scss +++ b/scss/form/select.scss @@ -8,6 +8,7 @@ (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%; @@ -28,27 +29,20 @@ } &::after { - $colors: ($base-color, map-get($default-colors, "shadow")); - @include pixelize($dropdown, $colors); position: absolute; top: calc(50% - 11px); right: 36px; - width: 2px; - height: 2px; - font-size: 2px; + font-size: 3px; content: ""; - transform: scale(1.5); } &.is-success { $color: map-get($success-colors, "normal"); &::after { - $colors: ($color, map-get($default-colors, "shadow")); - - @include pixelize($dropdown, $colors); + color: $color; } select { @@ -60,9 +54,7 @@ $color: map-get($warning-colors, "normal"); &::after { - $colors: ($color, map-get($default-colors, "shadow")); - - @include pixelize($dropdown, $colors); + color: $color; } select { @@ -74,9 +66,7 @@ $color: map-get($error-colors, "normal"); &::after { - $colors: ($color, map-get($default-colors, "shadow")); - - @include pixelize($dropdown, $colors); + color: $color; } select { From 607828fd93f11c211438cac747dcf40c0d408f98 Mon Sep 17 00:00:00 2001 From: Wojciech Olejnik Date: Thu, 20 Dec 2018 22:38:58 +0100 Subject: [PATCH 04/11] fix(select): change outline-color to match state of the component --- scss/form/select.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scss/form/select.scss b/scss/form/select.scss index 1a630dd..a0a241f 100644 --- a/scss/form/select.scss +++ b/scss/form/select.scss @@ -21,6 +21,7 @@ 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 { @@ -46,6 +47,7 @@ } select { + outline-color: map-get($success-colors, "hover"); box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; } } @@ -58,6 +60,7 @@ } select { + outline-color: map-get($warning-colors, "hover"); box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; } } @@ -70,6 +73,7 @@ } select { + outline-color: map-get($error-colors, "hover"); box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; } } From f78dd0e82a80bcaf503bbac7705bc27acf923b86 Mon Sep 17 00:00:00 2001 From: Abdallah Samman Date: Fri, 21 Dec 2018 23:28:53 +0200 Subject: [PATCH 05/11] docs: update new issue link in contributing.md --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0447936..14bdfdb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -96,7 +96,7 @@ We use [Commitizen][commitizen] and [`commitlint`][commitlint] to make sure all [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-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/ From b8686b6af5890a477d16cf6862e45e8550cf13bc Mon Sep 17 00:00:00 2001 From: Wojciech Olejnik Date: Sat, 22 Dec 2018 20:31:29 +0100 Subject: [PATCH 06/11] refactor(select): add @BcRikko's suggestions for the select component Change select.scss to selects.scss, add margin to .nes-select, use different color variables, refactor handling of different select states --- scss/form/_index.scss | 2 +- scss/form/{select.scss => selects.scss} | 52 +++++++++---------------- style.css | 2 +- 3 files changed, 20 insertions(+), 36 deletions(-) rename scss/form/{select.scss => selects.scss} (51%) diff --git a/scss/form/_index.scss b/scss/form/_index.scss index 70c4e1f..0d50df3 100644 --- a/scss/form/_index.scss +++ b/scss/form/_index.scss @@ -1,4 +1,4 @@ @charset "utf-8"; @import "inputs.scss"; -@import "select.scss"; +@import "selects.scss"; diff --git a/scss/form/select.scss b/scss/form/selects.scss similarity index 51% rename from scss/form/select.scss rename to scss/form/selects.scss index a0a241f..69dd0dc 100644 --- a/scss/form/select.scss +++ b/scss/form/selects.scss @@ -12,6 +12,7 @@ position: relative; width: 100%; + margin: 4px; select { width: 100%; @@ -25,7 +26,7 @@ box-shadow: 0 4px $color-black, 0 -4px $color-black, 4px 0 $color-black, -4px 0 $color-black; &:invalid { - color: $color-00; + color: map-get($disabled-colors, shadow); } } @@ -36,45 +37,28 @@ top: calc(50% - 11px); right: 36px; font-size: 3px; + pointer-events: none; content: ""; } - &.is-success { - $color: map-get($success-colors, "normal"); + // 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"); - &::after { - color: $color; - } + @each $type in $types { + &.is-#{nth($type, 1)} { + $color: nth($type, 2); - select { - outline-color: map-get($success-colors, "hover"); - box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; - } - } + &::after { + color: $color; + } - &.is-warning { - $color: map-get($warning-colors, "normal"); - - &::after { - color: $color; - } - - select { - outline-color: map-get($warning-colors, "hover"); - box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; - } - } - - &.is-error { - $color: map-get($error-colors, "normal"); - - &::after { - color: $color; - } - - select { - outline-color: map-get($error-colors, "hover"); - box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; + select { + outline-color: nth($type, 3); + box-shadow: 0 4px $color, 0 -4px $color, 4px 0 $color, -4px 0 $color; + } } } } diff --git a/style.css b/style.css index 11d97d1..0d4f80b 100644 --- a/style.css +++ b/style.css @@ -27,7 +27,7 @@ div.containers > .nes-container { } .nes-select + .nes-select { - margin: 0 0 0 24px; + margin-left: 24px; } .balloon.nes-container .nes-balloon { From 972b0c42e7e275c36c79c20d34438ce702ba9981 Mon Sep 17 00:00:00 2001 From: kenshinji Date: Sun, 23 Dec 2018 22:41:19 +0800 Subject: [PATCH 07/11] Add Chinese translations for REAME.md, CONTRIBUTING.md, CODE_OF_CONDUCT.md --- .github/CODE_OF_CONDUCT-zh-CN.md | 57 ++++++++++++++ .github/CONTRIBUTING-zh-CN.md | 102 ++++++++++++++++++++++++ .github/README-zh-CN.md | 130 +++++++++++++++++++++++++++++++ 3 files changed, 289 insertions(+) create mode 100644 .github/CODE_OF_CONDUCT-zh-CN.md create mode 100644 .github/CONTRIBUTING-zh-CN.md create mode 100644 .github/README-zh-CN.md diff --git a/.github/CODE_OF_CONDUCT-zh-CN.md b/.github/CODE_OF_CONDUCT-zh-CN.md new file mode 100644 index 0000000..88dc651 --- /dev/null +++ b/.github/CODE_OF_CONDUCT-zh-CN.md @@ -0,0 +1,57 @@ +# 参与者行为准则 + +使用其他语言来阅读本文档: +[日本語](.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/ diff --git a/.github/CONTRIBUTING-zh-CN.md b/.github/CONTRIBUTING-zh-CN.md new file mode 100644 index 0000000..8b2e638 --- /dev/null +++ b/.github/CONTRIBUTING-zh-CN.md @@ -0,0 +1,102 @@ +# 贡献 + +使用其他语言来阅读本文档: +[日本語](.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 +[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/.github/README-zh-CN.md b/.github/README-zh-CN.md new file mode 100644 index 0000000..de8eaab --- /dev/null +++ b/.github/README-zh-CN.md @@ -0,0 +1,130 @@ + + +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 + + + + +``` + +或者 + +```html + + + + +``` + +### 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 + + + + + +``` + +### 推荐字体 + +|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 From 22086942cd28efab83f6ee53034e4881cf64efbf Mon Sep 17 00:00:00 2001 From: kenshinji Date: Sun, 23 Dec 2018 22:57:01 +0800 Subject: [PATCH 08/11] Add links for different languages --- .github/CODE_OF_CONDUCT-es.md | 2 +- .github/CODE_OF_CONDUCT-jp.md | 2 +- .github/CODE_OF_CONDUCT-pt-BR.md | 2 +- .github/CODE_OF_CONDUCT-zh-CN.md | 2 +- .github/CONTRIBUTING-es.md | 2 +- .github/CONTRIBUTING-jp.md | 2 +- .github/CONTRIBUTING-pt-BR.md | 2 +- .github/CONTRIBUTING-zh-CN.md | 2 +- .github/README-es.md | 2 +- .github/README-jp.md | 2 +- .github/README-pt-BR.md | 2 +- CODE_OF_CONDUCT.md | 2 +- CONTRIBUTING.md | 2 +- README.md | 2 +- 14 files changed, 14 insertions(+), 14 deletions(-) diff --git a/.github/CODE_OF_CONDUCT-es.md b/.github/CODE_OF_CONDUCT-es.md index a2990a0..ef10afa 100644 --- a/.github/CODE_OF_CONDUCT-es.md +++ b/.github/CODE_OF_CONDUCT-es.md @@ -1,7 +1,7 @@ # 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) +[简体中文](.github/CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md) ## Nuestro compromiso diff --git a/.github/CODE_OF_CONDUCT-jp.md b/.github/CODE_OF_CONDUCT-jp.md index 286d80d..8069f48 100644 --- a/.github/CODE_OF_CONDUCT-jp.md +++ b/.github/CODE_OF_CONDUCT-jp.md @@ -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) ## 私たちの約束 diff --git a/.github/CODE_OF_CONDUCT-pt-BR.md b/.github/CODE_OF_CONDUCT-pt-BR.md index 99b3231..1f48836 100644 --- a/.github/CODE_OF_CONDUCT-pt-BR.md +++ b/.github/CODE_OF_CONDUCT-pt-BR.md @@ -1,7 +1,7 @@ # 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) +[简体中文](.github/CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) ## Nossa promessa diff --git a/.github/CODE_OF_CONDUCT-zh-CN.md b/.github/CODE_OF_CONDUCT-zh-CN.md index 88dc651..4159551 100644 --- a/.github/CODE_OF_CONDUCT-zh-CN.md +++ b/.github/CODE_OF_CONDUCT-zh-CN.md @@ -1,7 +1,7 @@ # 参与者行为准则 使用其他语言来阅读本文档: -[日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) +[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) ## 我们的誓言 diff --git a/.github/CONTRIBUTING-es.md b/.github/CONTRIBUTING-es.md index fb6ceab..26452dd 100644 --- a/.github/CONTRIBUTING-es.md +++ b/.github/CONTRIBUTING-es.md @@ -1,7 +1,7 @@ # Contribución 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! diff --git a/.github/CONTRIBUTING-jp.md b/.github/CONTRIBUTING-jp.md index 3995b72..3a6f3fe 100644 --- a/.github/CONTRIBUTING-jp.md +++ b/.github/CONTRIBUTING-jp.md @@ -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) このプロジェクトに貢献したいですか?素晴らしい! diff --git a/.github/CONTRIBUTING-pt-BR.md b/.github/CONTRIBUTING-pt-BR.md index b09ed5f..338bb2f 100644 --- a/.github/CONTRIBUTING-pt-BR.md +++ b/.github/CONTRIBUTING-pt-BR.md @@ -1,7 +1,7 @@ # Contribuindo 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! diff --git a/.github/CONTRIBUTING-zh-CN.md b/.github/CONTRIBUTING-zh-CN.md index 8b2e638..c756c9e 100644 --- a/.github/CONTRIBUTING-zh-CN.md +++ b/.github/CONTRIBUTING-zh-CN.md @@ -1,7 +1,7 @@ # 贡献 使用其他语言来阅读本文档: -[日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) +[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) 你打算为本项目做贡献？太棒了！ diff --git a/.github/README-es.md b/.github/README-es.md index e5b4414..975df6e 100644 --- a/.github/README-es.md +++ b/.github/README-es.md @@ -1,7 +1,7 @@ NES.css is a **NES-style(8bit-like)** CSS Framework. diff --git a/.github/README-jp.md b/.github/README-jp.md index bced027..03f202c 100644 --- a/.github/README-jp.md +++ b/.github/README-jp.md @@ -1,7 +1,7 @@ NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。 diff --git a/.github/README-pt-BR.md b/.github/README-pt-BR.md index 06f1f14..dd89283 100644 --- a/.github/README-pt-BR.md +++ b/.github/README-pt-BR.md @@ -1,7 +1,7 @@ NES.css é um Framework CSS, no **estilo NES(8bit)**. diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 0d9bb4b..05115c7 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,7 +1,7 @@ # 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) +[简体中文](.github/CONTRIBUTING-zh-CN.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md) ## Our Pledge diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 0447936..0fb6197 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,7 +1,7 @@ # Contributing 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! diff --git a/README.md b/README.md index 4bfc883..293e9d2 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ NES.css is a **NES-style(8bit-like)** CSS Framework. From be3ea26db94ea340f6dc5a9e5b0bf8acebcb4622 Mon Sep 17 00:00:00 2001 From: Abdallah Samman Date: Tue, 25 Dec 2018 12:10:55 +0200 Subject: [PATCH 09/11] docs: Change new-issue link in CONTRIBUTING.md for all langs --- .github/CONTRIBUTING-es.md | 2 +- .github/CONTRIBUTING-jp.md | 2 +- .github/CONTRIBUTING-pt-BR.md | 2 +- .github/CONTRIBUTING-zh-CN.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/CONTRIBUTING-es.md b/.github/CONTRIBUTING-es.md index 26452dd..618f15e 100644 --- a/.github/CONTRIBUTING-es.md +++ b/.github/CONTRIBUTING-es.md @@ -96,7 +96,7 @@ Utilizamos [Commitizen][commitizen] and [`commitlint`][commitlint] para asegurar [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-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/ diff --git a/.github/CONTRIBUTING-jp.md b/.github/CONTRIBUTING-jp.md index 3a6f3fe..5bc4ee1 100644 --- a/.github/CONTRIBUTING-jp.md +++ b/.github/CONTRIBUTING-jp.md @@ -96,7 +96,7 @@ [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-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/ diff --git a/.github/CONTRIBUTING-pt-BR.md b/.github/CONTRIBUTING-pt-BR.md index 338bb2f..49828c6 100644 --- a/.github/CONTRIBUTING-pt-BR.md +++ b/.github/CONTRIBUTING-pt-BR.md @@ -96,7 +96,7 @@ Nós usamos [Commitizen][commitizen] e [`commitlint`][commitlint] a fim de asseg [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-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/ diff --git a/.github/CONTRIBUTING-zh-CN.md b/.github/CONTRIBUTING-zh-CN.md index c756c9e..935a260 100644 --- a/.github/CONTRIBUTING-zh-CN.md +++ b/.github/CONTRIBUTING-zh-CN.md @@ -96,7 +96,7 @@ [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-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/ From 361b2c28f09c12757ce0c52126855389ed449b48 Mon Sep 17 00:00:00 2001 From: d0p1 Date: Wed, 26 Dec 2018 10:46:13 +0100 Subject: [PATCH 10/11] fix: add missing nes-prefix --- scss/form/inputs.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/form/inputs.scss b/scss/form/inputs.scss index bb73434..55d3a6d 100644 --- a/scss/form/inputs.scss +++ b/scss/form/inputs.scss @@ -58,7 +58,7 @@ } @media screen and (max-width: 768px) { - .field.is-inline { + .nes-field.is-inline { display: block; > label { @@ -66,7 +66,7 @@ text-align: left; } - .input { + .nes-input { max-width: 100%; } } From 3ab3cd5d9b084f53d022a4c0d9af26dbdff0aded Mon Sep 17 00:00:00 2001 From: Trezy Date: Thu, 27 Dec 2018 03:04:30 -0600 Subject: [PATCH 11/11] Add Storybook backgrounds (#231) * feat(storybook): Add backgrounds Storybook I've added the Storybook backgrounds addon which allows users viewing the storybook to change the background behind components, which will make it easier to see how the main NES.css theme looks in various contexts. * feat(storybook): Add backgrounds Storybook I've added the Storybook backgrounds addon which allows users viewing the storybook to change the background behind components, which will make it easier to see how the main NES.css theme looks in various contexts. --- .storybook/addons.js | 5 ++- .storybook/config.js | 19 ++++++++++- .storybook/preview-head.html | 1 + package-lock.json | 66 ++++++++++++++++++++++++++++++++++++ package.json | 10 ++++-- 5 files changed, 96 insertions(+), 5 deletions(-) diff --git a/.storybook/addons.js b/.storybook/addons.js index 3c785b3..e3c8ae9 100644 --- a/.storybook/addons.js +++ b/.storybook/addons.js @@ -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 */ diff --git a/.storybook/config.js b/.storybook/config.js index 821f6af..8abe709 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -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 @@ -8,4 +14,15 @@ function loadStories() { 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); diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index f71eb70..766b21d 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -2,6 +2,7 @@