Add components dir and split css file (#224)

* refactor: add components directory

ref #166

* build: split nes.scss into nes.css and nes-core.css

and change npm scripts for build

ref #166

* docs(readme.md): add nes-core.css link

* docs: add components directory path

and minor modification of the document

.github/CODE_OF_CONDUCT-es.md

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

.github/CODE_OF_CONDUCT-jp.md

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

.github/CODE_OF_CONDUCT-pt-BR.md

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

.github/CONTRIBUTING-es.md

@@ -1,7 +1,7 @@
 # Contribución
 
 Ver este documento en otro idioma:
-[简体中文](CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
+[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
 
 ¿Quieres contribuir al proyecto? ¡Genial!
 
@@ -53,6 +53,7 @@ Este proyecto se apega al Código de Conducta convenido para Contribuyentes. Al
     │   ├── generic.scss: Estilo general y reboot.css
     │   └── variables.scss: Variables comunes
     ├── elements
+    ├── components
     ├── form
     ├── icons: Iconos 16x16
     ├── pixel-arts: Para iconos que no son 16x16.

.github/CONTRIBUTING-jp.md

@@ -1,7 +1,7 @@
 # 貢献する
 
 このドキュメントを別の言語で表示する：
-[简体中文](CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
+[English](CONTRIBUTING.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [Español](.github/CONTRIBUTING-es.md) / [Português](.github/CONTRIBUTING-pt-BR.md)
 
 このプロジェクトに貢献したいですか?素晴らしい!
 
@@ -53,6 +53,7 @@
     │   ├── generic.scss: 一般的なスタイルとreboot.cssの上書き
     │   └── variables.scss: 共通変数
     ├── elements
+    ├── components
     ├── form
     ├── icons: 16x16のアイコン
     ├── pixel-arts: 16x16以外のアイコン

.github/CONTRIBUTING-pt-BR.md

@@ -1,7 +1,7 @@
 # Contribuindo
 
 Veja este documento em outro idioma:
-[简体中文](CONTRIBUTING-zh-CN.md) / [English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [Español](.github/CONTRIBUTING-es.md)
+[English](CONTRIBUTING.md) / [日本語](.github/CONTRIBUTING-jp.md) / [简体中文](CONTRIBUTING-zh-CN.md) / [Español](.github/CONTRIBUTING-es.md)
 
 Quer contribuir para este projeto? Legal!
 
@@ -53,6 +53,7 @@ Nós estamos muito felizes de você querer contribuir para o projeto! Os próxim
     │   ├── generic.scss: Estilização genérica e reboot.css
     │   └── variables.scss: Variáveis em comum
     ├── elements
+    ├── components
     ├── form
     ├── icons: 16x16 icons
     ├── pixel-arts: Para ícones que não são 16x16.

.github/CONTRIBUTING-zh-CN.md

@@ -53,6 +53,7 @@
     │   ├── generic.scss: Generic style and reboot.css
     │   └── variables.scss: Common variables
     ├── elements
+    ├── components
     ├── form
     ├── icons: 16x16 icons
     ├── pixel-arts: For icons other than 16x16.

.github/README-es.md

@@ -1,7 +1,7 @@
 <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-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>
+  <a href="README.md">English</a> / <a href=".github/README-jp.md">日本語</a> / <a href="README-zh-CN.md">简体中文</a> / <a href=".github/README-pt-BR.md">Português</a>
 </div>
 
 NES.css is a **NES-style(8bit-like)** CSS Framework.
@@ -32,9 +32,11 @@ 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" />
+<link href="https://unpkg.com/nes.css@1.0.0/css/nes.min.css" rel="stylesheet" />
 <!-- último -->
 <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+<!-- solo estilo del núcleo -->
+<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
 ```
 
 ### Tipografías

.github/README-jp.md

@@ -1,7 +1,7 @@
 <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-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>
+  <a href="README.md">English</a> / <a href="README-zh-CN.md">简体中文</a> / <a href="README-es.md">Español</a> / <a href="README-pt-BR.md">Português</a>
 </div>
 
 NES.cssは **ファミコン風(8bit ライク)** なCSSフレームワークです。
@@ -31,10 +31,12 @@ yarn add nes.css
 `<link />`要素を使ってCSSをインポートする:
 
 ```html
-<!-- minify -->
+<!-- 圧縮版 -->
-<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
+<link href="https://unpkg.com/nes.css@1.0.0/css/nes.min.css" rel="stylesheet" />
-<!-- latest -->
+<!-- 最新版 -->
 <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+<!-- コアスタイルのみ -->
+<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
 ```
 
 ### フォント

.github/README-pt-BR.md

@@ -1,7 +1,7 @@
 <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-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>
+  <a href="README.md">English</a> / <a href=".github/README-jp.md">日本語</a> / <a href="README-zh-CN.md">简体中文</a> / <a href=".github/README-es.md">Español</a>
 </div>
 
 NES.css é um Framework CSS, no **estilo NES(8bit)**.
@@ -32,9 +32,11 @@ 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" />
+<link href="https://unpkg.com/nes.css@1.0.0/css/nes.min.css" rel="stylesheet" />
 <!-- latest -->
 <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+<!-- core style only -->
+<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
 ```
 
 ### Fontes

.github/README-zh-CN.md

@@ -10,27 +10,35 @@ NES.css 是一款 **NES-风格(8位机)** 的CSS 框架.
 
 ## 安装
 
-### CDN
+#### via package manager
 
-```html
+```shell
-<!-- minify -->
+npm install nes.css
-<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
+# or
-<!-- latest -->
+yarn add nes.css
-<link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
 ```
 
-或者
+### via CDN
 
 ```html
 <!-- non-minified -->
-<link href="https://unpkg.com/nes.css@0.0.2/css/nes.css" rel="stylesheet" />
+<link href="https://unpkg.com/nes.css@1.0.0/css/nes.min.css" rel="stylesheet" />
 <!-- latest -->
 <link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
+<!-- core style only -->
+<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
 ```
 
-### 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)|
 
-TODO: npm での使用方法を書く
 
 ## 使用
 
@@ -50,16 +58,6 @@ NES.css 只提供组件. 你需要定义你自己的布局.
 </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.
@@ -76,48 +74,6 @@ NES.css 与如下浏览器的最新版本兼容.
 * 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许可发布.
@@ -125,6 +81,5 @@ TODO: ビルドはCIでするように変更したい
 
 
 
-
 [gitter]: https://gitter.im/nostalgic-css/Lobby
 [gitter-badge]: https://img.shields.io/gitter/room/nostalgic-css/Lobby.svg

CONTRIBUTING.md

@@ -53,6 +53,7 @@ We're really happy you want to contribute to the project! ❤️ The following s
     │   ├── generic.scss: Generic style and reboot.css
     │   └── variables.scss: Common variables
     ├── elements
+    ├── components
     ├── form
     ├── icons: 16x16 icons
     ├── pixel-arts: For icons other than 16x16.

README.md

@@ -1,7 +1,7 @@
 <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=".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>
+  <a href=".github/README-jp.md">日本語</a> / <a href=".github/README-zh-CN.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.
@@ -32,9 +32,11 @@ Import the CSS via a `<link />` element:
 
 ```html
 <!-- minify -->
-<link href="https://unpkg.com/nes.css@0.0.2/css/nes.min.css" rel="stylesheet" />
+<link href="https://unpkg.com/nes.css@1.0.0/css/nes.min.css" rel="stylesheet" />
 <!-- latest -->
 <link href="https://unpkg.com/nes.css/css/nes.min.css" rel="stylesheet" />
+<!-- core style only -->
+<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
 ```
 
 ### Fonts

package.json

@@ -3,13 +3,24 @@
   "description": "NES.css is NES-style CSS Framework.",
   "scripts": {
     "watch": "npm run build:sass -- --watch",
-    "build": "npm run build:clean && npm run build:stylelint && npm run build:sass && npm run build:autoprefix && npm run build:cleancss && npm run build:storybook",
+    "//": "Build task",
-    "stylelint": "stylelint scss/**/*.scss",
+    "build": "run-p build:core build:main",
-    "build:stylelint": "npm run stylelint -- --fix",
+    "build:core": "npm run build:sass-core && npm run build:autoprefix-core && npm run build:cleancss-core",
-    "build:clean": "rimraf css",
+    "build:main": "npm run build:sass && npm run build:autoprefix && npm run build:cleancss",
+    "prebuild": "run-p prebuild:*",
+    "prebuild:stylelint": "npm run stylelint -- --fix",
+    "prebuild:clean": "rimraf css",
+    "postbuild": "npm run build:storybook",
+    "//": "For nes.css",
     "build:sass": "node-sass --output-style expanded --source-map true --functions scripts/scssFunctions.js scss/nes.scss css/nes.css",
     "build:autoprefix": "postcss --use autoprefixer --map false --output css/nes.css css/nes.css",
     "build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
+    "//": "For nes-core.css",
+    "build:sass-core": "node-sass --output-style expanded --source-map true --functions scripts/scssFunctions.js scss/nes-core.scss css/nes-core.css",
+    "build:autoprefix-core": "postcss --use autoprefixer --map false --output css/nes-core.css css/nes-core.css",
+    "build:cleancss-core": "cleancss -o css/nes-core.min.css css/nes-core.css",
+    "//": "Misc",
+    "stylelint": "stylelint scss/**/*.scss",
     "storybook": "start-storybook -p 6006",
     "build:storybook": "build-storybook",
     "deploy": "npm run build",
@@ -55,6 +66,7 @@
     "husky": "^1.0.0",
     "lint-staged": "^7.3.0",
     "node-sass": "^4.9.3",
+    "npm-run-all": "^4.1.5",
     "postcss-cli": "^6.0.0",
     "prettier": "^1.15.2",
     "rimraf": "^2.6.2",
@@ -96,7 +108,7 @@
   },
   "lint-staged": {
     "scss/**/*.scss": [
-      "npm run build:stylelint"
+      "npm run postbuild"
     ],
     "*.js": [
       "eslint '.storybook/**/*.js' 'docs/**/*.js'"

scripts/updatePackageHeader.js

@@ -12,7 +12,7 @@ if (!nextVersion) {
 }
 
 // Update the SCSS Package Header
-const SCSSFilePath = path.resolve('scss', 'nes.scss');
+const SCSSFilePath = path.resolve('scss', 'nes-core.scss');
 let SCSSFile = fs.readFileSync(SCSSFilePath, 'utf8');
 
 SCSSFile = SCSSFile.replace(/^ {2}Version: development/m, `  Version: ${nextVersion}`);

scss/components/_index.scss

@@ -0,0 +1 @@
+@charset "utf-8";

scss/nes-core.scss

@@ -0,0 +1,12 @@
+@charset "utf-8";
+
+/*!***************************************************************************\
+  NES.css Framework
+  Version: development
+#{build-data()}
+\*****************************************************************************/
+
+@import "base/_index.scss";
+@import "utilities/_index.scss";
+@import "elements/_index.scss";
+@import "form/_index.scss";

scss/nes.scss

@@ -1,14 +1,6 @@
 @charset "utf-8";
 
-/*!***************************************************************************\
+@import "nes-core.scss";
-  NES.css Framework
+@import "components/_index.scss";
-  Version: development
-#{build-data()}
-\*****************************************************************************/
-
-@import "base/_index.scss";
-@import "utilities/_index.scss";
-@import "elements/_index.scss";
-@import "form/_index.scss";
 @import "icons/_index.scss";
 @import "pixel-arts/_index.scss";