mirror of
https://github.com/nostalgic-css/NES.css.git
synced 2025-04-20 22:22:05 +02:00
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
This commit is contained in:
ダーシノ
Abdullah Samman
parent
15aab67790
commit
3eacba9c99
2
.github/CODE_OF_CONDUCT-es.md
vendored
2
.github/CODE_OF_CONDUCT-es.md
vendored
@ -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
|
||||
|
||||
|
||||
2
.github/CODE_OF_CONDUCT-jp.md
vendored
2
.github/CODE_OF_CONDUCT-jp.md
vendored
@ -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)
|
||||
|
||||
## 私たちの約束
|
||||
|
||||
|
||||
2
.github/CODE_OF_CONDUCT-pt-BR.md
vendored
2
.github/CODE_OF_CONDUCT-pt-BR.md
vendored
@ -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
|
||||
|
||||
|
||||
3
.github/CONTRIBUTING-es.md
vendored
3
.github/CONTRIBUTING-es.md
vendored
@ -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.
|
||||
|
||||
3
.github/CONTRIBUTING-jp.md
vendored
3
.github/CONTRIBUTING-jp.md
vendored
@ -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以外のアイコン
|
||||
|
||||
3
.github/CONTRIBUTING-pt-BR.md
vendored
3
.github/CONTRIBUTING-pt-BR.md
vendored
@ -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.
|
||||
|
||||
1
.github/CONTRIBUTING-zh-CN.md
vendored
1
.github/CONTRIBUTING-zh-CN.md
vendored
@ -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.
|
||||
|
||||
6
.github/README-es.md
vendored
6
.github/README-es.md
vendored
@ -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
|
||||
|
||||
10
.github/README-jp.md
vendored
10
.github/README-jp.md
vendored
@ -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" />
|
||||
<!-- latest -->
|
||||
<!-- 圧縮版 -->
|
||||
<link href="https://unpkg.com/nes.css@1.0.0/css/nes.min.css" rel="stylesheet" />
|
||||
<!-- 最新版 -->
|
||||
<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" />
|
||||
```
|
||||
|
||||
### フォント
|
||||
|
||||
6
.github/README-pt-BR.md
vendored
6
.github/README-pt-BR.md
vendored
@ -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
|
||||
|
||||
81
.github/README-zh-CN.md
vendored
81
.github/README-zh-CN.md
vendored
@ -10,27 +10,35 @@ NES.css 是一款 **NES-风格(8位机)** 的CSS 框架.
|
||||
|
||||
## 安装
|
||||
|
||||
### CDN
|
||||
#### via package manager
|
||||
|
||||
```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" />
|
||||
```shell
|
||||
npm install nes.css
|
||||
# or
|
||||
yarn add nes.css
|
||||
```
|
||||
|
||||
或者
|
||||
### 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
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
7043
package-lock.json
generated
7043
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
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",
|
||||
"stylelint": "stylelint scss/**/*.scss",
|
||||
"build:stylelint": "npm run stylelint -- --fix",
|
||||
"build:clean": "rimraf css",
|
||||
"//": "Build task",
|
||||
"build": "run-p build:core build:main",
|
||||
"build:core": "npm run build:sass-core && npm run build:autoprefix-core && npm run build:cleancss-core",
|
||||
"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'"
|
||||
|
||||
@ -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}`);
|
||||
|
||||
1
scss/components/_index.scss
Normal file
1
scss/components/_index.scss
Normal file
@ -0,0 +1 @@
|
||||
@charset "utf-8";
|
||||
12
scss/nes-core.scss
Normal file
12
scss/nes-core.scss
Normal file
@ -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";
|
||||
@ -1,14 +1,6 @@
|
||||
@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";
|
||||
@import "nes-core.scss";
|
||||
@import "components/_index.scss";
|
||||
@import "icons/_index.scss";
|
||||
@import "pixel-arts/_index.scss";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user