github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Doc: update custom theme

pull/1365/head
qingwei.li 2016-11-25 18:26:34 +08:00
parent 807c06071d
commit bd975b1747
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
examples/docs/en-US/custom-theme.md
View File

@ -1,10 +1,10 @@
## Custom theme ## Custom theme
Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tool kicks in. Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tool kicks in.
### Install related tool ### Install related tool
First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them. First install the theme generator globally or locally. Local install is recommended because in this way, when others clone your project, npm will automatically install it for them.
```shell ```shell
npm i element-theme -D npm i element-theme -g
``` ```
Then install the default theme from npm or GitHub. Then install the default theme from npm or GitHub.
@ -20,7 +20,7 @@ npm i https://github.com/ElementUI/theme-default -D
After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will. After successfully installing the above packages, a command named `et` is available in CLI (if the packages are installed locally, use `node_modules/.bin/et` instead). Run `-i` to initialize the variable file which outputs to `element-variables.css` by default. And you can specify its output directory as you will.
```shell ```shell
node_modules/.bin/et -i [custom output directory] et -i [custom output directory]
> ✔ Generator variables file > ✔ Generator variables file
``` ```
@ -53,7 +53,7 @@ Just edit `element-variables.css`, e.g. changing the theme color to red:
### Build theme ### Build theme
After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`: After saving the variable file, use `et` to build your theme. You can activate `watch` mode by adding a parameter `-w`:
```shell ```shell
node_modules/.bin/et et
> ✔ build theme font > ✔ build theme font
> ✔ build element theme > ✔ build element theme

8
examples/docs/zh-CN/custom-theme.md
View File

@ -2,9 +2,9 @@
Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。 Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面方法。
### 安装工具 ### 安装工具
首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动。 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。
```shell ```shell
npm i element-theme -D npm i element-theme -g
``` ```
安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。 安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。
@ -20,7 +20,7 @@ npm i https://github.com/ElementUI/theme-default -D
主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。 主题生成工具安装成功后，如果全局安装可以在命令行里通过 `et` 调用工具，如果安装在当前目录下，需要通过 `node_modules/.bin/et` 访问到命令。执行 `-i` 初始化变量文件。默认输出到 `element-variables.css`，当然你可以传参数指定文件输出目录。
```shell ```shell
node_modules/.bin/et -i [可以自定义变量文件目录] et -i [可以自定义变量文件目录]
> ✔ Generator variables file > ✔ Generator variables file
``` ```
@ -53,7 +53,7 @@ node_modules/.bin/et -i [可以自定义变量文件目录]
### 编译主题 ### 编译主题
保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。 保存文件后，到命令行里执行 `et` 编译主题，如果你想启用 `watch` 模式，实时编译主题，增加 `-w` 参数。
```shell ```shell
node_modules/.bin/et et
> ✔ build theme font > ✔ build theme font
> ✔ build element theme > ✔ build element theme