From 57fa4cbb5278642b299e4678287bc569daf865dd Mon Sep 17 00:00:00 2001 From: Marius Ileana Date: Wed, 23 Nov 2016 22:13:21 +0200 Subject: [PATCH] Small typos and review --- docs/react/customize-theme.en-US.md | 30 ++++++++++++++--------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index 01f2534b93..3591856abe 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -3,53 +3,51 @@ order: 4 title: Customize theme --- -Ant Design allow to customize some basic design tokens for meeting the needs of UI diversity from bussiness and brand, including primary color, border radius, border and etc. +Ant Design allows to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc. ![](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png) ## Less variables -We are using [Less](http://lesscss.org/) as development language of style. A series of less variables are defined for each design tokens which can be customized as your needs. +We are using [Less](http://lesscss.org/) as the development language of style. A set of less variables are defined for each design aspect that can be customized to your needs. - [Default Variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) -Please report issue if the variables is not enough for you. +Please report an issue if the existing list of variables is not enough for you. ## How to use it -We recommand [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default variables. There are two way to achieve it in practive. +We recommend [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) to override the default values of the variables. There are two ways to achieve it in practice. -You can run this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) for playground. +You can use this [example](https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme) as a playground. -### 1) package.theme (recommanded) - -Specify the `theme` field in 'package.json', which could be a object or file path. +### 1) Using 'theme' property in package.theme (recommended way) +Specify the `theme` property in `package.json` file, whose value can be either an object or the path to a JS file that contains the custom values of specific variables: +- example of directly specifying the custom values as an object: ```js "theme": { "@primary-color": "#1DA57A", }, ``` - -or [a js file](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js)： - +- example of specifying a [file path](https://github.com/ant-design/antd-init/blob/master/examples/customize-antd-theme/theme.js) to a JS file: ```js "theme": "./theme.js", ``` -This way is working only when using [atool-build](https://github.com/ant-tool/atool-build)(built in [antd-init](https://github.com/ant-design/antd-init) and [dva-cli](https://github.com/dvajs/dva-cli)). If you choose other boilerplates, you can write webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does. +This approach is working only when using [atool-build](https://github.com/ant-tool/atool-build)(built in [antd-init](https://github.com/ant-design/antd-init) and [dva-cli](https://github.com/dvajs/dva-cli)). If you choose other boilerplates, you can write webpack config about [less-loader modifyVars](https://github.com/webpack/less-loader#less-options) like [atool-build ](https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138) does. -Note: importing less style is necessary. Please specify `style` option of `babel-plugin-import` to be `true` or `less` if you are using it. +Note: Importing less style is necessary. Please specify `style` option of `babel-plugin-import` to be `true` or `less` if you are using it. -### 2) less +### 2) Overriding Less variables (alternative way) Override variables via less definition files. -Create a standalone less file like below, and import it in your project. +Create a standalone less file like the one below, and import it in your project. ```css @import "~antd/dist/antd.less"; // import official less entry file @import "your-theme-file.less"; // override variables here ``` -Note: this way will load style of all component regardless of your demand, which cause `style` option of `babel-plugin-import` not working. +Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.