Update README.md

Author: baiyaaaaa

README.md

@@ -2,231 +2,10 @@
 [![Build Status][travis-img]][travis]
 [![Version][version]](https://github.com/ElemeFE/postcss-salad/blob/master/CHANGELOG.md)
 
-> Postcss-salad 是一个能够帮助你更加写出更加简洁、优雅的CSS的样式解决方案。
+> Postcss-salad 是一个能够帮助你更加写出更加简洁、优雅的CSS的样式解决方案。<br>
+> 不仅提供了下一代css语法支持，还提供了基础的sass的语法、属性顺时针简写、rem填充、基础图形绘制、可定制样式的inline-svg以及bem类名自动转化等实用的功能。
 
-Postcss-salad不仅提供了下一代css语法支持，还提供了基础的sass的语法、属性顺时针简写、rem填充、基础图形绘制、可定制样式的inline-svg以及bem类名自动转化等实用的功能。
-
----
-
-## Examples
-
-#### 下一代css语法
-
-```css
-/* before */
-:root {
-  --mainColor: red;
-}
-@custom-media --small-viewport (max-width: 30em);
-
-@media (--small-viewport) {
-  a {
-    color: var(--mainColor);
-  }
-}
-
-/* after */
-@media (max-width: 30em) {
-  a {
-    color: red;
-  }
-}
-```
-
-#### 顺时针简写
-
-```css
-/* before */
-a {
-  position: absolute 1em 2em 3em 4em;
-  margin: 30px *;
-}
-b {
-  position: absolute 1em * * 4em;
-  padding: 30px *;
-}
-
-/* after */
-a  {
-  top: 1em;
-  right: 2em;
-  bottom: 3em;
-  left: 4em;
-  position: absolute;
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-b  {
-  top: 1em;
-  left: 4em;
-  position: absolute;
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-```
-
-#### rem填充
-
-```css
-/* before */
-a {
-  width: 10rem;
-  margin: 30px 2rem 1rem 10px;
-}
-
-/* after */
-a {
-  width: 160px;
-  margin: 30px 32px 16px 10px;
-}
-```
-
-#### 基础图形绘制
-
-```css
-/* before */
-.rect {
-  rect: 10px 20px #f00;
-}
-.cirlce {
-  circle: 50px #ff0;
-}
-.triangle {
-  triangle: 5px left #ff0;
-}
-
-/* after */
-.rect {
-  width: 10px;
-  height: 20px;
-  background-color: #f00;
-}
-.cirlce {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-}
-.triangle {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border: solid transparent;
-  border-width: 5px;
-  border-right-color: #ff0;
-}
-```
-
-#### 可定制的inline-svg
-
-```css
-/* before */
-@svg-load nav url(../svgs/nav.svg) {
-  path:nth-child(2){
-    fill:#0ff
-  };
-}
-h1 {
-  background: svg-inline(nav)
-}
-
-/* after */
-h1 {
-  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 50 50\'><path d=\'M10 12h30v4H10z\'/><path d=\'M10 22h30v4H10z\' fill=\'#0ff\'/><path d=\'M10 32h30v4H10z\'/></svg>");
-}
-```
-
-#### 基础sass语法
-
-```css
-/* before */
-$pass: green !default;
-
-@define-placeholder foo {
-  background: pink;
-}
-
-.bar {
-  @extend foo;
-
-  background-color: @color;
-  color: $pass;
-}
-
-/* after */
-.bar {
-  background: pink;
-}
-
-.bar {
-
-  background-color: green;
-  color: green;
-}
-```
-
-#### bem类名
-
-```css
-/* before */
-@utility utilityName {
-    color: green;
-}
-
-@utility utilityName small {
-    color: blue;
-}
-
-@component ComponentName {
-    color: cyan;
-
-    @modifier modifierName {
-        color: yellow;
-    }
-
-    @descendent descendentName {
-        color: navy;
-    }
-
-    @when stateName {
-        color: crimson;
-    }
-}
-
-@component-namespace nmsp {
-    @component ComponentName {
-        color: red;
-    }
-}
-
-/* after */
-.u-utilityName {
-    color: green;
-}
-
-.u-sm-utilityName {
-    color: blue;
-}
-
-.ComponentName {
-    color: cyan;
-}
-
-.ComponentName--modifierName {
-    color: yellow;
-}
-
-.ComponentName-descendentName {
-    color: navy;
-}
-
-.ComponentName.is-stateName {
-    color: crimson;
-}
-
-.nmsp-ComponentName {
-    color: red;
-}
-```
+## [Documents]
 
 ## Usage
 
@@ -260,7 +39,7 @@ postcss([
 
 #### Gulp
 
-Add [Gulp PostCSS] to your build tool:
+Add [Gulp PostCSS]:  to your build tool:
 
 ```bash
 npm install gulp-postcss --save-dev
@@ -304,31 +83,32 @@ var options = {
 Postcss-salad powered by the following plugins (in this order):
 
 - [precss]: a tool that allows you to use Sass-like markup in your CSS files
+- [postcss-css-reset]: reset style is dependent on normalize.css and combined with best practice.
+- [postcss-utils]: help you create functional fragments quickly via at-rules. 
 - [postcss-bem]: implementing BEM as at-rules
 - [postcss-calc]: plugin to reduce calc()
 - [postcss-initial]: fallback initial keyword
 - [postcss-inline-svg]: reference an SVG file and control its attributes with CSS syntax.
-- [postcss-short-font-size]: extends the font-size property so that line-height may be set by the second value.
-- [postcss-short-spacing]: lets you write shorthand margin and padding properties while omitting edges in CSS.
-- [postcss-short-size]: Write shorthand size properties in CSS
-- [postcss-short-position]: Define edges inside the position property in CSS
+- [postcss-short]: lets you write styles more logically by extending shorthand properties in CSS.
 - [postcss-shape]: draw basic shape with specified syntax in css rule
 - [node-pixrem]: generates pixel fallbacks for rem units.
 - [autoprefixer]: parse CSS and add vendor prefixes to CSS rules using values from Can I Use
 
-[travis-img]: https://travis-ci.org/ElemeFE/postcss-salad.svg
-[travis]: https://travis-ci.org/ElemeFE/postcss-salad
 [precss]: https://github.com/jonathantneal/precss
+[postcss-css-reset]: https://npmjs.com/package/postcss-css-reset
+[postcss-utils]: https://github.com/baiyaaaaa/postcss-utils
 [postcss-bem]: https://github.com/ileri/postcss-bem
 [postcss-calc]: https://github.com/postcss/postcss-calc
 [postcss-initial]: https://github.com/maximkoretskiy/postcss-initial
 [postcss-inline-svg]: https://github.com/TrySound/postcss-inline-svg
-[postcss-short-font-size]: https://github.com/jonathantneal/postcss-short-font-size
-[postcss-short-spacing]: https://github.com/jonathantneal/postcss-short-spacing
+[postcss-short]: https://github.com/jonathantneal/postcss-short
 [postcss-shape]: https://github.com/baiyaaaaa/postcss-shape
-[postcss-short-size]: https://github.com/jonathantneal/postcss-short-size
-[postcss-short-position]: https://github.com/jonathantneal/postcss-short-position
 [node-pixrem]: https://github.com/robwierzbowski/node-pixrem
 [autoprefixer]: https://github.com/postcss/autoprefixer
-[Postcss-salad]: https://github.com/ElemeFE/postcss-salad
+[Postcss salad]: https://github.com/ElemeFE/postcss-salad
 [version]: https://img.shields.io/npm/v/postcss-salad.svg
+[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
+[PostCSS]: http://postcss.org/
+[travis-img]: https://travis-ci.org/ElemeFE/postcss-salad.svg
+[travis]: https://travis-ci.org/ElemeFE/postcss-salad
+[Documents]: http://elemefe.github.io/postcss-salad/