From 6a8be041e458699eea9511e2f63d1bdb391044b6 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sun, 18 Jan 2015 10:17:21 +0800
Subject: [PATCH 01/62] fix codestyles.

---
 .fecsignore    |  2 ++
 .fecsrc        | 10 ++++++++++
 demo/server.js |  5 +++++
 lib/rider.js   |  6 +++---
 test/test.js   |  9 +++++----
 5 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 .fecsignore
 create mode 100644 .fecsrc

diff --git a/.fecsignore b/.fecsignore
new file mode 100644
index 0000000..3235caf
--- /dev/null
+++ b/.fecsignore
@@ -0,0 +1,2 @@
+test/**
+demo/**
diff --git a/.fecsrc b/.fecsrc
new file mode 100644
index 0000000..78d9af3
--- /dev/null
+++ b/.fecsrc
@@ -0,0 +1,10 @@
+{
+    "eslint": {
+        "env": {
+            "node": true
+        },
+        "rules": {
+            "no-console": 0
+        }
+    }
+}
diff --git a/demo/server.js b/demo/server.js
index 1af4f71..5b23bbc 100644
--- a/demo/server.js
+++ b/demo/server.js
@@ -1,3 +1,8 @@
+/**
+ * @file rider demo
+ * @author firede(firede@firede.us)
+ */
+
 var express = require('express');
 var stylus = require('stylus');
 var rider = require('../lib/rider');
diff --git a/lib/rider.js b/lib/rider.js
index e98b1ce..0e83415 100644
--- a/lib/rider.js
+++ b/lib/rider.js
@@ -1,6 +1,5 @@
 /**
- * rider
- *
+ * @file rider
  * @author firede(firede@firede.us)
  */
 
@@ -8,7 +7,8 @@
 /**
  * stylus plugin
  *
- * @param {Object} options
+ * @param {Object=} options 可选参数
+ * @param {boolean=} options.implicit 隐式调用
  * @return {Function}
  */
 function plugin(options) {
diff --git a/test/test.js b/test/test.js
index 0624938..84e1468 100644
--- a/test/test.js
+++ b/test/test.js
@@ -1,6 +1,5 @@
 /**
- * rider test
- * 
+ * @file rider test
  * @author firede(firede@firede.us)
  */
 
@@ -25,7 +24,7 @@ describe('rider test', function () {
         var name = test.replace(/[-.]/g, ' ');
 
         it(name, function () {
-            var stylPath = path.join(__dirname, 'cases', test +'.styl');
+            var stylPath = path.join(__dirname, 'cases', test + '.styl');
             var cssPath = path.join(__dirname, 'cases', test + '.css');
             var styl = fs.readFileSync(stylPath, 'utf8').replace(/\r/g, '');
             var css = fs.readFileSync(cssPath, 'utf8').replace(/\r/g, '').trim();
@@ -36,7 +35,9 @@ describe('rider test', function () {
                     .use(rider());
 
             style.render(function (err, actual) {
-                if (err) throw err;
+                if (err) {
+                    throw err;
+                }
                 actual.trim().should.equal(css);
             });
         });

From ace94bd1f6ff150ac6806109e01b29d9925e5db5 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Thu, 16 Apr 2015 00:50:35 +0800
Subject: [PATCH 02/62] update config.

---
 .editorconfig | 10 +---------
 .gitignore    |  3 ++-
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index f71224a..2f8bdc9 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,15 +10,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[**.js]
-indent_style = space
-indent_size = 4
-
-[**.styl]
-indent_style = space
-indent_size = 4
-
-[**.html]
+[*.{js,styl,html}]
 indent_style = space
 indent_size = 4
 
diff --git a/.gitignore b/.gitignore
index fba44de..eeda977 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
-*.log
+.idea/
 node_modules/
 .DS_Store
 demo/**/*.css
+*.log

From 05dc01d5c4baa5fcc1b90adbe4f2854feb3d3377 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 22 Apr 2015 17:44:12 +0800
Subject: [PATCH 03/62] update devDependencies.

---
 .editorconfig |  5 ++++-
 package.json  | 12 ++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 2f8bdc9..299ff95 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,10 +9,13 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+indent_style = space
 
 [*.{js,styl,html}]
-indent_style = space
 indent_size = 4
 
+[*.json]
+indent_size = 2
+
 [*.md]
 trim_trailing_whitespace = false
diff --git a/package.json b/package.json
index 4837430..f945041 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,12 @@
         { "name": "Firede", "email": "firede@firede.us" }
     ],
     "devDependencies": {
-        "autoprefixer-core": "~3.1.2",
-        "stylus": "~0.49.3",
-        "express": "~4.10.1",
-        "ejs": "~1.0.0",
-        "mocha": "~1.21.5",
-        "should": "~4.0.4"
+        "autoprefixer-core": "~5.1.11",
+        "stylus": "~0.50.0",
+        "express": "~4.12.3",
+        "ejs": "~2.3.1",
+        "mocha": "~2.2.4",
+        "should": "~6.0.1"
     },
     "scripts": {
         "test": "mocha"

From 70fefa61146cfd92e0bfcf3d5d96d827c5f5f8d7 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 5 May 2015 20:31:39 +0800
Subject: [PATCH 04/62] create 2.0 dev branch.

---
 .editorconfig | 7 ++-----
 package.json  | 9 ++++++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/.editorconfig b/.editorconfig
index 299ff95..f4370cf 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,13 +9,10 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-indent_style = space
 
-[*.{js,styl,html}]
+[*.{js,styl,html,json}]
 indent_size = 4
-
-[*.json]
-indent_size = 2
+indent_style = space
 
 [*.md]
 trim_trailing_whitespace = false
diff --git a/package.json b/package.json
index f945041..a43eb87 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,16 @@
 {
     "name": "rider",
-    "version": "0.4.4",
+    "version": "2.0.0-alpha.1",
     "description": "Rider is a CSS library to focus on Mobile Web, build on top of Stylus.",
     "maintainers": [
-        { "name": "Firede", "email": "firede@firede.us" }
+        {
+            "name": "Firede",
+            "email": "firede@firede.us"
+        }
     ],
     "devDependencies": {
         "autoprefixer-core": "~5.1.11",
-        "stylus": "~0.50.0",
+        "stylus": "~0.51.1",
         "express": "~4.12.3",
         "ejs": "~2.3.1",
         "mocha": "~2.2.4",

From 78713bb2a7dc96e795c9ed2e7fd10fc474981418 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 5 May 2015 20:55:20 +0800
Subject: [PATCH 05/62] update badges.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 83ceeb0..3dd8dfd 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-rider [![NPM version](https://badge.fury.io/js/rider.png)](https://npmjs.org/package/rider) [![Build Status](https://travis-ci.org/ecomfe/rider.png)](https://travis-ci.org/ecomfe/rider) [![DevDependencies Status](https://david-dm.org/ecomfe/rider/dev-status.png)](https://david-dm.org/ecomfe/rider#info=devDependencies)
+rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) ![License](https://img.shields.io/npm/l/rider.svg?style=flat-square) ![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)
 ===
 
 `rider` 是一个基于 [`stylus`](https://github.com/LearnBoost/stylus)、专注于 **移动 Web** 的 CSS 样式库。

From 6b116a5a06136671a377aa4691856023de8a538a Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 5 May 2015 21:09:36 +0800
Subject: [PATCH 06/62] add license.

---
 .editorconfig |  3 +--
 LICENSE       | 22 ++++++++++++++++++++++
 README.md     |  2 +-
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 LICENSE

diff --git a/.editorconfig b/.editorconfig
index f4370cf..5157391 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,5 +1,4 @@
-# 本文件用于在不同的编辑器中统一代码风格
-# 请为你的编辑器安装 EditorConfig 插件
+# This file is for unifying the coding style for different editors and IDEs
 # editorconfig.org
 
 root = true
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..9418541
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Baidu Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
index 3dd8dfd..b0e920d 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) ![License](https://img.shields.io/npm/l/rider.svg?style=flat-square) ![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)
+rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) [![License](https://img.shields.io/npm/l/rider.svg?style=flat-square)](./LICENSE) [![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)](http://efe.baidu.com)
 ===
 
 `rider` 是一个基于 [`stylus`](https://github.com/LearnBoost/stylus)、专注于 **移动 Web** 的 CSS 样式库。

From 03b2e2acb974c3408747e85bcc32c5128f5d85e9 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 5 May 2015 23:07:43 +0800
Subject: [PATCH 07/62] add normalize.

---
 lib/rider/animate.styl   |   2 +-
 lib/rider/index.styl     |   3 +-
 lib/rider/normalize.styl | 351 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 354 insertions(+), 2 deletions(-)
 create mode 100644 lib/rider/normalize.styl

diff --git a/lib/rider/animate.styl b/lib/rider/animate.styl
index e8a4620..ae91b23 100644
--- a/lib/rider/animate.styl
+++ b/lib/rider/animate.styl
@@ -2,7 +2,7 @@
 //
 // @author  firede(firede@firede.us)
 // @desc    ported from Animate.css v3
-// @see     http://daneden.github.io/animate.css/
+// @see     http://daneden.github.io/animate.css
 
 
 animate($name, $duration = 1s, $fill-mode = both)
diff --git a/lib/rider/index.styl b/lib/rider/index.styl
index 2a2e493..5b2b690 100644
--- a/lib/rider/index.styl
+++ b/lib/rider/index.styl
@@ -1,5 +1,5 @@
 // rider
-// 
+//
 // @author  firede(firede@firede.us)
 
 @require 'setting'
@@ -12,3 +12,4 @@
 @require 'breakpoint'
 @require 'animate'
 @require 'initialize'
+@require 'normalize'
diff --git a/lib/rider/normalize.styl b/lib/rider/normalize.styl
new file mode 100644
index 0000000..9c5a534
--- /dev/null
+++ b/lib/rider/normalize.styl
@@ -0,0 +1,351 @@
+// normalize
+//
+// @author  firede(firede@firede.us)
+// @desc    ported from normalize.css v3.0.3, MIT License
+// @see     http://github.com/necolas/normalize.css
+
+
+normalize()
+
+    // 1. Set default font family to sans-serif.
+    // 2. Prevent iOS and IE text size adjust after device orientation change,
+    //    without disabling user zoom.
+
+    html
+        font-family: sans-serif // 1
+        -ms-text-size-adjust: 100% // 2
+        -webkit-text-size-adjust: 100% // 2
+
+
+    // Remove default margin.
+
+    body
+        margin: 0
+
+
+    // HTML5 display definitions
+
+
+    // Correct `block` display not defined for any HTML5 element in IE 8/9.
+    // Correct `block` display not defined for `details` or `summary` in IE 10/11
+    // and Firefox.
+    // Correct `block` display not defined for `main` in IE 11.
+
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    main,
+    menu,
+    nav,
+    section,
+    summary
+        display: block
+
+
+    // 1. Correct `inline-block` display not defined in IE 8/9.
+    // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+
+    audio,
+    canvas,
+    progress,
+    video
+        display: inline-block // 1
+        vertical-align: baseline // 2
+
+
+    // Prevent modern browsers from displaying `audio` without controls.
+    // Remove excess height in iOS 5 devices.
+
+    audio:not([controls])
+        display: none
+        height: 0
+
+
+    // Address `[hidden]` styling not present in IE 8/9/10.
+    // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+
+    [hidden],
+    template
+        display: none
+
+
+    // Links
+
+
+    // Remove the gray background color from active links in IE 10.
+
+    a
+        background-color: transparent
+
+
+    // Improve readability of focused elements when they are also in an
+    // active/hover state.
+
+    a:active,
+    a:hover
+        outline: 0
+
+
+    // Text-level semantics
+
+
+    // Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+
+    abbr[title]
+        border-bottom: 1px dotted
+
+
+    // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+
+    b,
+    strong
+        font-weight: bold
+
+
+    // Address styling not present in Safari and Chrome.
+
+    dfn
+        font-style: italic
+
+
+    // Address variable `h1` font-size and margin within `section` and `article`
+    // contexts in Firefox 4+, Safari, and Chrome.
+
+    h1
+        font-size: 2em
+        margin: 0.67em 0
+
+
+    // Address styling not present in IE 8/9.
+
+    mark
+        background: #ff0
+        color: #000
+
+
+    // Address inconsistent and variable font size in all browsers.
+
+    small
+        font-size: 80%
+
+
+    // Prevent `sub` and `sup` affecting `line-height` in all browsers.
+
+    sub,
+    sup
+        font-size: 75%
+        line-height: 0
+        position: relative
+        vertical-align: baseline
+
+    sup
+        top: -0.5em
+
+    sub
+        bottom: -0.25em
+
+
+    // Embedded content
+
+
+    // Remove border when inside `a` element in IE 8/9/10.
+
+    img
+        border: 0
+
+
+    // Correct overflow not hidden in IE 9/10/11.
+
+    svg:not(:root)
+        overflow: hidden
+
+
+    // Grouping content
+
+
+    // Address margin not present in IE 8/9 and Safari.
+
+    figure
+        margin: 1em 40px
+
+
+    // Address differences between Firefox and other browsers.
+
+    hr
+        box-sizing: content-box
+        height: 0
+
+
+    // Contain overflow in all browsers.
+
+    pre
+        overflow: auto
+
+
+    // Address odd `em`-unit font size rendering in all browsers.
+
+    code,
+    kbd,
+    pre,
+    samp
+        font-family: monospace, monospace
+        font-size: 1em
+
+
+    // Forms
+
+
+    // Known limitation: by default, Chrome and Safari on OS X allow very limited
+    // styling of `select`, unless a `border` property is set.
+
+    // 1. Correct color not being inherited.
+    //    Known issue: affects color of disabled elements.
+    // 2. Correct font properties not being inherited.
+    // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea
+        color: inherit
+        font: inherit
+        margin: 0
+
+
+    // Address `overflow` set to `hidden` in IE 8/9/10/11.
+
+    button
+        overflow: visible
+
+
+    // Address inconsistent `text-transform` inheritance for `button` and `select`.
+    // All other form control elements do not inherit `text-transform` values.
+    // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+    // Correct `select` style inheritance in Firefox.
+
+    button,
+    select
+        text-transform: none
+
+
+    // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+    //    and `video` controls.
+    // 2. Correct inability to style clickable `input` types in iOS.
+    // 3. Improve usability and consistency of cursor style between image-type
+    //    `input` and others.
+
+    button,
+    html input[type="button"], // 1
+    input[type="reset"],
+    input[type="submit"]
+        -webkit-appearance: button // 2
+        cursor: pointer // 3
+
+
+    // Re-set default cursor for disabled elements.
+
+    button[disabled],
+    html input[disabled]
+        cursor: default
+
+
+    // Remove inner padding and border in Firefox 4+.
+
+    button::-moz-focus-inner,
+    input::-moz-focus-inner
+        border: 0
+        padding: 0
+
+
+    // Address Firefox 4+ setting `line-height` on `input` using `!important` in
+    // the UA stylesheet.
+
+    input
+        line-height: normal
+
+
+    // It's recommended that you don't attempt to style these elements.
+    // Firefox's implementation doesn't respect box-sizing, padding, or width.
+    //
+    // 1. Address box sizing set to `content-box` in IE 8/9/10.
+    // 2. Remove excess padding in IE 8/9/10.
+
+    input[type="checkbox"],
+    input[type="radio"]
+        box-sizing: border-box // 1
+        padding: 0 // 2
+
+
+    // Fix the cursor style for Chrome's increment/decrement buttons. For certain
+    // `font-size` values of the `input`, it causes the cursor style of the
+    // decrement button to change from `default` to `text`.
+
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button
+        height: auto
+
+
+    // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+    // 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+
+    input[type="search"]
+        -webkit-appearance: textfield // 1
+        box-sizing: content-box // 2
+
+
+    // Remove inner padding and search cancel button in Safari and Chrome on OS X.
+    // Safari (but not Chrome) clips the cancel button when the search input has
+    // padding (and `textfield` appearance).
+
+    input[type="search"]::-webkit-search-cancel-button,
+    input[type="search"]::-webkit-search-decoration
+        -webkit-appearance: none
+
+
+    // Define consistent border, margin, and padding.
+
+    fieldset
+        border: 1px solid #c0c0c0
+        margin: 0 2px
+        padding: 0.35em 0.625em 0.75em
+
+
+    // 1. Correct `color` not being inherited in IE 8/9/10/11.
+    // 2. Remove padding so people aren't caught out if they zero out fieldsets.
+
+    legend
+        border: 0 // 1
+        padding: 0 // 2
+
+
+    // Remove default vertical scrollbar in IE 8/9/10/11.
+
+    textarea
+        overflow: auto
+
+
+    // Don't inherit the `font-weight` (applied by a rule above).
+    // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+
+    optgroup
+        font-weight: bold
+
+
+    // Tables
+
+
+    // Remove most spacing between table cells.
+
+    table
+        border-collapse: collapse
+        border-spacing: 0
+
+    td,
+    th
+        padding: 0

From 6e0bca23578f58334f66c38b1654398343b3a9e0 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 6 May 2015 13:10:08 +0800
Subject: [PATCH 08/62] remove `should` dependencies.

---
 package.json | 5 ++---
 test/test.js | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a43eb87..0da59f6 100644
--- a/package.json
+++ b/package.json
@@ -10,11 +10,10 @@
     ],
     "devDependencies": {
         "autoprefixer-core": "~5.1.11",
-        "stylus": "~0.51.1",
-        "express": "~4.12.3",
         "ejs": "~2.3.1",
+        "express": "~4.12.3",
         "mocha": "~2.2.4",
-        "should": "~6.0.1"
+        "stylus": "~0.51.1"
     },
     "scripts": {
         "test": "mocha"
diff --git a/test/test.js b/test/test.js
index 84e1468..3e9e834 100644
--- a/test/test.js
+++ b/test/test.js
@@ -7,7 +7,7 @@ var stylus = require('stylus');
 var fs = require('fs');
 var path = require('path');
 var rider = require('../lib/rider');
-var should = require('should');
+var assert = require('assert');
 
 var casesPath = path.join(__dirname, './cases');
 
@@ -38,7 +38,7 @@ describe('rider test', function () {
                 if (err) {
                     throw err;
                 }
-                actual.trim().should.equal(css);
+                assert.equal(actual.trim(), css);
             });
         });
     });

From 6735da58ab712293de2f9fb51e39efa6c20b450a Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 6 May 2015 13:35:23 +0800
Subject: [PATCH 09/62] support inline diffs.

---
 test/mocha.opts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/mocha.opts b/test/mocha.opts
index 4d7bcbf..9b43d8b 100644
--- a/test/mocha.opts
+++ b/test/mocha.opts
@@ -1,2 +1,3 @@
 --reporter spec
 --check-leaks
+--inline-diffs

From d849d14be642664d35a833dba0ea06d807afbd6c Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 6 May 2015 16:24:33 +0800
Subject: [PATCH 10/62] demo: remove express.

---
 .npmignore                                    |   1 +
 demo.js                                       |  51 +++++++++++++++++
 demo/{public => css}/breakpoint.styl          |   0
 demo/{public => css}/easing.styl              |   0
 demo/{public => css}/index.styl               |   0
 demo/{public => css}/initialize.styl          |   0
 demo/{public => css}/layout.styl              |   4 +-
 demo/{public => css}/shape.styl               |   0
 demo/{views/easing.ejs => easing.html}        |   2 +-
 demo/{public => }/font/rider-icon.ttf         | Bin
 demo/{public => }/font/rider-icon.woff        | Bin
 demo/{public => }/img/logo.png                | Bin
 demo/{views/index.ejs => index.html}          |   8 +--
 .../{views/initialize.ejs => initialize.html} |   2 +-
 demo/server.js                                |  54 ------------------
 demo/{views/shape.ejs => shape.html}          |   4 +-
 doc/demo-and-ut.md                            |   2 +-
 package.json                                  |   7 ++-
 18 files changed, 67 insertions(+), 68 deletions(-)
 create mode 100644 demo.js
 rename demo/{public => css}/breakpoint.styl (100%)
 rename demo/{public => css}/easing.styl (100%)
 rename demo/{public => css}/index.styl (100%)
 rename demo/{public => css}/initialize.styl (100%)
 rename demo/{public => css}/layout.styl (92%)
 rename demo/{public => css}/shape.styl (100%)
 rename demo/{views/easing.ejs => easing.html} (98%)
 rename demo/{public => }/font/rider-icon.ttf (100%)
 rename demo/{public => }/font/rider-icon.woff (100%)
 rename demo/{public => }/img/logo.png (100%)
 rename demo/{views/index.ejs => index.html} (86%)
 rename demo/{views/initialize.ejs => initialize.html} (99%)
 delete mode 100644 demo/server.js
 rename demo/{views/shape.ejs => shape.html} (95%)

diff --git a/.npmignore b/.npmignore
index 5c05e59..4415c0a 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,2 +1,3 @@
 demo/
 test/
+demo.js
diff --git a/demo.js b/demo.js
new file mode 100644
index 0000000..d26813a
--- /dev/null
+++ b/demo.js
@@ -0,0 +1,51 @@
+/**
+ * @file rider demo
+ * @author firede(firede@firede.us)
+ */
+
+var path = require('path');
+var http = require('http');
+
+var connect = require('connect');
+var serveStatic = require('serve-static');
+
+var stylus = require('stylus');
+var rider = require('./lib/rider');
+var ap = require('autoprefixer-core');
+
+var app = connect();
+var port = 8888;
+
+function compile(str, filePath) {
+    return stylus(str)
+        .set('filename', filePath)
+        .define('url', stylus.resolver())
+        .use(rider())
+        .on('end', prefixer);
+}
+
+function prefixer(_, css) {
+    return ap(
+        {
+            browsers: [
+                '> 5%',
+                'iOS >= 6',
+                'Android >= 2.3',
+                'ExplorerMobile >= 10'
+            ]
+        }
+    ).process(css).css;
+}
+
+app.use(stylus.middleware({
+    src: path.join(__dirname, 'demo'),
+    compile: compile
+}));
+
+app.use(
+    serveStatic(path.join(__dirname, 'demo'))
+);
+
+http.createServer(app).listen(port, function () {
+    console.log('Rider demo started on port %d', port);
+});
diff --git a/demo/public/breakpoint.styl b/demo/css/breakpoint.styl
similarity index 100%
rename from demo/public/breakpoint.styl
rename to demo/css/breakpoint.styl
diff --git a/demo/public/easing.styl b/demo/css/easing.styl
similarity index 100%
rename from demo/public/easing.styl
rename to demo/css/easing.styl
diff --git a/demo/public/index.styl b/demo/css/index.styl
similarity index 100%
rename from demo/public/index.styl
rename to demo/css/index.styl
diff --git a/demo/public/initialize.styl b/demo/css/initialize.styl
similarity index 100%
rename from demo/public/initialize.styl
rename to demo/css/initialize.styl
diff --git a/demo/public/layout.styl b/demo/css/layout.styl
similarity index 92%
rename from demo/public/layout.styl
rename to demo/css/layout.styl
index 123d374..aa9dd70 100644
--- a/demo/public/layout.styl
+++ b/demo/css/layout.styl
@@ -2,7 +2,7 @@ initialize()
 
 // Fonts
 
-font-face('rider-icon', 'font/rider-icon', '1')
+font-face('rider-icon', '../font/rider-icon', '1')
 
 [class^="icon-"], [class*=" icon-"]
     font-family: 'rider-icon'
@@ -37,7 +37,7 @@ font-face('rider-icon', 'font/rider-icon', '1')
         font-size: rem(16)
         margin: 0 auto
         &.logo
-            ir: 'img/logo.png'
+            ir: '../img/logo.png'
             size: 75px 44px
     .next
     .prev
diff --git a/demo/public/shape.styl b/demo/css/shape.styl
similarity index 100%
rename from demo/public/shape.styl
rename to demo/css/shape.styl
diff --git a/demo/views/easing.ejs b/demo/easing.html
similarity index 98%
rename from demo/views/easing.ejs
rename to demo/easing.html
index 24a2ccc..047c63e 100644
--- a/demo/views/easing.ejs
+++ b/demo/easing.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
         <meta name="format-detection" content="telephone=no">
-        <link rel="stylesheet" href="easing.css">
+        <link rel="stylesheet" href="css/easing.css">
         <title>easing</title>
     </head>
     <body>
diff --git a/demo/public/font/rider-icon.ttf b/demo/font/rider-icon.ttf
similarity index 100%
rename from demo/public/font/rider-icon.ttf
rename to demo/font/rider-icon.ttf
diff --git a/demo/public/font/rider-icon.woff b/demo/font/rider-icon.woff
similarity index 100%
rename from demo/public/font/rider-icon.woff
rename to demo/font/rider-icon.woff
diff --git a/demo/public/img/logo.png b/demo/img/logo.png
similarity index 100%
rename from demo/public/img/logo.png
rename to demo/img/logo.png
diff --git a/demo/views/index.ejs b/demo/index.html
similarity index 86%
rename from demo/views/index.ejs
rename to demo/index.html
index 4e256fe..fc65b08 100644
--- a/demo/views/index.ejs
+++ b/demo/index.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
         <meta name="format-detection" content="telephone=no">
-        <link rel="stylesheet" href="index.css">
+        <link rel="stylesheet" href="css/index.css">
         <title>rider</title>
     </head>
     <body>
@@ -13,7 +13,7 @@ <h1 class="title logo">rider</h1>
         </header>
 
         <div class="item-container">
-            <a class="title" href="/easing">
+            <a class="title" href="easing.html">
                 <i class="icon-tag"></i> easing
             </a>
             <div class="content">
@@ -22,7 +22,7 @@ <h1 class="title logo">rider</h1>
         </div>
 
         <div class="item-container">
-            <a class="title" href="/shape">
+            <a class="title" href="shape.html">
                 <i class="icon-tag"></i> shape
             </a>
             <div class="content">
@@ -31,7 +31,7 @@ <h1 class="title logo">rider</h1>
         </div>
 
         <div class="item-container">
-            <a class="title" href="/initialize">
+            <a class="title" href="initialize.html">
                 <i class="icon-tag"></i> initialize
             </a>
             <div class="content">
diff --git a/demo/views/initialize.ejs b/demo/initialize.html
similarity index 99%
rename from demo/views/initialize.ejs
rename to demo/initialize.html
index 8d056e1..739d95d 100644
--- a/demo/views/initialize.ejs
+++ b/demo/initialize.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
         <meta name="format-detection" content="telephone=no">
-        <link rel="stylesheet" href="initialize.css">
+        <link rel="stylesheet" href="css/initialize.css">
         <title>initialize</title>
     </head>
     <body>
diff --git a/demo/server.js b/demo/server.js
deleted file mode 100644
index 5b23bbc..0000000
--- a/demo/server.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * @file rider demo
- * @author firede(firede@firede.us)
- */
-
-var express = require('express');
-var stylus = require('stylus');
-var rider = require('../lib/rider');
-var ap = require('autoprefixer-core');
-var path = require('path');
-
-var app = express();
-
-function compile(str, filePath) {
-    return stylus(str)
-        .set('filename', filePath)
-        .set('resolve url', true)
-        .use(rider())
-        .on('end', prefixer);
-}
-
-function prefixer(err, css) {
-    return ap(
-        {
-            browsers: ['Android >= 2.3', 'iOS >= 5', 'ExplorerMobile >= 10']
-        }
-    ).process(css).css;
-}
-
-app.set('views', path.join(__dirname, '/views'));
-app.set('view engine', 'ejs');
-app.use(stylus.middleware({
-    src: path.join(__dirname, 'public'),
-    compile: compile
-}));
-app.use(express.static(path.join(__dirname, 'public')));
-
-app.get('/:page?', function (req, res) {
-    var page = req.params.page || 'index';
-    var viewPath = path.join(app.get('views'), page + '.ejs');
-    var fs = require('fs');
-
-    if (fs.existsSync(viewPath)) {
-        res.set('Content-Type', 'text/html');
-        res.render(page);
-    }
-    else {
-        res.status(404).end();
-    }
-});
-
-var server = app.listen(8888, function () {
-    console.log('Rider example started on port %d', server.address().port);
-});
diff --git a/demo/views/shape.ejs b/demo/shape.html
similarity index 95%
rename from demo/views/shape.ejs
rename to demo/shape.html
index 0042324..5141ae4 100644
--- a/demo/views/shape.ejs
+++ b/demo/shape.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
         <meta name="format-detection" content="telephone=no">
-        <link rel="stylesheet" href="shape.css">
+        <link rel="stylesheet" href="css/shape.css">
         <title>shape</title>
     </head>
     <body>
@@ -17,7 +17,7 @@ <h3 class="subject">size: 50px</h3>
             <div class="result">
                 <div class="size-test-1"></div>
             </div>
-            
+
             <h3 class="subject">size: 100px, 50px</h3>
             <div class="result">
                 <div class="size-test-2"></div>
diff --git a/doc/demo-and-ut.md b/doc/demo-and-ut.md
index f46051d..9c5f6cf 100644
--- a/doc/demo-and-ut.md
+++ b/doc/demo-and-ut.md
@@ -18,7 +18,7 @@ $ npm install
 在仓库根目录执行：
 
 ```shell
-$ node demo/server.js
+$ npm run demo
 ```
 
 访问网址：
diff --git a/package.json b/package.json
index 0da59f6..f5cba3f 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,14 @@
     ],
     "devDependencies": {
         "autoprefixer-core": "~5.1.11",
-        "ejs": "~2.3.1",
-        "express": "~4.12.3",
+        "connect": "~3.3.5",
         "mocha": "~2.2.4",
+        "serve-static": "^1.9.2",
         "stylus": "~0.51.1"
     },
     "scripts": {
-        "test": "mocha"
+        "test": "mocha",
+        "demo": "node ./demo"
     },
     "main": "./lib/rider.js",
     "license": "MIT",

From a5f95513dc085190f4fe0fab96803b3958103602 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 11 May 2015 13:35:13 +0800
Subject: [PATCH 11/62] shape: add circle.

---
 demo/css/shape.styl  |  7 +++++++
 demo/shape.html      |  9 +++++++++
 lib/rider/shape.styl | 15 ++++++++++++++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/demo/css/shape.styl b/demo/css/shape.styl
index 57c82fd..fd21b34 100644
--- a/demo/css/shape.styl
+++ b/demo/css/shape.styl
@@ -37,3 +37,10 @@
         absolute: 15px -10px _ _
         triangle: right 10px #939
 
+.circle-test-1
+    circle: 60px 80px
+    background: #ccc
+
+.circle-test-2
+    circle: 2rem
+    background: #ccc
diff --git a/demo/shape.html b/demo/shape.html
index 5141ae4..c36c215 100644
--- a/demo/shape.html
+++ b/demo/shape.html
@@ -38,6 +38,15 @@ <h3 class="subject">triangle: right 10px #939 (with &amp;:after)</h3>
                 <div class="triangle-test-3"></div>
             </div>
 
+            <h3 class="subject">circle: 60px 80px</h3>
+            <div class="result">
+                <div class="circle-test-1"></div>
+            </div>
+
+            <h3 class="subject">circle: 2rem</h3>
+            <div class="result">
+                <div class="circle-test-2"></div>
+            </div>
         </div>
     </body>
 </html>
diff --git a/lib/rider/shape.styl b/lib/rider/shape.styl
index 2d01563..19aba41 100644
--- a/lib/rider/shape.styl
+++ b/lib/rider/shape.styl
@@ -1,5 +1,5 @@
 // shape
-// 
+//
 // @author  firede(firede@firede.us)
 
 
@@ -40,3 +40,16 @@ triangle($direction = top, $size = 10px, $color = #333)
         border-bottom: $size solid transparent
         border-left: $size solid $color
 
+// circle
+circle($values...)
+    if length($values) == 1
+        $values-unit = unit($values) == '' ? 'px' : unit($values)
+
+        border-radius: unit($values, $values-unit)
+        size: $values
+    else
+        $horizontal-unit = unit($values[0]) == '' ? 'px' : unit($values[0])
+        $vertical-unit = unit($values[1]) == '' ? 'px' : unit($values[1])
+
+        border-radius: unit($values[0], $horizontal-unit) \/ unit($values[1], $vertical-unit)
+        size: $values[0] $values[1]

From 3bbc803c78d1ed090649f3904f1748901eac9bcc Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 11 May 2015 13:50:32 +0800
Subject: [PATCH 12/62] remove `$-prevent-user-select`, add
 `$-code-font-family`, update `normalize()`. close #8

---
 doc/api.md                |  2 +-
 lib/rider/initialize.styl |  3 ---
 lib/rider/normalize.styl  | 20 +++++++++++++++-----
 lib/rider/setting.styl    |  6 ++----
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/doc/api.md b/doc/api.md
index 5df05df..95d0378 100644
--- a/doc/api.md
+++ b/doc/api.md
@@ -9,7 +9,7 @@ API
 ---|---|---
 `$-base-font-size` | `16px` | 用于设置默认文字大小、常用单位的转换
 `$-base-font-family` | `'Helvetica Neue', sans-serif` | 默认字体
-`$-prevent-user-select` | `false` | 屏蔽用户选择文本的能力，通常用在 Hybrid App 场景
+`$-code-font-family` | `Menlo, Consolas, monospace` | 代码的默认字体
 `$-prevent-text-size-adjust` | `true` | 屏蔽屏幕翻转时，浏览器缩放字体的行为
 `$-prevent-tap-highlight` | `true` | 屏蔽 `a` 标签的点击高亮效果
 `$-image-dppx` | `2` | 图片每像素的点数，用于支持 retina 设备
diff --git a/lib/rider/initialize.styl b/lib/rider/initialize.styl
index e4df9b9..7a171ac 100644
--- a/lib/rider/initialize.styl
+++ b/lib/rider/initialize.styl
@@ -152,9 +152,6 @@ initialize()
             -webkit-text-size-adjust: 100%
             -ms-text-size-adjust: 100%
 
-        if $-prevent-user-select == true
-            user-select: none
-
     // tap highlight color
     if $-prevent-tap-highlight == true
         a,
diff --git a/lib/rider/normalize.styl b/lib/rider/normalize.styl
index 9c5a534..7462cce 100644
--- a/lib/rider/normalize.styl
+++ b/lib/rider/normalize.styl
@@ -7,15 +7,25 @@
 
 normalize()
 
-    // 1. Set default font family to sans-serif.
+    // 1. Set default font family.
     // 2. Prevent iOS and IE text size adjust after device orientation change,
     //    without disabling user zoom.
 
     html
-        font-family: sans-serif // 1
-        -ms-text-size-adjust: 100% // 2
-        -webkit-text-size-adjust: 100% // 2
+        font-size: unit($-base-font-size / 16 * 100, '%')
+        font-family: $-base-font-family // 1
 
+        if $-prevent-text-size-adjust == true // 2
+            -ms-text-size-adjust: 100%
+            -webkit-text-size-adjust: 100%
+
+
+    // tap highlight color
+    if $-prevent-tap-highlight == true
+        a,
+        nav
+            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+            -webkit-tap-highlight-color: transparent // for some Android
 
     // Remove default margin.
 
@@ -193,7 +203,7 @@ normalize()
     kbd,
     pre,
     samp
-        font-family: monospace, monospace
+        font-family: $-code-font-family
         font-size: 1em
 
 
diff --git a/lib/rider/setting.styl b/lib/rider/setting.styl
index efd6c78..1b2b1a0 100644
--- a/lib/rider/setting.styl
+++ b/lib/rider/setting.styl
@@ -11,10 +11,8 @@ vendors = official
 $-base-font-size ?= 16px
 
 // @see http://iosfonts.com
-$-base-font-family ?= 'Helvetica Neue', sans-serif
-
-// usually use `true` in hybrid app
-$-prevent-user-select ?= false
+$-base-font-family ?= 'Helvetica Neue', Arial, sans-serif
+$-code-font-family ?= Menlo, Consolas, monospace
 
 // prevent iOS text size adjust after orientation change
 $-prevent-text-size-adjust ?= true

From 602eb59756fba63656b890b0c2cff38a7641d215 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 11 May 2015 20:16:10 +0800
Subject: [PATCH 13/62] update animate.css (v3.2.6).

---
 demo/animate.html                         |  0
 demo/css/animate.styl                     |  5 +++++
 lib/rider/animate.styl                    |  9 ++++++---
 lib/rider/animate/bounce.styl             | 17 +++++++++++------
 lib/rider/animate/bounceIn.styl           | 18 ++++++++++++------
 lib/rider/animate/bounceInDown.styl       | 14 +++++++++-----
 lib/rider/animate/bounceInLeft.styl       | 14 +++++++++-----
 lib/rider/animate/bounceInRight.styl      | 14 +++++++++-----
 lib/rider/animate/bounceInUp.styl         | 14 +++++++++-----
 lib/rider/animate/bounceOut.styl          | 12 +++++-------
 lib/rider/animate/bounceOutDown.styl      |  8 ++++----
 lib/rider/animate/bounceOutLeft.styl      |  6 ++----
 lib/rider/animate/bounceOutRight.styl     |  6 ++----
 lib/rider/animate/bounceOutUp.styl        |  8 ++++----
 lib/rider/animate/fadeInDown.styl         |  4 ++--
 lib/rider/animate/fadeInDownBig.styl      |  7 +++++++
 lib/rider/animate/fadeInLeft.styl         |  4 ++--
 lib/rider/animate/fadeInLeftBig.styl      |  7 +++++++
 lib/rider/animate/fadeInRight.styl        |  4 ++--
 lib/rider/animate/fadeInRightBig.styl     |  7 +++++++
 lib/rider/animate/fadeInUp.styl           |  4 ++--
 lib/rider/animate/fadeInUpBig.styl        |  7 +++++++
 lib/rider/animate/fadeOutDown.styl        |  3 +--
 lib/rider/animate/fadeOutDownBig.styl     |  6 ++++++
 lib/rider/animate/fadeOutLeft.styl        |  3 +--
 lib/rider/animate/fadeOutLeftBig.styl     |  6 ++++++
 lib/rider/animate/fadeOutRight.styl       |  3 +--
 lib/rider/animate/fadeOutRightBig.styl    |  6 ++++++
 lib/rider/animate/fadeOutUp.styl          |  3 +--
 lib/rider/animate/fadeOutUpBig.styl       |  6 ++++++
 lib/rider/animate/flip.styl               | 10 +++++-----
 lib/rider/animate/flipInX.styl            | 16 ++++++++++------
 lib/rider/animate/flipInY.styl            | 16 ++++++++++------
 lib/rider/animate/flipOutX.styl           |  6 ++++--
 lib/rider/animate/flipOutY.styl           |  6 ++++--
 lib/rider/animate/hinge.styl              | 13 ++++---------
 lib/rider/animate/lightSpeedIn.styl       |  8 ++++----
 lib/rider/animate/lightSpeedOut.styl      |  3 +--
 lib/rider/animate/pulse.styl              |  6 +++---
 lib/rider/animate/rollIn.styl             |  4 ++--
 lib/rider/animate/rollOut.styl            |  3 +--
 lib/rider/animate/rotateIn.styl           |  8 ++++----
 lib/rider/animate/rotateInDownLeft.styl   |  4 ++--
 lib/rider/animate/rotateInDownRight.styl  |  4 ++--
 lib/rider/animate/rotateInUpLeft.styl     |  4 ++--
 lib/rider/animate/rotateInUpRight.styl    |  4 ++--
 lib/rider/animate/rotateOut.styl          |  7 +++----
 lib/rider/animate/rotateOutDownLeft.styl  |  3 +--
 lib/rider/animate/rotateOutDownRight.styl |  3 +--
 lib/rider/animate/rotateOutUpLeft.styl    |  3 +--
 lib/rider/animate/rotateOutUpRight.styl   |  3 +--
 lib/rider/animate/rubberBand.styl         | 16 ++++++++++------
 lib/rider/animate/shake.styl              |  6 +++---
 lib/rider/animate/slideInDown.styl        |  6 +++---
 lib/rider/animate/slideInLeft.styl        |  6 +++---
 lib/rider/animate/slideInRight.styl       |  6 +++---
 lib/rider/animate/slideInUp.styl          |  7 +++----
 lib/rider/animate/slideOutDown.styl       |  6 +++---
 lib/rider/animate/slideOutLeft.styl       |  6 +++---
 lib/rider/animate/slideOutRight.styl      |  6 +++---
 lib/rider/animate/slideOutUp.styl         |  6 +++---
 lib/rider/animate/swing.styl              | 10 +++++-----
 lib/rider/animate/tada.styl               | 10 +++++-----
 lib/rider/animate/wobble.styl             | 14 +++++++-------
 lib/rider/animate/zoomIn.styl             |  7 +++++++
 lib/rider/animate/zoomInDown.styl         |  9 +++++++++
 lib/rider/animate/zoomInLeft.styl         |  9 +++++++++
 lib/rider/animate/zoomInRight.styl        |  9 +++++++++
 lib/rider/animate/zoomInUp.styl           |  9 +++++++++
 lib/rider/animate/zoomOut.styl            |  8 ++++++++
 lib/rider/animate/zoomOutDown.styl        | 10 ++++++++++
 lib/rider/animate/zoomOutLeft.styl        |  8 ++++++++
 lib/rider/animate/zoomOutRight.styl       |  8 ++++++++
 lib/rider/animate/zoomOutUp.styl          | 10 ++++++++++
 74 files changed, 359 insertions(+), 192 deletions(-)
 create mode 100644 demo/animate.html
 create mode 100644 demo/css/animate.styl
 create mode 100644 lib/rider/animate/fadeInDownBig.styl
 create mode 100644 lib/rider/animate/fadeInLeftBig.styl
 create mode 100644 lib/rider/animate/fadeInRightBig.styl
 create mode 100644 lib/rider/animate/fadeInUpBig.styl
 create mode 100644 lib/rider/animate/fadeOutDownBig.styl
 create mode 100644 lib/rider/animate/fadeOutLeftBig.styl
 create mode 100644 lib/rider/animate/fadeOutRightBig.styl
 create mode 100644 lib/rider/animate/fadeOutUpBig.styl
 create mode 100644 lib/rider/animate/zoomIn.styl
 create mode 100644 lib/rider/animate/zoomInDown.styl
 create mode 100644 lib/rider/animate/zoomInLeft.styl
 create mode 100644 lib/rider/animate/zoomInRight.styl
 create mode 100644 lib/rider/animate/zoomInUp.styl
 create mode 100644 lib/rider/animate/zoomOut.styl
 create mode 100644 lib/rider/animate/zoomOutDown.styl
 create mode 100644 lib/rider/animate/zoomOutLeft.styl
 create mode 100644 lib/rider/animate/zoomOutRight.styl
 create mode 100644 lib/rider/animate/zoomOutUp.styl

diff --git a/demo/animate.html b/demo/animate.html
new file mode 100644
index 0000000..e69de29
diff --git a/demo/css/animate.styl b/demo/css/animate.styl
new file mode 100644
index 0000000..62cceba
--- /dev/null
+++ b/demo/css/animate.styl
@@ -0,0 +1,5 @@
+.test
+    animate('bounce')
+
+.abc
+    animate('bounce', 0.5s)
diff --git a/lib/rider/animate.styl b/lib/rider/animate.styl
index ae91b23..636db79 100644
--- a/lib/rider/animate.styl
+++ b/lib/rider/animate.styl
@@ -1,7 +1,7 @@
 // animate
 //
 // @author  firede(firede@firede.us)
-// @desc    ported from Animate.css v3
+// @desc    ported from Animate.css v3.2.6
 // @see     http://daneden.github.io/animate.css
 
 
@@ -18,7 +18,11 @@ animate($name, $duration = 1s, $fill-mode = both)
         animation-fill-mode: $fill-mode
 
         // process special animation
-        if $name in (flip flipInX flipInY flipOutX flipOutY)
+        if $name == bounce
+            transform-origin: center bottom
+        if $anme == flip
+            backface-visibility: visible
+        if $name in (flipInX flipInY flipOutX flipOutY)
             backface-visibility: visible !important
         if $name == lightSpeedIn
             animation-timing-function: ease-out
@@ -26,4 +30,3 @@ animate($name, $duration = 1s, $fill-mode = both)
             animation-timing-function: ease-in
         if $name == swing
             transform-origin: top center
-
diff --git a/lib/rider/animate/bounce.styl b/lib/rider/animate/bounce.styl
index 54c6a60..8052dfa 100644
--- a/lib/rider/animate/bounce.styl
+++ b/lib/rider/animate/bounce.styl
@@ -1,7 +1,12 @@
 @keyframes bounce
-    0%, 20%, 50%, 80%, 100%
-        transform: translateY(0)
-    40%
-        transform: translateY(-30px)
-    60%
-        transform: translateY(-15px)
+    0%, 20%, 53%, 80%, 100%
+        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
+        transform: translate3d(0, 0, 0)
+    40%, 43%
+        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
+        transform: translate3d(0, -30px, 0)
+    70%
+        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060)
+        transform: translate3d(0, -15px, 0)
+    90%
+        transform: translate3d(0, -4px, 0)
diff --git a/lib/rider/animate/bounceIn.styl b/lib/rider/animate/bounceIn.styl
index d6726c9..77008cb 100644
--- a/lib/rider/animate/bounceIn.styl
+++ b/lib/rider/animate/bounceIn.styl
@@ -1,12 +1,18 @@
 @keyframes bounceIn
+    0%, 20%, 40%, 60%, 80%, 100%
+        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
     0%
         opacity: 0
-        transform: scale(.3)
-    50%
+        transform: scale3d(.3, .3, .3)
+    20%
+        transform: scale3d(1.1, 1.1, 1.1)
+    40%
+        transform: scale3d(.9, .9, .9)
+    60%
         opacity: 1
-        transform: scale(1.05)
-    70%
-        transform: scale(.9)
+        transform: scale3d(1.03, 1.03, 1.03)
+    80%
+        transform: scale3d(.97, .97, .97)
     100%
         opacity: 1
-        transform: scale(1)
+        transform: scale3d(1, 1, 1)
diff --git a/lib/rider/animate/bounceInDown.styl b/lib/rider/animate/bounceInDown.styl
index 3f1735f..f5c9e7c 100644
--- a/lib/rider/animate/bounceInDown.styl
+++ b/lib/rider/animate/bounceInDown.styl
@@ -1,11 +1,15 @@
 @keyframes bounceInDown
+    0%, 60%, 75%, 90%, 100%
+        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
     0%
         opacity: 0
-        transform: translateY(-2000px)
+        transform: translate3d(0, -3000px, 0)
     60%
         opacity: 1
-        transform: translateY(30px)
-    80%
-        transform: translateY(-10px)
+        transform: translate3d(0, 25px, 0)
+    75%
+        transform: translate3d(0, -10px, 0)
+    90%
+        transform: translate3d(0, 5px, 0)
     100%
-        transform: translateY(0)
+        transform: none
diff --git a/lib/rider/animate/bounceInLeft.styl b/lib/rider/animate/bounceInLeft.styl
index d8d94fb..9517891 100644
--- a/lib/rider/animate/bounceInLeft.styl
+++ b/lib/rider/animate/bounceInLeft.styl
@@ -1,11 +1,15 @@
 @keyframes bounceInLeft
+    0%, 60%, 75%, 90%, 100%
+        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
     0%
         opacity: 0
-        transform: translateX(-2000px)
+        transform: translate3d(-3000px, 0, 0)
     60%
         opacity: 1
-        transform: translateX(30px)
-    80%
-        transform: translateX(-10px)
+        transform: translate3d(25px, 0, 0)
+    75%
+        transform: translate3d(-10px, 0, 0)
+    90%
+        transform: translate3d(5px, 0, 0)
     100%
-        transform: translateX(0)
+        transform: none
diff --git a/lib/rider/animate/bounceInRight.styl b/lib/rider/animate/bounceInRight.styl
index bd25a79..2b7d24d 100644
--- a/lib/rider/animate/bounceInRight.styl
+++ b/lib/rider/animate/bounceInRight.styl
@@ -1,11 +1,15 @@
 @keyframes bounceInRight
+    0%, 60%, 75%, 90%, 100%
+        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
     0%
         opacity: 0
-        transform: translateX(2000px)
+        transform: translate3d(3000px, 0, 0)
     60%
         opacity: 1
-        transform: translateX(-30px)
-    80%
-        transform: translateX(10px)
+        transform: translate3d(-25px, 0, 0)
+    75%
+        transform: translate3d(10px, 0, 0)
+    90%
+        transform: translate3d(-5px, 0, 0)
     100%
-        transform: translateX(0)
+        transform: none
diff --git a/lib/rider/animate/bounceInUp.styl b/lib/rider/animate/bounceInUp.styl
index e6f597d..32fe373 100644
--- a/lib/rider/animate/bounceInUp.styl
+++ b/lib/rider/animate/bounceInUp.styl
@@ -1,11 +1,15 @@
 @keyframes bounceInUp
+    0%, 60%, 75%, 90%, 100%
+        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
     0%
         opacity: 0
-        transform: translateY(2000px)
+        transform: translate3d(0, 3000px, 0)
     60%
         opacity: 1
-        transform: translateY(-30px)
-    80%
-        transform: translateY(10px)
+        transform: translate3d(0, -20px, 0)
+    75%
+        transform: translate3d(0, 10px, 0)
+    90%
+        transform: translate3d(0, -5px, 0)
     100%
-        transform: translateY(0)
+        transform: translate3d(0, 0, 0)
diff --git a/lib/rider/animate/bounceOut.styl b/lib/rider/animate/bounceOut.styl
index 0113344..5b34b2a 100644
--- a/lib/rider/animate/bounceOut.styl
+++ b/lib/rider/animate/bounceOut.styl
@@ -1,11 +1,9 @@
 @keyframes bounceOut
-    0%
-        transform: scale(1)
-    25%
-        transform: scale(.95)
-    50%
+    20%
+        transform: scale3d(.9, .9, .9)
+    50%, 55%
         opacity: 1
-        transform: scale(1.1)
+        transform: scale3d(1.1, 1.1, 1.1)
     100%
         opacity: 0
-        transform: scale(.3)
+        transform: scale3d(.3, .3, .3)
diff --git a/lib/rider/animate/bounceOutDown.styl b/lib/rider/animate/bounceOutDown.styl
index 8b577a9..07af340 100644
--- a/lib/rider/animate/bounceOutDown.styl
+++ b/lib/rider/animate/bounceOutDown.styl
@@ -1,9 +1,9 @@
 @keyframes bounceOutDown
-    0%
-        transform: translateY(0)
     20%
+        transform: translate3d(0, 10px, 0)
+    40%, 45%
         opacity: 1
-        transform: translateY(-20px)
+        transform: translate3d(0, -20px, 0)
     100%
         opacity: 0
-        transform: translateY(2000px)
+        transform: translate3d(0, 2000px, 0)
diff --git a/lib/rider/animate/bounceOutLeft.styl b/lib/rider/animate/bounceOutLeft.styl
index f2e6bb1..9a7de10 100644
--- a/lib/rider/animate/bounceOutLeft.styl
+++ b/lib/rider/animate/bounceOutLeft.styl
@@ -1,9 +1,7 @@
 @keyframes bounceOutLeft
-    0%
-        transform: translateX(0)
     20%
         opacity: 1
-        transform: translateX(20px)
+        transform: translate3d(20px, 0, 0)
     100%
         opacity: 0
-        transform: translateX(-2000px)
+        transform: translate3d(-2000px, 0, 0)
diff --git a/lib/rider/animate/bounceOutRight.styl b/lib/rider/animate/bounceOutRight.styl
index b67b53e..5fb3979 100644
--- a/lib/rider/animate/bounceOutRight.styl
+++ b/lib/rider/animate/bounceOutRight.styl
@@ -1,9 +1,7 @@
 @keyframes bounceOutRight
-    0%
-        transform: translateX(0)
     20%
         opacity: 1
-        transform: translateX(-20px)
+        transform: translate3d(-20px, 0, 0)
     100%
         opacity: 0
-        transform: translateX(2000px)
+        transform: translate3d(2000px, 0, 0)
diff --git a/lib/rider/animate/bounceOutUp.styl b/lib/rider/animate/bounceOutUp.styl
index f5616e0..1b4d12d 100644
--- a/lib/rider/animate/bounceOutUp.styl
+++ b/lib/rider/animate/bounceOutUp.styl
@@ -1,9 +1,9 @@
 @keyframes bounceOutUp
-    0%
-        transform: translateY(0)
     20%
+        transform: translate3d(0, -10px, 0)
+    40%, 45%
         opacity: 1
-        transform: translateY(20px)
+        transform: translate3d(0, 20px, 0)
     100%
         opacity: 0
-        transform: translateY(-2000px)
+        transform: translate3d(0, -2000px, 0)
diff --git a/lib/rider/animate/fadeInDown.styl b/lib/rider/animate/fadeInDown.styl
index c33a8a3..11199da 100644
--- a/lib/rider/animate/fadeInDown.styl
+++ b/lib/rider/animate/fadeInDown.styl
@@ -1,7 +1,7 @@
 @keyframes fadeInDown
     0%
         opacity: 0
-        transform: translateY(-20px)
+        transform: translate3d(0, -100%, 0)
     100%
         opacity: 1
-        transform: translateY(0)
+        transform: none
diff --git a/lib/rider/animate/fadeInDownBig.styl b/lib/rider/animate/fadeInDownBig.styl
new file mode 100644
index 0000000..97fb173
--- /dev/null
+++ b/lib/rider/animate/fadeInDownBig.styl
@@ -0,0 +1,7 @@
+@keyframes fadeInDownBig
+    0%
+        opacity: 0
+        transform: translate3d(0, -2000px, 0)
+    100%
+        opacity: 1
+        transform: none
diff --git a/lib/rider/animate/fadeInLeft.styl b/lib/rider/animate/fadeInLeft.styl
index 34fd2be..fd8c4e2 100644
--- a/lib/rider/animate/fadeInLeft.styl
+++ b/lib/rider/animate/fadeInLeft.styl
@@ -1,7 +1,7 @@
 @keyframes fadeInLeft
     0%
         opacity: 0
-        transform: translateX(-20px)
+        transform: translate3d(-100%, 0, 0)
     100%
         opacity: 1
-        transform: translateX(0)
+        transform: none
diff --git a/lib/rider/animate/fadeInLeftBig.styl b/lib/rider/animate/fadeInLeftBig.styl
new file mode 100644
index 0000000..b106a62
--- /dev/null
+++ b/lib/rider/animate/fadeInLeftBig.styl
@@ -0,0 +1,7 @@
+@keyframes fadeInLeftBig
+    0%
+        opacity: 0
+        transform: translate3d(-2000px, 0, 0)
+    100%
+        opacity: 1
+        transform: none
diff --git a/lib/rider/animate/fadeInRight.styl b/lib/rider/animate/fadeInRight.styl
index 9ab65bf..e40a546 100644
--- a/lib/rider/animate/fadeInRight.styl
+++ b/lib/rider/animate/fadeInRight.styl
@@ -1,7 +1,7 @@
 @keyframes fadeInRight
     0%
         opacity: 0
-        transform: translateX(20px)
+        transform: translate3d(100%, 0, 0)
     100%
         opacity: 1
-        transform: translateX(0)
+        transform: none
diff --git a/lib/rider/animate/fadeInRightBig.styl b/lib/rider/animate/fadeInRightBig.styl
new file mode 100644
index 0000000..243af09
--- /dev/null
+++ b/lib/rider/animate/fadeInRightBig.styl
@@ -0,0 +1,7 @@
+@keyframes fadeInRightBig
+    0%
+        opacity: 0
+        transform: translate3d(2000px, 0, 0)
+    100%
+        opacity: 1
+        transform: none
diff --git a/lib/rider/animate/fadeInUp.styl b/lib/rider/animate/fadeInUp.styl
index 9b499b5..ad4f1fe 100644
--- a/lib/rider/animate/fadeInUp.styl
+++ b/lib/rider/animate/fadeInUp.styl
@@ -1,7 +1,7 @@
 @keyframes fadeInUp
     0%
         opacity: 0
-        transform: translateY(20px)
+        transform: translate3d(0, 100%, 0)
     100%
         opacity: 1
-        transform: translateY(0)
+        transform: none
diff --git a/lib/rider/animate/fadeInUpBig.styl b/lib/rider/animate/fadeInUpBig.styl
new file mode 100644
index 0000000..fd19b18
--- /dev/null
+++ b/lib/rider/animate/fadeInUpBig.styl
@@ -0,0 +1,7 @@
+@keyframes fadeInUpBig
+    0%
+        opacity: 0
+        transform: translate3d(0, 2000px, 0)
+    100%
+        opacity: 1
+        transform: none
diff --git a/lib/rider/animate/fadeOutDown.styl b/lib/rider/animate/fadeOutDown.styl
index 0ed0fe2..dacaf81 100644
--- a/lib/rider/animate/fadeOutDown.styl
+++ b/lib/rider/animate/fadeOutDown.styl
@@ -1,7 +1,6 @@
 @keyframes fadeOutDown
     0%
         opacity: 1
-        transform: translateY(0)
     100%
         opacity: 0
-        transform: translateY(20px)
+        transform: translate3d(0, 100%, 0)
diff --git a/lib/rider/animate/fadeOutDownBig.styl b/lib/rider/animate/fadeOutDownBig.styl
new file mode 100644
index 0000000..633442b
--- /dev/null
+++ b/lib/rider/animate/fadeOutDownBig.styl
@@ -0,0 +1,6 @@
+@keyframes fadeOutDownBig
+    0%
+        opacity: 1
+    100%
+        opacity: 0
+        transform: translate3d(0, 2000px, 0)
diff --git a/lib/rider/animate/fadeOutLeft.styl b/lib/rider/animate/fadeOutLeft.styl
index d28777a..cd26172 100644
--- a/lib/rider/animate/fadeOutLeft.styl
+++ b/lib/rider/animate/fadeOutLeft.styl
@@ -1,7 +1,6 @@
 @keyframes fadeOutLeft
     0%
         opacity: 1
-        transform: translateX(0)
     100%
         opacity: 0
-        transform: translateX(-20px)
+        transform: translate3d(-100%, 0, 0)
diff --git a/lib/rider/animate/fadeOutLeftBig.styl b/lib/rider/animate/fadeOutLeftBig.styl
new file mode 100644
index 0000000..ab6e2c6
--- /dev/null
+++ b/lib/rider/animate/fadeOutLeftBig.styl
@@ -0,0 +1,6 @@
+@keyframes fadeOutLeftBig
+    0%
+        opacity: 1
+    100%
+        opacity: 0
+        transform: translate3d(-2000px, 0, 0)
diff --git a/lib/rider/animate/fadeOutRight.styl b/lib/rider/animate/fadeOutRight.styl
index aae83ae..3175872 100644
--- a/lib/rider/animate/fadeOutRight.styl
+++ b/lib/rider/animate/fadeOutRight.styl
@@ -1,7 +1,6 @@
 @keyframes fadeOutRight
     0%
         opacity: 1
-        transform: translateX(0)
     100%
         opacity: 0
-        transform: translateX(20px)
+        transform: translate3d(100%, 0, 0)
diff --git a/lib/rider/animate/fadeOutRightBig.styl b/lib/rider/animate/fadeOutRightBig.styl
new file mode 100644
index 0000000..32b8563
--- /dev/null
+++ b/lib/rider/animate/fadeOutRightBig.styl
@@ -0,0 +1,6 @@
+@keyframes fadeOutRightBig
+    0%
+        opacity: 1
+    100%
+        opacity: 0
+        transform: translate3d(2000px, 0, 0)
diff --git a/lib/rider/animate/fadeOutUp.styl b/lib/rider/animate/fadeOutUp.styl
index 33c9664..7840b89 100644
--- a/lib/rider/animate/fadeOutUp.styl
+++ b/lib/rider/animate/fadeOutUp.styl
@@ -1,7 +1,6 @@
 @keyframes fadeOutUp
     0%
         opacity: 1
-        transform: translateY(0)
     100%
         opacity: 0
-        transform: translateY(-20px)
+        transform: translate3d(0, -100%, 0)
diff --git a/lib/rider/animate/fadeOutUpBig.styl b/lib/rider/animate/fadeOutUpBig.styl
new file mode 100644
index 0000000..c8bc82b
--- /dev/null
+++ b/lib/rider/animate/fadeOutUpBig.styl
@@ -0,0 +1,6 @@
+@keyframes fadeOutUpBig
+    0%
+        opacity: 1
+    100%
+        opacity: 0
+        transform: translate3d(0, -2000px, 0)
diff --git a/lib/rider/animate/flip.styl b/lib/rider/animate/flip.styl
index 329b74c..56f4c52 100644
--- a/lib/rider/animate/flip.styl
+++ b/lib/rider/animate/flip.styl
@@ -1,16 +1,16 @@
 @keyframes flip
     0%
-        transform: perspective(400px) translateZ(0) rotateY(0) scale(1)
+        transform: perspective(400px) rotate3d(0, 1, 0, -360deg)
         animation-timing-function: ease-out
     40%
-        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1)
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)
         animation-timing-function: ease-out
     50%
-        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1)
+        transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)
         animation-timing-function: ease-in
     80%
-        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95)
+        transform: perspective(400px) scale3d(.95, .95, .95)
         animation-timing-function: ease-in
     100%
-        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1)
+        transform: perspective(400px)
         animation-timing-function: ease-in
diff --git a/lib/rider/animate/flipInX.styl b/lib/rider/animate/flipInX.styl
index c9c2cc4..4a825a4 100644
--- a/lib/rider/animate/flipInX.styl
+++ b/lib/rider/animate/flipInX.styl
@@ -1,11 +1,15 @@
 @keyframes flipInX
     0%
-        transform: perspective(400px) rotateX(90deg)
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
+        transition-timing-function: ease-in
         opacity: 0
     40%
-        transform: perspective(400px) rotateX(-10deg)
-    70%
-        transform: perspective(400px) rotateX(10deg)
-    100%
-        transform: perspective(400px) rotateX(0deg)
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
+        transition-timing-function: ease-in
+    60%
+        transform: perspective(400px) rotate3d(1, 0, 0, 10deg)
         opacity: 1
+    80%
+        transform: perspective(400px) rotate3d(1, 0, 0, -5deg)
+    100%
+        transform: perspective(400px)
diff --git a/lib/rider/animate/flipInY.styl b/lib/rider/animate/flipInY.styl
index 31e16f6..68ae219 100644
--- a/lib/rider/animate/flipInY.styl
+++ b/lib/rider/animate/flipInY.styl
@@ -1,11 +1,15 @@
 @keyframes flipInY
     0%
-        transform: perspective(400px) rotateY(90deg)
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg)
+        transition-timing-function: ease-in
         opacity: 0
     40%
-        transform: perspective(400px) rotateY(-10deg)
-    70%
-        transform: perspective(400px) rotateY(10deg)
-    100%
-        transform: perspective(400px) rotateY(0deg)
+        transform: perspective(400px) rotate3d(0, 1, 0, -20deg)
+        transition-timing-function: ease-in
+    60%
+        transform: perspective(400px) rotate3d(0, 1, 0, 10deg)
         opacity: 1
+    80%
+        transform: perspective(400px) rotate3d(0, 1, 0, -5deg)
+    100%
+        transform: perspective(400px)
diff --git a/lib/rider/animate/flipOutX.styl b/lib/rider/animate/flipOutX.styl
index 1fbbd2b..43db172 100644
--- a/lib/rider/animate/flipOutX.styl
+++ b/lib/rider/animate/flipOutX.styl
@@ -1,7 +1,9 @@
 @keyframes flipOutX
     0%
-        transform: perspective(400px) rotateX(0deg)
+        transform: perspective(400px)
+    30%
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg)
         opacity: 1
     100%
-        transform: perspective(400px) rotateX(90deg)
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg)
         opacity: 0
diff --git a/lib/rider/animate/flipOutY.styl b/lib/rider/animate/flipOutY.styl
index 229d924..5379c27 100644
--- a/lib/rider/animate/flipOutY.styl
+++ b/lib/rider/animate/flipOutY.styl
@@ -1,7 +1,9 @@
 @keyframes flipOutY
     0%
-        transform: perspective(400px) rotateY(0deg)
+        transform: perspective(400px)
+    30%
+        transform: perspective(400px) rotate3d(0, 1, 0, -15deg)
         opacity: 1
     100%
-        transform: perspective(400px) rotateY(90deg)
+        transform: perspective(400px) rotate3d(0, 1, 0, 90deg)
         opacity: 0
diff --git a/lib/rider/animate/hinge.styl b/lib/rider/animate/hinge.styl
index 288d18e..260a316 100644
--- a/lib/rider/animate/hinge.styl
+++ b/lib/rider/animate/hinge.styl
@@ -1,21 +1,16 @@
 @keyframes hinge
     0%
-        transform: rotate(0)
         transform-origin: top left
         animation-timing-function: ease-in-out
     20%, 60%
-        transform: rotate(80deg)
+        transform: rotate3d(0, 0, 1, 80deg)
         transform-origin: top left
         animation-timing-function: ease-in-out
-    40%
-        transform: rotate(60deg)
+    40%, 80%
+        transform: rotate3d(0, 0, 1, 60deg)
         transform-origin: top left
         animation-timing-function: ease-in-out
-    80%
-        transform: rotate(60deg) translateY(0)
         opacity: 1
-        transform-origin: top left
-        animation-timing-function: ease-in-out
     100%
-        transform: translateY(700px)
+        transform: translate3d(0, 700px, 0)
         opacity: 0
diff --git a/lib/rider/animate/lightSpeedIn.styl b/lib/rider/animate/lightSpeedIn.styl
index 7401a67..f530d07 100644
--- a/lib/rider/animate/lightSpeedIn.styl
+++ b/lib/rider/animate/lightSpeedIn.styl
@@ -1,13 +1,13 @@
 @keyframes lightSpeedIn
     0%
-        transform: translateX(100%) skewX(-30deg)
+        transform: translate3d(100%, 0, 0) skewX(-30deg)
         opacity: 0
     60%
-        transform: translateX(-20%) skewX(30deg)
+        transform: skewX(20deg)
         opacity: 1
     80%
-        transform: translateX(0%) skewX(-15deg)
+        transform: skewX(-5deg)
         opacity: 1
     100%
-        transform: translateX(0%) skewX(0deg)
+        transform: none
         opacity: 1
diff --git a/lib/rider/animate/lightSpeedOut.styl b/lib/rider/animate/lightSpeedOut.styl
index badc263..dfeb77f 100644
--- a/lib/rider/animate/lightSpeedOut.styl
+++ b/lib/rider/animate/lightSpeedOut.styl
@@ -1,7 +1,6 @@
 @keyframes lightSpeedOut
     0%
-        transform: translateX(0%) skewX(0deg)
         opacity: 1
     100%
-        transform: translateX(100%) skewX(-30deg)
+        transform: translate3d(100%, 0, 0) skewX(30deg)
         opacity: 0
diff --git a/lib/rider/animate/pulse.styl b/lib/rider/animate/pulse.styl
index b1f3ae7..40f7fb0 100644
--- a/lib/rider/animate/pulse.styl
+++ b/lib/rider/animate/pulse.styl
@@ -2,8 +2,8 @@
 
 @keyframes pulse
     0%
-        transform: scale(1)
+        transform: scale3d(1, 1, 1)
     50%
-        transform: scale(1.1)
+        transform: scale3d(1.05, 1.05, 1.05)
     100%
-        transform: scale(1)
+        transform: scale3d(1, 1, 1)
diff --git a/lib/rider/animate/rollIn.styl b/lib/rider/animate/rollIn.styl
index b4cea9c..ff8c24d 100644
--- a/lib/rider/animate/rollIn.styl
+++ b/lib/rider/animate/rollIn.styl
@@ -3,7 +3,7 @@
 @keyframes rollIn
     0%
         opacity: 0
-        transform: translateX(-100%) rotate(-120deg)
+        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)
     100%
         opacity: 1
-        transform: translateX(0px) rotate(0deg)
+        transform: none
diff --git a/lib/rider/animate/rollOut.styl b/lib/rider/animate/rollOut.styl
index 14f396d..a3fddd3 100644
--- a/lib/rider/animate/rollOut.styl
+++ b/lib/rider/animate/rollOut.styl
@@ -3,7 +3,6 @@
 @keyframes rollOut
     0%
         opacity: 1
-        transform: translateX(0px) rotate(0deg)
     100%
         opacity: 0
-        transform: translateX(100%) rotate(120deg)
+        transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)
diff --git a/lib/rider/animate/rotateIn.styl b/lib/rider/animate/rotateIn.styl
index 4212fbc..42bf3c5 100644
--- a/lib/rider/animate/rotateIn.styl
+++ b/lib/rider/animate/rotateIn.styl
@@ -1,9 +1,9 @@
 @keyframes rotateIn
     0%
-        transform-origin: center center
-        transform: rotate(-200deg)
+        transform-origin: center
+        transform: rotate3d(0, 0, 1, -200deg)
         opacity: 0
     100%
-        transform-origin: center center
-        transform: rotate(0)
+        transform-origin: center
+        transform: none
         opacity: 1
diff --git a/lib/rider/animate/rotateInDownLeft.styl b/lib/rider/animate/rotateInDownLeft.styl
index 4c61174..f8aec83 100644
--- a/lib/rider/animate/rotateInDownLeft.styl
+++ b/lib/rider/animate/rotateInDownLeft.styl
@@ -1,9 +1,9 @@
 @keyframes rotateInDownLeft
     0%
         transform-origin: left bottom
-        transform: rotate(-90deg)
+        transform: rotate3d(0, 0, 1, -45deg)
         opacity: 0
     100%
         transform-origin: left bottom
-        transform: rotate(0)
+        transform: none
         opacity: 1
diff --git a/lib/rider/animate/rotateInDownRight.styl b/lib/rider/animate/rotateInDownRight.styl
index 2100eb8..d1fdd46 100644
--- a/lib/rider/animate/rotateInDownRight.styl
+++ b/lib/rider/animate/rotateInDownRight.styl
@@ -1,9 +1,9 @@
 @keyframes rotateInDownRight
     0%
         transform-origin: right bottom
-        transform: rotate(90deg)
+        transform: rotate3d(0, 0, 1, 45deg)
         opacity: 0
     100%
         transform-origin: right bottom
-        transform: rotate(0)
+        transform: none
         opacity: 1
diff --git a/lib/rider/animate/rotateInUpLeft.styl b/lib/rider/animate/rotateInUpLeft.styl
index e804ada..834b6a2 100644
--- a/lib/rider/animate/rotateInUpLeft.styl
+++ b/lib/rider/animate/rotateInUpLeft.styl
@@ -1,9 +1,9 @@
 @keyframes rotateInUpLeft
     0%
         transform-origin: left bottom
-        transform: rotate(90deg)
+        transform: rotate3d(0, 0, 1, 45deg)
         opacity: 0
     100%
         transform-origin: left bottom
-        transform: rotate(0)
+        transform: none
         opacity: 1
diff --git a/lib/rider/animate/rotateInUpRight.styl b/lib/rider/animate/rotateInUpRight.styl
index 3ad672d..b6cdea6 100644
--- a/lib/rider/animate/rotateInUpRight.styl
+++ b/lib/rider/animate/rotateInUpRight.styl
@@ -1,9 +1,9 @@
 @keyframes rotateInUpRight
     0%
         transform-origin: right bottom
-        transform: rotate(-90deg)
+        transform: rotate3d(0, 0, 1, -90deg)
         opacity: 0
     100%
         transform-origin: right bottom
-        transform: rotate(0)
+        transform: none
         opacity: 1
diff --git a/lib/rider/animate/rotateOut.styl b/lib/rider/animate/rotateOut.styl
index 922a7a3..abeb091 100644
--- a/lib/rider/animate/rotateOut.styl
+++ b/lib/rider/animate/rotateOut.styl
@@ -1,9 +1,8 @@
 @keyframes rotateOut
     0%
-        transform-origin: center center
-        transform: rotate(0)
+        transform-origin: center
         opacity: 1
     100%
-        transform-origin: center center
-        transform: rotate(200deg)
+        transform-origin: center
+        transform: rotate3d(0, 0, 1, 200deg)
         opacity: 0
diff --git a/lib/rider/animate/rotateOutDownLeft.styl b/lib/rider/animate/rotateOutDownLeft.styl
index eeaef83..0ae385d 100644
--- a/lib/rider/animate/rotateOutDownLeft.styl
+++ b/lib/rider/animate/rotateOutDownLeft.styl
@@ -1,9 +1,8 @@
 @keyframes rotateOutDownLeft
     0%
         transform-origin: left bottom
-        transform: rotate(0)
         opacity: 1
     100%
         transform-origin: left bottom
-        transform: rotate(90deg)
+        transform: rotate3d(0, 0, 1, 45deg)
         opacity: 0
diff --git a/lib/rider/animate/rotateOutDownRight.styl b/lib/rider/animate/rotateOutDownRight.styl
index edeb79c..63428d1 100644
--- a/lib/rider/animate/rotateOutDownRight.styl
+++ b/lib/rider/animate/rotateOutDownRight.styl
@@ -1,9 +1,8 @@
 @keyframes rotateOutDownRight
     0%
         transform-origin: right bottom
-        transform: rotate(0)
         opacity: 1
     100%
         transform-origin: right bottom
-        transform: rotate(-90deg)
+        transform: rotate3d(0, 0, 1, -45deg)
         opacity: 0
diff --git a/lib/rider/animate/rotateOutUpLeft.styl b/lib/rider/animate/rotateOutUpLeft.styl
index 665d9e0..0cee4d5 100644
--- a/lib/rider/animate/rotateOutUpLeft.styl
+++ b/lib/rider/animate/rotateOutUpLeft.styl
@@ -1,9 +1,8 @@
 @keyframes rotateOutUpLeft
     0%
         transform-origin: left bottom
-        transform: rotate(0)
         opacity: 1
     100%
         transform-origin: left bottom
-        transform: rotate(-90deg)
+        transform: rotate3d(0, 0, 1, -45deg)
         opacity: 0
diff --git a/lib/rider/animate/rotateOutUpRight.styl b/lib/rider/animate/rotateOutUpRight.styl
index 19463cb..fd642e6 100644
--- a/lib/rider/animate/rotateOutUpRight.styl
+++ b/lib/rider/animate/rotateOutUpRight.styl
@@ -1,9 +1,8 @@
 @keyframes rotateOutUpRight
     0%
         transform-origin: right bottom
-        transform: rotate(0)
         opacity: 1
     100%
         transform-origin: right bottom
-        transform: rotate(90deg)
+        transform: rotate3d(0, 0, 1, 90deg)
         opacity: 0
diff --git a/lib/rider/animate/rubberBand.styl b/lib/rider/animate/rubberBand.styl
index fa755f2..488b516 100644
--- a/lib/rider/animate/rubberBand.styl
+++ b/lib/rider/animate/rubberBand.styl
@@ -1,11 +1,15 @@
 @keyframes rubberBand
     0%
-        transform: scale(1) 
+        transform: scale3d(1, 1, 1)
     30%
-        transform: scaleX(1.25) scaleY(0.75)
+        transform: scale3d(1.25, 0.75, 1)
     40%
-        transform: scaleX(0.75) scaleY(1.25)
-    60%
-        transform: scaleX(1.15) scaleY(0.85)
+        transform: scale3d(0.75, 1.25, 1)
+    50%
+        transform: scale3d(1.15, 0.85, 1)
+    65%
+        transform: scale3d(.95, 1.05, 1)
+    75%
+        transform: scale3d(1.05, .95, 1)
     100%
-        transform: scale(1)
+        transform: scale3d(1, 1, 1)
diff --git a/lib/rider/animate/shake.styl b/lib/rider/animate/shake.styl
index a273a4d..aded40a 100644
--- a/lib/rider/animate/shake.styl
+++ b/lib/rider/animate/shake.styl
@@ -1,7 +1,7 @@
 @keyframes shake
     0%, 100%
-        transform: translateX(0)
+        transform: translate3d(0, 0, 0)
     10%, 30%, 50%, 70%, 90%
-        transform: translateX(-10px)
+        transform: translate3d(-10px, 0, 0)
     20%, 40%, 60%, 80%
-        transform: translateX(10px)
+        transform: translate3d(10px, 0, 0)
diff --git a/lib/rider/animate/slideInDown.styl b/lib/rider/animate/slideInDown.styl
index 155f058..ba4d24f 100644
--- a/lib/rider/animate/slideInDown.styl
+++ b/lib/rider/animate/slideInDown.styl
@@ -1,6 +1,6 @@
 @keyframes slideInDown
     0%
-        opacity: 0
-        transform: translateY(-2000px)
+        transform: translate3d(0, -100%, 0)
+        visibility: visible
     100%
-        transform: translateY(0)
+        transform: translate3d(0, 0, 0)
diff --git a/lib/rider/animate/slideInLeft.styl b/lib/rider/animate/slideInLeft.styl
index e6032a1..7db494a 100644
--- a/lib/rider/animate/slideInLeft.styl
+++ b/lib/rider/animate/slideInLeft.styl
@@ -1,6 +1,6 @@
 @keyframes slideInLeft
     0%
-        opacity: 0
-        transform: translateX(-2000px)
+        transform: translate3d(-100%, 0, 0)
+        visibility: visible
     100%
-        transform: translateX(0)
+        transform: translate3d(0, 0, 0)
diff --git a/lib/rider/animate/slideInRight.styl b/lib/rider/animate/slideInRight.styl
index 09a0970..1afeb49 100644
--- a/lib/rider/animate/slideInRight.styl
+++ b/lib/rider/animate/slideInRight.styl
@@ -1,6 +1,6 @@
 @keyframes slideInRight
     0%
-        opacity: 0
-        transform: translateX(2000px)
+        transform: translate3d(100%, 0, 0)
+        visibility: visible
     100%
-        transform: translateX(0)
+        transform: translate3d(0, 0, 0)
diff --git a/lib/rider/animate/slideInUp.styl b/lib/rider/animate/slideInUp.styl
index 9cf80f8..688abe7 100644
--- a/lib/rider/animate/slideInUp.styl
+++ b/lib/rider/animate/slideInUp.styl
@@ -1,7 +1,6 @@
 @keyframes slideInUp
     0%
-        opacity: 0
-        transform: translateY(2000px)
+        transform: translate3d(0, 100%, 0)
+        visibility: visible
     100%
-        opacity: 1
-        transform: translateX(0)
+        transform: translate3d(0, 0, 0)
diff --git a/lib/rider/animate/slideOutDown.styl b/lib/rider/animate/slideOutDown.styl
index f2e09eb..527f0d4 100644
--- a/lib/rider/animate/slideOutDown.styl
+++ b/lib/rider/animate/slideOutDown.styl
@@ -1,6 +1,6 @@
 @keyframes slideOutDown
     0%
-        transform: translateX(0)
+        transform: translate3d(0, 0, 0)
     100%
-        opacity: 0
-        transform: translateY(2000px)
+        visibility: hidden
+        transform: translate3d(0, 100%, 0)
diff --git a/lib/rider/animate/slideOutLeft.styl b/lib/rider/animate/slideOutLeft.styl
index d9072dd..aebb13f 100644
--- a/lib/rider/animate/slideOutLeft.styl
+++ b/lib/rider/animate/slideOutLeft.styl
@@ -1,6 +1,6 @@
 @keyframes slideOutLeft
     0%
-        transform: translateX(0)
+        transform: translate3d(0, 0, 0)
     100%
-        opacity: 0
-        transform: translateX(-2000px)
+        visibility: hidden
+        transform: translate3d(-100%, 0, 0)
diff --git a/lib/rider/animate/slideOutRight.styl b/lib/rider/animate/slideOutRight.styl
index 4f7dcfc..263edc4 100644
--- a/lib/rider/animate/slideOutRight.styl
+++ b/lib/rider/animate/slideOutRight.styl
@@ -1,6 +1,6 @@
 @keyframes slideOutRight
     0%
-        transform: translateX(0)
+        transform: translate3d(0, 0, 0)
     100%
-        opacity: 0
-        transform: translateX(2000px)
+        visibility: hidden
+        transform: translate3d(100%, 0, 0)
diff --git a/lib/rider/animate/slideOutUp.styl b/lib/rider/animate/slideOutUp.styl
index f117291..10372ab 100644
--- a/lib/rider/animate/slideOutUp.styl
+++ b/lib/rider/animate/slideOutUp.styl
@@ -1,6 +1,6 @@
 @keyframes slideOutUp
     0%
-        transform: translateY(0)
+        transform: translate3d(0, 0, 0)
     100%
-        opacity: 0
-        transform: translateY(-2000px)
+        visibility: hidden
+        transform: translate3d(0, -100%, 0)
diff --git a/lib/rider/animate/swing.styl b/lib/rider/animate/swing.styl
index 612b96e..d23bea4 100644
--- a/lib/rider/animate/swing.styl
+++ b/lib/rider/animate/swing.styl
@@ -1,11 +1,11 @@
 @keyframes swing
     20%
-        transform: rotate(15deg)
+        transform: rotate3d(0, 0, 1, 15deg)
     40%
-        transform: rotate(-10deg)
+        transform: rotate3d(0, 0, 1, -10deg)
     60%
-        transform: rotate(5deg)
+        transform: rotate3d(0, 0, 1, 5deg)
     80%
-        transform: rotate(-5deg)
+        transform: rotate3d(0, 0, 1, -5deg)
     100%
-        transform: rotate(0deg)
+        transform: rotate3d(0, 0, 1, 0deg)
diff --git a/lib/rider/animate/tada.styl b/lib/rider/animate/tada.styl
index b36b7a2..74e3da1 100644
--- a/lib/rider/animate/tada.styl
+++ b/lib/rider/animate/tada.styl
@@ -1,11 +1,11 @@
 @keyframes tada
     0%
-        transform: scale(1)
+        transform: scale3d(1, 1, 1)
     10%, 20%
-        transform: scale(0.9) rotate(-3deg)
+        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
     30%, 50%, 70%, 90%
-        transform: scale(1.1) rotate(3deg)
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
     40%, 60%, 80%
-        transform: scale(1.1) rotate(-3deg)
+        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
     100%
-        transform: scale(1) rotate(0)
+        transform: scale3d(1, 1, 1)
diff --git a/lib/rider/animate/wobble.styl b/lib/rider/animate/wobble.styl
index 360e30a..aed042d 100644
--- a/lib/rider/animate/wobble.styl
+++ b/lib/rider/animate/wobble.styl
@@ -2,16 +2,16 @@
 
 @keyframes wobble
     0%
-        transform: translateX(0%)
+        transform: none
     15%
-        transform: translateX(-25%) rotate(-5deg)
+        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
     30%
-        transform: translateX(20%) rotate(3deg)
+        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
     45%
-        transform: translateX(-15%) rotate(-3deg)
+        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
     60%
-        transform: translateX(10%) rotate(2deg)
+        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
     75%
-        transform: translateX(-5%) rotate(-1deg)
+        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
     100%
-        transform: translateX(0%)
+        transform: none
diff --git a/lib/rider/animate/zoomIn.styl b/lib/rider/animate/zoomIn.styl
new file mode 100644
index 0000000..baaf051
--- /dev/null
+++ b/lib/rider/animate/zoomIn.styl
@@ -0,0 +1,7 @@
+@keyframes zoomIn
+    0%
+        opacity: 0
+        transform: scale3d(.3, .3, .3)
+
+    50%
+        opacity: 1
diff --git a/lib/rider/animate/zoomInDown.styl b/lib/rider/animate/zoomInDown.styl
new file mode 100644
index 0000000..4f3adc0
--- /dev/null
+++ b/lib/rider/animate/zoomInDown.styl
@@ -0,0 +1,9 @@
+@keyframes zoomInDown
+    0%
+        opacity: 0
+        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    60%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
diff --git a/lib/rider/animate/zoomInLeft.styl b/lib/rider/animate/zoomInLeft.styl
new file mode 100644
index 0000000..69162f8
--- /dev/null
+++ b/lib/rider/animate/zoomInLeft.styl
@@ -0,0 +1,9 @@
+@keyframes zoomInLeft
+    0%
+        opacity: 0
+        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    60%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0)
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
diff --git a/lib/rider/animate/zoomInRight.styl b/lib/rider/animate/zoomInRight.styl
new file mode 100644
index 0000000..20a0c5e
--- /dev/null
+++ b/lib/rider/animate/zoomInRight.styl
@@ -0,0 +1,9 @@
+@keyframes zoomInRight
+    0%
+        opacity: 0
+        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    60%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
diff --git a/lib/rider/animate/zoomInUp.styl b/lib/rider/animate/zoomInUp.styl
new file mode 100644
index 0000000..02092e9
--- /dev/null
+++ b/lib/rider/animate/zoomInUp.styl
@@ -0,0 +1,9 @@
+@keyframes zoomInUp
+    0%
+        opacity: 0
+        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    60%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
diff --git a/lib/rider/animate/zoomOut.styl b/lib/rider/animate/zoomOut.styl
new file mode 100644
index 0000000..8319576
--- /dev/null
+++ b/lib/rider/animate/zoomOut.styl
@@ -0,0 +1,8 @@
+@keyframes zoomOut
+    0%
+        opacity: 1
+    50%
+        opacity: 0
+        transform: scale3d(.3, .3, .3)
+    100%
+        opacity: 0
diff --git a/lib/rider/animate/zoomOutDown.styl b/lib/rider/animate/zoomOutDown.styl
new file mode 100644
index 0000000..110f1aa
--- /dev/null
+++ b/lib/rider/animate/zoomOutDown.styl
@@ -0,0 +1,10 @@
+@keyframes zoomOutDown
+    40%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    100%
+        opacity: 0
+        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0)
+        transform-origin: center bottom
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
diff --git a/lib/rider/animate/zoomOutLeft.styl b/lib/rider/animate/zoomOutLeft.styl
new file mode 100644
index 0000000..0047bf8
--- /dev/null
+++ b/lib/rider/animate/zoomOutLeft.styl
@@ -0,0 +1,8 @@
+@keyframes zoomOutLeft
+    40%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
+    100%
+        opacity: 0
+        transform: scale(.1) translate3d(-2000px, 0, 0)
+        transform-origin: left center
diff --git a/lib/rider/animate/zoomOutRight.styl b/lib/rider/animate/zoomOutRight.styl
new file mode 100644
index 0000000..a11e76e
--- /dev/null
+++ b/lib/rider/animate/zoomOutRight.styl
@@ -0,0 +1,8 @@
+@keyframes zoomOutRight
+    40%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
+    100%
+        opacity: 0
+        transform: scale(.1) translate3d(2000px, 0, 0)
+        transform-origin: right center
diff --git a/lib/rider/animate/zoomOutUp.styl b/lib/rider/animate/zoomOutUp.styl
new file mode 100644
index 0000000..9030bbf
--- /dev/null
+++ b/lib/rider/animate/zoomOutUp.styl
@@ -0,0 +1,10 @@
+@keyframes zoomOutUp
+    40%
+        opacity: 1
+        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
+        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
+    100%
+        opacity: 0
+        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0)
+        transform-origin: center bottom
+        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)

From 184614d5e497187fd6384bc886a6a45b5582e24e Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 11 May 2015 20:25:19 +0800
Subject: [PATCH 14/62] animate: update api.

---
 doc/api.md | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/doc/api.md b/doc/api.md
index 95d0378..6db3271 100644
--- a/doc/api.md
+++ b/doc/api.md
@@ -554,13 +554,16 @@ css:
 
     bounce bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp
     bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
-    fadeIn fadeInDown fadeInLeft fadeInRight fadeInUp fadeOut fadeOutDown
-    fadeOutLeft fadeOutRight fadeOutUp flash flip flipInX flipInY
-    flipOutX flipOutY hinge lightSpeedIn lightSpeedOut pulse rollIn rollOut
-    rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
-    rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft
-    rotateOutUpRight rubberBand shake slideInDown slideInLeft slideInRight
-    slideOutLeft slideOutRight slideOutUp swing tada wobble
+    fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight
+    fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
+    fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig
+    flash flip flipInX flipInY flipOutX flipOutY hinge lightSpeedIn lightSpeedOut
+    pulse rollIn rollOut rotateIn rotateInDownLeft rotateInDownRight
+    rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
+    rotateOutUpLeft rotateOutUpRight rubberBand shake slideInDown slideInLeft
+    slideInRight slideOutLeft slideOutRight slideOutUp swing tada wobble
+    zoomIn zoomInDown zoomInLeft zoomInRight zoomInUp
+    zoomOut zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
 
 动画效果可以参考 [Animate.css](http://daneden.github.io/animate.css/)
 

From 86f85dc8681e1a72048fac31ed25b7387adc1b26 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 11 May 2015 20:37:47 +0800
Subject: [PATCH 15/62] fixed test case (animate).

---
 test/cases/animate.css | 41 +++++++++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/test/cases/animate.css b/test/cases/animate.css
index 19ebb5c..876c61f 100644
--- a/test/cases/animate.css
+++ b/test/cases/animate.css
@@ -10,22 +10,30 @@
   animation-name: bounce;
   animation-duration: 1s;
   animation-fill-mode: both;
+  transform-origin: center bottom;
 }
 @keyframes bounce {
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(0);
+  0%, 20%, 53%, 80%, 100% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
   }
-  40% {
-    transform: translateY(-30px);
+  40%, 43% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -30px, 0);
   }
-  60% {
-    transform: translateY(-15px);
+  70% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0, -4px, 0);
   }
 }
 .test-2 {
   animation-name: bounce;
   animation-duration: 1s;
   animation-fill-mode: both;
+  transform-origin: center bottom;
 }
 .test-3 {
   animation-name: bounceIn;
@@ -33,20 +41,29 @@
   animation-fill-mode: both;
 }
 @keyframes bounceIn {
+  0%, 20%, 40%, 60%, 80%, 100% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
   0% {
     opacity: 0;
-    transform: scale(0.3);
+    transform: scale3d(0.3, 0.3, 0.3);
   }
-  50% {
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+  40% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+  60% {
     opacity: 1;
-    transform: scale(1.05);
+    transform: scale3d(1.03, 1.03, 1.03);
   }
-  70% {
-    transform: scale(0.9);
+  80% {
+    transform: scale3d(0.97, 0.97, 0.97);
   }
   100% {
     opacity: 1;
-    transform: scale(1);
+    transform: scale3d(1, 1, 1);
   }
 }
 .test-4 {

From 0325d724623524f106e05091d30d4c41f8072eef Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 11 May 2015 21:23:36 +0800
Subject: [PATCH 16/62] add `$-unit-decimal-places`, update test case. close #4

---
 doc/api.md             |  1 +
 lib/rider/setting.styl |  3 +++
 lib/rider/unit.styl    | 10 +++++-----
 test/cases/unit.css    |  9 +++++++++
 test/cases/unit.styl   | 15 ++++++++++++++-
 5 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/doc/api.md b/doc/api.md
index 6db3271..019678d 100644
--- a/doc/api.md
+++ b/doc/api.md
@@ -14,6 +14,7 @@ API
 `$-prevent-tap-highlight` | `true` | 屏蔽 `a` 标签的点击高亮效果
 `$-image-dppx` | `2` | 图片每像素的点数，用于支持 retina 设备
 `$-breakpoint-slice` | `0 400px 600px 800px 1050px` | 响应式Web设计屏幕尺寸的划分
+`$-unit-decimal-places` | `3` | 单位转换功能保留的小数位数
 
 
 ## 样式初始化
diff --git a/lib/rider/setting.styl b/lib/rider/setting.styl
index 1b2b1a0..37a8679 100644
--- a/lib/rider/setting.styl
+++ b/lib/rider/setting.styl
@@ -27,3 +27,6 @@ $-image-dppx ?= 2
 // default value: 0 400px 600px 800px 1050px
 // slice number: <- 1 |  2  |  3  |  4  |  5 ->
 $-breakpoint-slice ?= 0 400px 600px 800px 1050px
+
+// unit decimal places
+$-unit-decimal-places ?= 3
diff --git a/lib/rider/unit.styl b/lib/rider/unit.styl
index 3231c12..3f12f16 100644
--- a/lib/rider/unit.styl
+++ b/lib/rider/unit.styl
@@ -1,5 +1,5 @@
 // unit
-// 
+//
 // @author  firede(firede@firede.us)
 // @desc    unit conversion functions
 
@@ -10,7 +10,7 @@
 // default unit is `px`
 rem($value)
     if unit($value) == 'px' || unit($value) == ''
-        $value = round($value / $-base-font-size, 3)
+        $value = round($value / $-base-font-size, $-unit-decimal-places)
 
     unit($value, 'rem')
 
@@ -18,9 +18,9 @@ rem($value)
 // convert to em unit
 em($value, $upper-value = $-base-font-size)
     if unit($value) == 'px' || unit($value) == ''
-        $value = round($value / px($upper-value), 3)
+        $value = round($value / px($upper-value), $-unit-decimal-places)
     else if unit($value) == 'rem'
-        $value = round(px($value) / px($upper-value), 3)
+        $value = round(px($value) / px($upper-value), $-unit-decimal-places)
 
     unit($value, 'em')
 
@@ -28,6 +28,6 @@ em($value, $upper-value = $-base-font-size)
 // convert to px unit
 px($value)
     if unit($value) == 'rem'
-        $value = round($value * $-base-font-size, 3)
+        $value = round($value * $-base-font-size, $-unit-decimal-places)
 
     unit($value, 'px')
diff --git a/test/cases/unit.css b/test/cases/unit.css
index 80bc7ca..a9b6396 100644
--- a/test/cases/unit.css
+++ b/test/cases/unit.css
@@ -29,3 +29,12 @@
   foo: 16px;
   foo: 8px;
 }
+.test-decimal-places-default {
+  foo: 0.344rem;
+}
+.test-decimal-places-custom {
+  foo: 0.34375rem;
+}
+.test-change-font-size {
+  foo: 1.5rem;
+}
diff --git a/test/cases/unit.styl b/test/cases/unit.styl
index c7ba37c..12f8d33 100644
--- a/test/cases/unit.styl
+++ b/test/cases/unit.styl
@@ -34,4 +34,17 @@
     foo: px(1rem)
     foo: px(0.5rem)
 
-// @todo: need test case when default font size is changed.
+.test-decimal-places-default
+    foo: rem(5.5)
+
+// change default decimal places
+$-unit-decimal-places = 5
+
+.test-decimal-places-custom
+    foo: rem(5.5)
+
+// change default font size
+$-base-font-size = 10px
+
+.test-change-font-size
+    foo: rem(15)

From 717b860e37569f5ea7fc38f2772136cc6e1b9d64 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 11 May 2015 21:24:37 +0800
Subject: [PATCH 17/62] travis-ci: add node 0.12

---
 .travis.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.travis.yml b/.travis.yml
index 6e5919d..7ab627a 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,3 +1,4 @@
 language: node_js
 node_js:
   - "0.10"
+  - "0.12"

From 4a56d728e8750a3333659f125ea4051c54347388 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 12 May 2015 15:22:33 +0800
Subject: [PATCH 18/62] rename to `$-unit-precision`.

---
 doc/api.md             | 2 +-
 lib/rider/setting.styl | 4 ++--
 lib/rider/unit.styl    | 8 ++++----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/doc/api.md b/doc/api.md
index 019678d..09880bf 100644
--- a/doc/api.md
+++ b/doc/api.md
@@ -14,7 +14,7 @@ API
 `$-prevent-tap-highlight` | `true` | 屏蔽 `a` 标签的点击高亮效果
 `$-image-dppx` | `2` | 图片每像素的点数，用于支持 retina 设备
 `$-breakpoint-slice` | `0 400px 600px 800px 1050px` | 响应式Web设计屏幕尺寸的划分
-`$-unit-decimal-places` | `3` | 单位转换功能保留的小数位数
+`$-unit-precision` | `5` | 单位精度，转换后保留的小数位数
 
 
 ## 样式初始化
diff --git a/lib/rider/setting.styl b/lib/rider/setting.styl
index 37a8679..7f024b2 100644
--- a/lib/rider/setting.styl
+++ b/lib/rider/setting.styl
@@ -28,5 +28,5 @@ $-image-dppx ?= 2
 // slice number: <- 1 |  2  |  3  |  4  |  5 ->
 $-breakpoint-slice ?= 0 400px 600px 800px 1050px
 
-// unit decimal places
-$-unit-decimal-places ?= 3
+// unit precision
+$-unit-precision ?= 5
diff --git a/lib/rider/unit.styl b/lib/rider/unit.styl
index 3f12f16..1f3f19f 100644
--- a/lib/rider/unit.styl
+++ b/lib/rider/unit.styl
@@ -10,7 +10,7 @@
 // default unit is `px`
 rem($value)
     if unit($value) == 'px' || unit($value) == ''
-        $value = round($value / $-base-font-size, $-unit-decimal-places)
+        $value = round($value / $-base-font-size, $-unit-precision)
 
     unit($value, 'rem')
 
@@ -18,9 +18,9 @@ rem($value)
 // convert to em unit
 em($value, $upper-value = $-base-font-size)
     if unit($value) == 'px' || unit($value) == ''
-        $value = round($value / px($upper-value), $-unit-decimal-places)
+        $value = round($value / px($upper-value), $-unit-precision)
     else if unit($value) == 'rem'
-        $value = round(px($value) / px($upper-value), $-unit-decimal-places)
+        $value = round(px($value) / px($upper-value), $-unit-precision)
 
     unit($value, 'em')
 
@@ -28,6 +28,6 @@ em($value, $upper-value = $-base-font-size)
 // convert to px unit
 px($value)
     if unit($value) == 'rem'
-        $value = round($value * $-base-font-size, $-unit-decimal-places)
+        $value = round($value * $-base-font-size, $-unit-precision)
 
     unit($value, 'px')

From 4f58c5da799511932b42b575ebd6262a038e50ba Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 12 May 2015 15:28:48 +0800
Subject: [PATCH 19/62] update test case.

---
 test/cases/unit.css  | 4 ++--
 test/cases/unit.styl | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/cases/unit.css b/test/cases/unit.css
index a9b6396..14f1ca1 100644
--- a/test/cases/unit.css
+++ b/test/cases/unit.css
@@ -30,10 +30,10 @@
   foo: 8px;
 }
 .test-decimal-places-default {
-  foo: 0.344rem;
+  foo: 0.34375rem;
 }
 .test-decimal-places-custom {
-  foo: 0.34375rem;
+  foo: 0.344rem;
 }
 .test-change-font-size {
   foo: 1.5rem;
diff --git a/test/cases/unit.styl b/test/cases/unit.styl
index 12f8d33..708c308 100644
--- a/test/cases/unit.styl
+++ b/test/cases/unit.styl
@@ -37,8 +37,8 @@
 .test-decimal-places-default
     foo: rem(5.5)
 
-// change default decimal places
-$-unit-decimal-places = 5
+// change default precision
+$-unit-precision = 3
 
 .test-decimal-places-custom
     foo: rem(5.5)

From 6d91935e670813baba7d03a5f59c809025a69715 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 25 May 2015 19:55:37 +0800
Subject: [PATCH 20/62] add helper functions: `is-remote`, `is-found` && add
 dependencies: stylus.

---
 lib/helpers.js       | 32 ++++++++++++++++++++++++++++++++
 lib/rider.js         | 10 +++++++++-
 lib/rider/image.styl |  3 +--
 package.json         |  6 ++++--
 4 files changed, 46 insertions(+), 5 deletions(-)
 create mode 100644 lib/helpers.js

diff --git a/lib/helpers.js b/lib/helpers.js
new file mode 100644
index 0000000..bf7d7ea
--- /dev/null
+++ b/lib/helpers.js
@@ -0,0 +1,32 @@
+/**
+ * @file helper functions
+ * @author firede(firede@firede.us)
+ */
+
+var utils = require('stylus').utils;
+
+/**
+ * 检查文件是否存在
+ *
+ * @param {Object} file 文件路径对象
+ * @return {boolean}
+ */
+exports['is-found'] = function isFound(file) {
+    utils.assertString(file, 'file');
+    return !!utils.lookup(file.val, this.paths);
+};
+
+/**
+ * 检查是否是远程Url
+ * 这里检查的并不严格,主要是为了快速区分path类型
+ *
+ * @param {Object} path Url路径对象
+ * @return {boolean}
+ */
+exports['is-remote'] = function isRemote(path) {
+    utils.assertString(path, 'path');
+
+    var obj = path.val.match(/^(https?:)?\/\//i);
+
+    return !!obj;
+};
diff --git a/lib/rider.js b/lib/rider.js
index 0e83415..2253d8f 100644
--- a/lib/rider.js
+++ b/lib/rider.js
@@ -3,6 +3,7 @@
  * @author firede(firede@firede.us)
  */
 
+var helpers = require('./helpers');
 
 /**
  * stylus plugin
@@ -23,9 +24,16 @@ function plugin(options) {
         // include rider
         style.include(__dirname);
 
+        // define helper
+        for (var key in helpers) {
+            if (helpers.hasOwnProperty(key)) {
+                style.define(key, helpers[key]);
+            }
+        }
+
         // implicit import handling
         if (implicit) {
-            style.import('rider'); // jshint ignore: line
+            style.import('rider');
         }
     };
 }
diff --git a/lib/rider/image.styl b/lib/rider/image.styl
index 140a77f..537d9a1 100644
--- a/lib/rider/image.styl
+++ b/lib/rider/image.styl
@@ -1,5 +1,5 @@
 // image
-// 
+//
 // @author  firede(firede@firede.us)
 // @desc    image helpers
 
@@ -28,7 +28,6 @@ bg($path, $width = auto, $height = auto, $dppx = $-image-dppx)
     if $width != null || $height != null
         background-size: $width $height
 
-
 // image replace
 // hide text and set background image
 ir($path, $x = 0, $y = 0, $width = auto, $height = auto, $dppx = $-image-dppx)
diff --git a/package.json b/package.json
index f5cba3f..3ae1854 100644
--- a/package.json
+++ b/package.json
@@ -8,12 +8,14 @@
             "email": "firede@firede.us"
         }
     ],
+    "dependencies": {
+        "stylus": "*"
+    },
     "devDependencies": {
         "autoprefixer-core": "~5.1.11",
         "connect": "~3.3.5",
         "mocha": "~2.2.4",
-        "serve-static": "^1.9.2",
-        "stylus": "~0.51.1"
+        "serve-static": "^1.9.2"
     },
     "scripts": {
         "test": "mocha",

From 840de7769066fa4d9670bec62238c0451fdd413b Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 25 May 2015 20:18:15 +0800
Subject: [PATCH 21/62] update font-face: remove `version-suffix`, auto detect
 fonts.

---
 doc/api.md                 |  7 +++---
 lib/rider/typography.styl  | 47 +++++++++++++++++++++++++++++++++-----
 test/cases/typography.css  |  8 +------
 test/cases/typography.styl |  9 ++------
 4 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/doc/api.md b/doc/api.md
index 09880bf..1630f15 100644
--- a/doc/api.md
+++ b/doc/api.md
@@ -410,7 +410,7 @@ css:
 }
 ```
 
-### font-face: font-family, font-path, version-suffix
+### font-face: font-family, font-path
 
 快速引入字体。
 
@@ -418,20 +418,19 @@ css:
 
 + `font-family` 字体名
 + `font-path` 字体路径，是字体去掉后缀名之后的部分
-+ `version-suffix` `(可选)` 版本后缀，用来更新字体版本
 
 **使用方法**
 
 stylus:
 
 ```haml
-font-face('rider-icon', 'font/rider-icon', '88')
+font-face('rider-icon', 'font/rider-icon')
 ```
 
 ```css
 @font-face {
     font-family: 'rider-icon';
-    src: url("font/rider-icon.woff?88") format('woff'), url("font/rider-icon.ttf?88") format('truetype');
+    src: url("font/rider-icon.woff") format('woff'), url("font/rider-icon.ttf?88") format('truetype');
     font-weight: normal;
     font-style: normal;
 }
diff --git a/lib/rider/typography.styl b/lib/rider/typography.styl
index 6725934..17d4cba 100644
--- a/lib/rider/typography.styl
+++ b/lib/rider/typography.styl
@@ -38,14 +38,49 @@ clearfix()
 
 // font face
 // iOS/Android used ttf, Mobile IE 10 used woff.
-font-face($font-family, $font-path, $version-suffix = '')
-    $version-suffix = '?' + $version-suffix if $version-suffix != ''
-    $ttf-path = $font-path + '.ttf' + $version-suffix
-    $woff-path = $font-path + '.woff' + $version-suffix
+font-face($font-family, $font-path)
+
+    // 字体类型与对应的format,顺序排列
+    $font-formats = {
+        'eot': 'embedded-opentype',
+        'woff': 'woff',
+        'woff2': 'woff2',
+        'ttf': 'truetype',
+        'svg': 'svg'
+    }
+
+    $usable-types = ()
+    $src-array = ()
+    $font-files = {}
+
+    // 取出本地可用的字体
+    for $type in keys($font-formats)
+        $font-files[$type] = $font-path + '.' + $type
+
+        if is-found($font-files[$type])
+            push($usable-types, $type)
+
+    // 无任何可用字体则报错
+    if length($usable-types) == 0
+        error('Web fonts `' + $font-family + '` not exists!');
+
+    // 合并字体src
+    for $type in $usable-types
+        if $type == 'eot'
+            $src-url = $font-files[$type] + '?#iefix'
+        else if $type == 'svg'
+            $src-url = $font-files[$type] + '#' + $font-family
+        else
+            $src-url = $font-files[$type]
+        $src-str = s('%s format(%s)', url($src-url), $font-formats[$type])
+        push($src-array, $src-str)
+
+    $str = join(', ', $src-array)
 
     @font-face
         font-family: $font-family
-        src: url($woff-path) format('woff'), url($ttf-path) format('truetype')
+        if 'eot' in $usable-types
+            src: url($font-files['eot'])
+        src: unquote($str)
         font-weight: normal
         font-style: normal
-
diff --git a/test/cases/typography.css b/test/cases/typography.css
index 1d40964..f7f6ca0 100644
--- a/test/cases/typography.css
+++ b/test/cases/typography.css
@@ -30,13 +30,7 @@
 }
 @font-face {
   font-family: 'rider-icon';
-  src: url("font/rider-icon.woff") format('woff'), url("font/rider-icon.ttf") format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: 'rider-icon';
-  src: url("font/rider-icon.woff?88") format('woff'), url("font/rider-icon.ttf?88") format('truetype');
+  src: url("../../demo/font/rider-icon.woff") format('woff'), url("../../demo/font/rider-icon.ttf") format('truetype');
   font-weight: normal;
   font-style: normal;
 }
diff --git a/test/cases/typography.styl b/test/cases/typography.styl
index a8bb216..d9cf594 100644
--- a/test/cases/typography.styl
+++ b/test/cases/typography.styl
@@ -14,10 +14,5 @@
 .test-clearfix
     clearfix()
 
-// font-face($font-family, $font-path, $version-suffix = '')
-
-// no suffix
-font-face('rider-icon', 'font/rider-icon')
-
-// with suffix
-font-face('rider-icon', 'font/rider-icon', '88')
\ No newline at end of file
+// font-face: found
+font-face('rider-icon', '../../demo/font/rider-icon')

From f666fc925df40debdfdc1776b0f70537012e9693 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 25 May 2015 20:31:03 +0800
Subject: [PATCH 22/62] update api.

---
 lib/helpers.js            | 6 +++---
 lib/rider/typography.styl | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/helpers.js b/lib/helpers.js
index bf7d7ea..d9f7b2f 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -11,19 +11,19 @@ var utils = require('stylus').utils;
  * @param {Object} file 文件路径对象
  * @return {boolean}
  */
-exports['is-found'] = function isFound(file) {
+exports['file-exists'] = function fileExists(file) {
     utils.assertString(file, 'file');
     return !!utils.lookup(file.val, this.paths);
 };
 
 /**
- * 检查是否是远程Url
+ * 检查是否是Url
  * 这里检查的并不严格,主要是为了快速区分path类型
  *
  * @param {Object} path Url路径对象
  * @return {boolean}
  */
-exports['is-remote'] = function isRemote(path) {
+exports['is-url'] = function isUrl(path) {
     utils.assertString(path, 'path');
 
     var obj = path.val.match(/^(https?:)?\/\//i);
diff --git a/lib/rider/typography.styl b/lib/rider/typography.styl
index 17d4cba..d244164 100644
--- a/lib/rider/typography.styl
+++ b/lib/rider/typography.styl
@@ -57,7 +57,7 @@ font-face($font-family, $font-path)
     for $type in keys($font-formats)
         $font-files[$type] = $font-path + '.' + $type
 
-        if is-found($font-files[$type])
+        if file-exists($font-files[$type])
             push($usable-types, $type)
 
     // 无任何可用字体则报错

From d0dc6a7ac093bb9fddd9dbdc63ca4453d716bcac Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 25 May 2015 20:47:18 +0800
Subject: [PATCH 23/62] font-face: only support local path.

---
 lib/rider/typography.styl | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/rider/typography.styl b/lib/rider/typography.styl
index d244164..8569624 100644
--- a/lib/rider/typography.styl
+++ b/lib/rider/typography.styl
@@ -40,6 +40,9 @@ clearfix()
 // iOS/Android used ttf, Mobile IE 10 used woff.
 font-face($font-family, $font-path)
 
+    if is-url($font-path)
+        error('Only support local $font-path, please using `@font-face` instead.')
+
     // 字体类型与对应的format,顺序排列
     $font-formats = {
         'eot': 'embedded-opentype',

From 90e4561c84dc3060730214ac81e62f97ab0385a7 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 25 May 2015 20:49:42 +0800
Subject: [PATCH 24/62] update demo.

---
 demo/css/layout.styl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/demo/css/layout.styl b/demo/css/layout.styl
index aa9dd70..36dc202 100644
--- a/demo/css/layout.styl
+++ b/demo/css/layout.styl
@@ -2,7 +2,7 @@ initialize()
 
 // Fonts
 
-font-face('rider-icon', '../font/rider-icon', '1')
+font-face('rider-icon', '../font/rider-icon')
 
 [class^="icon-"], [class*=" icon-"]
     font-family: 'rider-icon'

From e76004222a93e26c5ef25544e81f64c831bfa478 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 25 May 2015 20:56:28 +0800
Subject: [PATCH 25/62] update readme.

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index b0e920d..2c261a4 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
 rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) [![License](https://img.shields.io/npm/l/rider.svg?style=flat-square)](./LICENSE) [![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)](http://efe.baidu.com)
 ===
 
+(2.0.0 系列仍在 alpha 阶段，请不要在 **生产环境** 使用)
+
 `rider` 是一个基于 [`stylus`](https://github.com/LearnBoost/stylus)、专注于 **移动 Web** 的 CSS 样式库。
 
 它提供了样式初始化、顺时针简写、缓动函数、图片、排版、单位转换、形状、动画、响应式工具等功能，可以让你的前端样式开发更轻松、更省心。

From 1d7fb69d8ca43350cb8f64219db6a71559892ac6 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Fri, 29 May 2015 17:38:13 +0800
Subject: [PATCH 26/62] add physical-border-width (support hairline border),
 close #13

---
 lib/rider/typography.styl  | 14 ++++++++++++++
 test/cases/typography.css  | 16 ++++++++++++++++
 test/cases/typography.styl |  6 ++++++
 3 files changed, 36 insertions(+)

diff --git a/lib/rider/typography.styl b/lib/rider/typography.styl
index 8569624..9e8e45f 100644
--- a/lib/rider/typography.styl
+++ b/lib/rider/typography.styl
@@ -87,3 +87,17 @@ font-face($font-family, $font-path)
         src: unquote($str)
         font-weight: normal
         font-style: normal
+
+
+// hairline border support
+physical-border-width($args...)
+    $half-args = ()
+    for $arg in $args
+        if $arg == '_'
+            push($half-args, $arg)
+        else
+            push($half-args, ($arg / 2))
+
+    border-width: $args
+    +retina()
+        border-width: $half-args
diff --git a/test/cases/typography.css b/test/cases/typography.css
index f7f6ca0..7e6cd5c 100644
--- a/test/cases/typography.css
+++ b/test/cases/typography.css
@@ -34,3 +34,19 @@
   font-weight: normal;
   font-style: normal;
 }
+.physical-border-1 {
+  border-width: 1px;
+}
+@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi) {
+  .physical-border-1 {
+    border-width: 0.5px;
+  }
+}
+.physical-border-2 {
+  border-bottom-width: 1px;
+}
+@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi) {
+  .physical-border-2 {
+    border-bottom-width: 0.5px;
+  }
+}
diff --git a/test/cases/typography.styl b/test/cases/typography.styl
index d9cf594..3b72fa7 100644
--- a/test/cases/typography.styl
+++ b/test/cases/typography.styl
@@ -16,3 +16,9 @@
 
 // font-face: found
 font-face('rider-icon', '../../demo/font/rider-icon')
+
+.physical-border-1
+    physical-border-width: 1px
+
+.physical-border-2
+    physical-border-width: _ _ 1px

From 75aea09dc51414fb6f86c3410cb08388a00dbef9 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 30 May 2015 16:31:19 +0800
Subject: [PATCH 27/62] add helper: get-path-with-dppx

---
 lib/helpers.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/lib/helpers.js b/lib/helpers.js
index d9f7b2f..a6a89b7 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -1,5 +1,5 @@
 /**
- * @file helper functions
+ * @file 帮助函数
  * @author firede(firede@firede.us)
  */
 
@@ -30,3 +30,25 @@ exports['is-url'] = function isUrl(path) {
 
     return !!obj;
 };
+
+/**
+ * 获取添加dppx后缀的图片地址
+ *
+ * @param {Object} path 图片路径对象
+ * @param {Object} dppx dppx对象
+ * @return {string}
+ */
+exports['get-path-with-dppx'] = function getPathWithDppx(path, dppx) {
+    utils.assertString(path, 'path');
+    utils.assertPresent(dppx, 'dppx');
+
+    // 校验 dppx 的类型
+    if (typeof dppx.val !== 'number') {
+        throw new Error('TypeError: expected number, but got: ' + dppx);
+    }
+
+    var originName = path.val;
+    var extName = require('path').extname(originName);
+
+    return originName.slice(0, -extName.length) + '@' + dppx.val + 'x' + extName;
+};

From f9d5364ed96082b8785db76b730a69c1a0f8b261 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sun, 31 May 2015 00:14:03 +0800
Subject: [PATCH 28/62] =?UTF-8?q?=E5=B0=86=20`physical-border-width`=20?=
 =?UTF-8?q?=E7=A7=BB=E5=85=A5=20retina.styl?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider.js              |  6 +++---
 lib/rider/index.styl      |  1 +
 lib/rider/retina.styl     | 16 ++++++++++++++++
 lib/rider/typography.styl | 14 --------------
 4 files changed, 20 insertions(+), 17 deletions(-)
 create mode 100644 lib/rider/retina.styl

diff --git a/lib/rider.js b/lib/rider.js
index 2253d8f..bdfecf4 100644
--- a/lib/rider.js
+++ b/lib/rider.js
@@ -21,17 +21,17 @@ function plugin(options) {
     }
 
     return function (style) {
-        // include rider
+        // 包含 rider 的目录
         style.include(__dirname);
 
-        // define helper
+        // 定义通过 JavaScript 扩展的函数
         for (var key in helpers) {
             if (helpers.hasOwnProperty(key)) {
                 style.define(key, helpers[key]);
             }
         }
 
-        // implicit import handling
+        // 隐式导入 rider
         if (implicit) {
             style.import('rider');
         }
diff --git a/lib/rider/index.styl b/lib/rider/index.styl
index 5b2b690..b1de183 100644
--- a/lib/rider/index.styl
+++ b/lib/rider/index.styl
@@ -13,3 +13,4 @@
 @require 'animate'
 @require 'initialize'
 @require 'normalize'
+@require 'retina'
diff --git a/lib/rider/retina.styl b/lib/rider/retina.styl
new file mode 100644
index 0000000..af810cc
--- /dev/null
+++ b/lib/rider/retina.styl
@@ -0,0 +1,16 @@
+// retina
+//
+// @author  firede(firede@firede.us)
+// @desc    retina helpers
+
+physical-border-width($args...)
+    $half-args = ()
+    for $arg in $args
+        if $arg == '_'
+            push($half-args, $arg)
+        else
+            push($half-args, ($arg / 2))
+
+    border-width: $args
+    +retina()
+        border-width: $half-args
diff --git a/lib/rider/typography.styl b/lib/rider/typography.styl
index 9e8e45f..8569624 100644
--- a/lib/rider/typography.styl
+++ b/lib/rider/typography.styl
@@ -87,17 +87,3 @@ font-face($font-family, $font-path)
         src: unquote($str)
         font-weight: normal
         font-style: normal
-
-
-// hairline border support
-physical-border-width($args...)
-    $half-args = ()
-    for $arg in $args
-        if $arg == '_'
-            push($half-args, $arg)
-        else
-            push($half-args, ($arg / 2))
-
-    border-width: $args
-    +retina()
-        border-width: $half-args

From 42194edd3f137ba7396bd22874c6c9799bc5bf31 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Fri, 12 Jun 2015 20:50:03 +0800
Subject: [PATCH 29/62] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 增加 `$-image-dppx-range`
* 增加 `$-image-dppx-separator`
* 移除 `$-image-dppx`
* 改用中文注释，让同胞看着更省心 :heart:
---
 lib/rider/setting.styl | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/lib/rider/setting.styl b/lib/rider/setting.styl
index 7f024b2..28f99ad 100644
--- a/lib/rider/setting.styl
+++ b/lib/rider/setting.styl
@@ -1,32 +1,38 @@
-// setting
+// 配置
 //
 // @author  firede(firede@firede.us)
-// @desc    default settings, you can overriding it by yourself.
+// @desc    默认配置，如需修改，建议在调用之前覆盖
+//          如修改默认字号，可设置：$-base-font-size = 14px
 
 
-// off stylus compatibility settings (ex: keyframes), autoprefixer do it.
+// 关闭 Stylus 修复前缀的兼容性功能，此任务交给 Autoprefixer
 vendors = official
 
-// the unit using `px` value(100% == 16px)
+// 基础字体大小
+// 默认单位为 px，默认值 16px 即为 100%
 $-base-font-size ?= 16px
 
+// 基础字体族群
 // @see http://iosfonts.com
 $-base-font-family ?= 'Helvetica Neue', Arial, sans-serif
 $-code-font-family ?= Menlo, Consolas, monospace
 
-// prevent iOS text size adjust after orientation change
+// 阻止 iOS 在翻转屏幕后调整字体大小
 $-prevent-text-size-adjust ?= true
 
-// prevent tap highlight color
+// 消除 tap highlight 颜色
 $-prevent-tap-highlight ?= true
 
-// default image dppx (dots per px unit)
-$-image-dppx ?= 2
+// 图片dppx范围
+$-image-dppx-range ?= 1..3
 
-// breakpoint slice
-// default value: 0 400px 600px 800px 1050px
-// slice number: <- 1 |  2  |  3  |  4  |  5 ->
+// 图片dppx分隔符
+$-image-dppx-separator = '@'
+
+// breakpoint 的切片分段
+// 默认值: 0 400px 600px 800px 1050px
+// 片段: <- 1 |  2  |  3  |  4  |  5 ->
 $-breakpoint-slice ?= 0 400px 600px 800px 1050px
 
-// unit precision
+// 单位转换精度，小数点后保留的位数
 $-unit-precision ?= 5

From d4d63959641cae9f2b8cc42addcfa330afeed939 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Fri, 12 Jun 2015 20:51:50 +0800
Subject: [PATCH 30/62] =?UTF-8?q?=E6=95=B4=E7=90=86helpers=E7=9A=84?=
 =?UTF-8?q?=E5=87=BD=E6=95=B0=E5=90=8D=E4=B8=8E=E5=8F=98=E9=87=8F=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/helpers.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/lib/helpers.js b/lib/helpers.js
index a6a89b7..95df7fd 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -3,6 +3,7 @@
  * @author firede(firede@firede.us)
  */
 
+var path = require('path');
 var utils = require('stylus').utils;
 
 /**
@@ -20,13 +21,13 @@ exports['file-exists'] = function fileExists(file) {
  * 检查是否是Url
  * 这里检查的并不严格,主要是为了快速区分path类型
  *
- * @param {Object} path Url路径对象
+ * @param {Object} url Url路径对象
  * @return {boolean}
  */
-exports['is-url'] = function isUrl(path) {
-    utils.assertString(path, 'path');
+exports['is-url'] = function isUrl(url) {
+    utils.assertString(url, 'url');
 
-    var obj = path.val.match(/^(https?:)?\/\//i);
+    var obj = url.val.match(/^(https?:)?\/\//i);
 
     return !!obj;
 };
@@ -34,12 +35,12 @@ exports['is-url'] = function isUrl(path) {
 /**
  * 获取添加dppx后缀的图片地址
  *
- * @param {Object} path 图片路径对象
+ * @param {Object} src 图片路径对象
  * @param {Object} dppx dppx对象
  * @return {string}
  */
-exports['get-path-with-dppx'] = function getPathWithDppx(path, dppx) {
-    utils.assertString(path, 'path');
+exports['get-retina-src'] = function getRetinaSrc(src, dppx) {
+    utils.assertString(src, 'src');
     utils.assertPresent(dppx, 'dppx');
 
     // 校验 dppx 的类型
@@ -47,8 +48,8 @@ exports['get-path-with-dppx'] = function getPathWithDppx(path, dppx) {
         throw new Error('TypeError: expected number, but got: ' + dppx);
     }
 
-    var originName = path.val;
-    var extName = require('path').extname(originName);
+    var originName = src.val;
+    var extName = path.extname(originName);
 
     return originName.slice(0, -extName.length) + '@' + dppx.val + 'x' + extName;
 };

From d8cb4cc908b2ca9cd519802229455724788919a5 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 13 Jun 2015 01:11:47 +0800
Subject: [PATCH 31/62] =?UTF-8?q?breakpoint=20=E7=AE=80=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

从 breakpoint 中去除 retina, screen, portrait 等支持，并更新相关测试用例
Issue: #19
---
 lib/rider/breakpoint.styl  | 119 ++++++++-----------------------------
 lib/rider/retina.styl      |   4 +-
 test/cases/breakpoint.css  |  60 -------------------
 test/cases/breakpoint.styl |  62 ++-----------------
 test/cases/typography.css  |   4 +-
 5 files changed, 35 insertions(+), 214 deletions(-)

diff --git a/lib/rider/breakpoint.styl b/lib/rider/breakpoint.styl
index d9b8427..d8dbd82 100644
--- a/lib/rider/breakpoint.styl
+++ b/lib/rider/breakpoint.styl
@@ -5,125 +5,58 @@
 
 @require 'setting'
 
-breakpoint()
-    // exception handling
-    if length(arguments) < 1
-        error('breakpoint requires arguments.')
-        return
+breakpoint($min-value, $max-value)
+    // 异常处理
     unless mixin in ('block' 'root')
-        error('breakpoint must be the block/root when you use it.')
+        error('+breakpoint() 需要以 block mixin 的方式使用')
 
+    // media query 数组
     $mq-array = ()
-    $retina-required = false
 
-    // dirty patch
-    if length(arguments) == 2 && typeof(arguments[0]) == 'unit' && typeof(arguments[1]) == 'unit'
-        $args = (null arguments)
-    else
-        $args = arguments
+    if unit($min-value) == ''
+        $min-value = ($-breakpoint-slice[$min-value - 1] + 1 || 0) unless $min-value == 0
 
-    // loops
-    for $arg in $args
-        $arg-type = typeof($arg)
-
-        if $arg-type == 'unit' && length($arg) == 2
-
-            $min-value = $arg[0]
-            $max-value = $arg[1]
-
-            if unit($min-value) == ''
-                $min-value = ($-breakpoint-slice[$min-value - 1] + 1 || 0) unless $min-value == 0
-
-            if unit($max-value) == ''
-                if $max-value < length($-breakpoint-slice)
-                    $max-value = $-breakpoint-slice[$max-value]
-                else
-                    // 0 means larger than largest slice
-                    $max-value = 0
-
-            if $min-value > 1
-                push($mq-array, '(min-width: %s)' % $min-value)
-
-            if $max-value > 1
-                push($mq-array, '(max-width: %s)' % $max-value)
-
-        else if $arg-type == 'string' && $arg in ('portrait' 'landscape')
-            // orientation
-            push($mq-array, '(orientation: %s)' % unquote($arg))
+    if unit($max-value) == ''
+        if $max-value < length($-breakpoint-slice)
+            $max-value = $-breakpoint-slice[$max-value]
+        else
+            // 最大值为 0 时，代表大于最大的切片的值
+            $max-value = 0
 
-        else if $arg-type == 'string' && $arg in ('all' 'screen' 'print' 'tv' 'braille' 'embossed' 'handheld' 'projection' 'speech' 'tty')
-            // @see http://goo.gl/a3twta
-            unshift($mq-array, $arg)
+    if $min-value > 1
+        push($mq-array, '(min-width: %s)' % $min-value)
 
-        else if $arg == 'retina'
-            // retina
-            $retina-required = true
-
-        else
-            warn('the argument "' + $arg + '" is unknown, please remove it.') unless $arg == null
+    if $max-value > 1
+        push($mq-array, '(max-width: %s)' % $max-value)
 
     // join queries
     $mq-string = join(' and ', $mq-array)
 
-    // hack it until autoprefixer supported
-    // "," higher priority than "and"
-    if $retina-required == true
-        // @see http://goo.gl/eHTUo6
-        // @see http://bjango.com/articles/min-device-pixel-ratio/
-        $mq-retina-array = ('(-webkit-min-device-pixel-ratio: 1.3)' '(min-resolution: 125dpi)')
-
-        if $mq-string
-            $mq-string = '%s and %s, %s and %s' % (unquote($mq-string) unquote($mq-retina-array[0]) unquote($mq-string) unquote($mq-retina-array[1]))
-        else
-            $mq-string = join(', ', $mq-retina-array)
-
     unless $mq-string
-        error('breakpoint is invalid, please check the arguments.')
+        error('breakpoint() 无法生成出合法的 media query，请检查参数是否正确')
 
     @media $mq-string
         {block}
 
 
 below($value)
-    $values = (0 $value)
-    if mixin in ('block' 'root')
-        +breakpoint($values)
-            {block}
-    else
-        return $values
+    +breakpoint(0, $value)
+        {block}
 
 
 above($value)
-    $values = $value, length($-breakpoint-slice)
-    if mixin in ('block' 'root')
-        +breakpoint($values)
-            {block}
-    else
-        return $values
+    +breakpoint($value, length($-breakpoint-slice))
+        {block}
 
 
 at($value)
     if unit($value) != ''
-        error('$value must be a breakpoint slice.')
-    $values = ($value $value)
-    if mixin in ('block' 'root')
-        +breakpoint($values)
-            {block}
-    else
-        return $values
+        error('$value 必须为 breakpoint 的切片')
+    +breakpoint($value, $value)
+        {block}
 
 
 between($from-value, $to-value)
-    $values = ($from-value $to-value)
-    if mixin in ('block' 'root')
-        +breakpoint($values)
-            {block}
-    else
-        return $values
-
-
-retina()
-    if mixin in ('block' 'root')
-        +breakpoint('retina')
-            {block}
+    +breakpoint($from-value, $to-value)
+        {block}
 
diff --git a/lib/rider/retina.styl b/lib/rider/retina.styl
index af810cc..251fac3 100644
--- a/lib/rider/retina.styl
+++ b/lib/rider/retina.styl
@@ -12,5 +12,7 @@ physical-border-width($args...)
             push($half-args, ($arg / 2))
 
     border-width: $args
-    +retina()
+
+    // 只有 iOS 8+ 支持 0.5px 边框，不需要做 dpi 兼容
+    @media (min-resolution: 2dppx)
         border-width: $half-args
diff --git a/test/cases/breakpoint.css b/test/cases/breakpoint.css
index 7ea9ecf..b0b6134 100644
--- a/test/cases/breakpoint.css
+++ b/test/cases/breakpoint.css
@@ -1,38 +1,3 @@
-@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi) {
-  .test-1 {
-    foo: bar;
-  }
-}
-@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi) {
-  .test-2 {
-    foo: bar;
-  }
-}
-@media screen {
-  .test-3 {
-    foo: bar;
-  }
-}
-@media screen and (orientation: portrait) {
-  .test-4 {
-    foo: bar;
-  }
-}
-@media screen and (orientation: portrait) {
-  .test-5 {
-    foo: bar;
-  }
-}
-@media screen and (orientation: portrait) and (min-width: 401px) and (max-width: 800px) {
-  .test-6 {
-    foo: bar;
-  }
-}
-@media (orientation: portrait) {
-  .test-7 {
-    foo: bar;
-  }
-}
 @media (min-width: 401px) and (max-width: 800px) {
   .test-8 {
     foo: bar;
@@ -58,26 +23,6 @@
     foo: bar;
   }
 }
-@media all and (min-width: 601px) and (max-width: 800px) {
-  .test-13 {
-    foo: bar;
-  }
-}
-@media print and (max-width: 800px) {
-  .test-14 {
-    foo: bar;
-  }
-}
-@media screen and (min-width: 601px) {
-  .test-15 {
-    foo: bar;
-  }
-}
-@media screen and (min-width: 601px) and (max-width: 1050px) {
-  .test-16 {
-    foo: bar;
-  }
-}
 @media (min-width: 601px) and (max-width: 900px) {
   .test-17 {
     foo: bar;
@@ -93,11 +38,6 @@
     foo: bar;
   }
 }
-@media (min-width: 601px) and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1.3), (min-width: 601px) and (max-width: 800px) and (min-resolution: 125dpi) {
-  .test-20 {
-    foo: bar;
-  }
-}
 @media (max-width: 400px) {
   .test-21 {
     display: block;
diff --git a/test/cases/breakpoint.styl b/test/cases/breakpoint.styl
index 32f8eb6..3ea9a59 100644
--- a/test/cases/breakpoint.styl
+++ b/test/cases/breakpoint.styl
@@ -1,44 +1,11 @@
-// retina mixin
-.test-1
-    +retina()
-        foo: bar
-
-// retina root
-+retina()
-    .test-2
-        foo: bar
-
-// 1 argument
-+breakpoint('screen')
-    .test-3
-        foo: bar
-
-// 2 arguments without comma
-+breakpoint('screen' 'portrait')
-    .test-4
-        foo: bar
-
-// 2 arguments with comma
-+breakpoint('screen', 'portrait')
-    .test-5
-        foo: bar
-
-// 3 arguments with min-width/max-width
-+breakpoint('screen', 'portrait', (2 3))
-    .test-6
-        foo: bar
-
-// with unknown argument should be ignored
-+breakpoint('abc', 'portrait')
-    .test-7
-        foo: bar
-
+// between mixin
 +between(2, 3)
     .test-8
         foo: bar
 
-+between(0, 4)
-    .test-9
+// between root
+.test-9
+    +between(0, 4)
         foo: bar
 
 +at(4)
@@ -53,23 +20,6 @@
     .test-12
         foo: bar
 
-// combination
-+breakpoint('all' at(3))
-    .test-13
-        foo: bar
-
-+breakpoint('print', below(3))
-    .test-14
-        foo: bar
-
-+breakpoint('screen', above(3))
-    .test-15
-        foo: bar
-
-+breakpoint('screen', between(3, 4))
-    .test-16
-        foo: bar
-
 // breakpoint with px/em/rem unit
 +breakpoint(3, 900px)
     .test-17
@@ -83,10 +33,6 @@
     .test-19
         foo: bar
 
-+breakpoint('retina', at(3))
-    .test-20
-        foo: bar
-
 +at(1)
     .test-21
         display: block
diff --git a/test/cases/typography.css b/test/cases/typography.css
index 7e6cd5c..7bcf81a 100644
--- a/test/cases/typography.css
+++ b/test/cases/typography.css
@@ -37,7 +37,7 @@
 .physical-border-1 {
   border-width: 1px;
 }
-@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi) {
+@media (min-resolution: 2dppx) {
   .physical-border-1 {
     border-width: 0.5px;
   }
@@ -45,7 +45,7 @@
 .physical-border-2 {
   border-bottom-width: 1px;
 }
-@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 125dpi) {
+@media (min-resolution: 2dppx) {
   .physical-border-2 {
     border-bottom-width: 0.5px;
   }

From 4d1d7380d53c70a55ce7f1cfeafb0e5ed9abdef1 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 13 Jun 2015 01:45:47 +0800
Subject: [PATCH 32/62] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20+retina()=20block=20?=
 =?UTF-8?q?mixin=20#20?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider/retina.styl      |  9 +++++++++
 test/cases/retina.css      | 31 +++++++++++++++++++++++++++++++
 test/cases/retina.styl     | 18 ++++++++++++++++++
 test/cases/typography.css  | 16 ----------------
 test/cases/typography.styl |  6 ------
 5 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 test/cases/retina.css
 create mode 100644 test/cases/retina.styl

diff --git a/lib/rider/retina.styl b/lib/rider/retina.styl
index 251fac3..46200f5 100644
--- a/lib/rider/retina.styl
+++ b/lib/rider/retina.styl
@@ -3,6 +3,7 @@
 // @author  firede(firede@firede.us)
 // @desc    retina helpers
 
+// 物理边框尺寸
 physical-border-width($args...)
     $half-args = ()
     for $arg in $args
@@ -16,3 +17,11 @@ physical-border-width($args...)
     // 只有 iOS 8+ 支持 0.5px 边框，不需要做 dpi 兼容
     @media (min-resolution: 2dppx)
         border-width: $half-args
+
+
+// 限定 retina 模式的 block mixin
+// 不区分 dppx 具体倍数时，取 1.5dppx 作为一般意义上的 retina 设备
+retina($dppx = 1.5)
+    $mq-string = '(min-resolution: %sdppx), (min-resolution: %sdpi)' % ($dppx ($dppx * 96))
+    @media $mq-string
+        {block}
diff --git a/test/cases/retina.css b/test/cases/retina.css
new file mode 100644
index 0000000..c70e8af
--- /dev/null
+++ b/test/cases/retina.css
@@ -0,0 +1,31 @@
+.physical-border-1 {
+  border-width: 1px;
+}
+@media (min-resolution: 2dppx) {
+  .physical-border-1 {
+    border-width: 0.5px;
+  }
+}
+.physical-border-2 {
+  border-bottom-width: 1px;
+}
+@media (min-resolution: 2dppx) {
+  .physical-border-2 {
+    border-bottom-width: 0.5px;
+  }
+}
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .retina-1 {
+    foo: bar;
+  }
+}
+@media (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+  .retina-2 {
+    foo: baz;
+  }
+}
+@media (min-resolution: 1.5dppx) and (min-width: 601px) and (max-width: 800px), (min-resolution: 144dpi) and (min-width: 601px) and (max-width: 800px) {
+  .retina-with-breakpoint {
+    foo: bar;
+  }
+}
diff --git a/test/cases/retina.styl b/test/cases/retina.styl
new file mode 100644
index 0000000..c963abc
--- /dev/null
+++ b/test/cases/retina.styl
@@ -0,0 +1,18 @@
+.physical-border-1
+    physical-border-width: 1px
+
+.physical-border-2
+    physical-border-width: _ _ 1px
+
++retina(2)
+    .retina-1
+        foo: bar
+
+.retina-2
+    +retina()
+        foo: baz
+
++retina()
+    +at(3)
+        .retina-with-breakpoint
+            foo: bar
diff --git a/test/cases/typography.css b/test/cases/typography.css
index 7bcf81a..f7f6ca0 100644
--- a/test/cases/typography.css
+++ b/test/cases/typography.css
@@ -34,19 +34,3 @@
   font-weight: normal;
   font-style: normal;
 }
-.physical-border-1 {
-  border-width: 1px;
-}
-@media (min-resolution: 2dppx) {
-  .physical-border-1 {
-    border-width: 0.5px;
-  }
-}
-.physical-border-2 {
-  border-bottom-width: 1px;
-}
-@media (min-resolution: 2dppx) {
-  .physical-border-2 {
-    border-bottom-width: 0.5px;
-  }
-}
diff --git a/test/cases/typography.styl b/test/cases/typography.styl
index 3b72fa7..d9cf594 100644
--- a/test/cases/typography.styl
+++ b/test/cases/typography.styl
@@ -16,9 +16,3 @@
 
 // font-face: found
 font-face('rider-icon', '../../demo/font/rider-icon')
-
-.physical-border-1
-    physical-border-width: 1px
-
-.physical-border-2
-    physical-border-width: _ _ 1px

From 8ed0b1a6ece3cca604ec06901809737f57b3c613 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 13 Jun 2015 03:05:27 +0800
Subject: [PATCH 33/62] =?UTF-8?q?`get-retina-src`=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=88=86=E9=9A=94=E7=AC=A6=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/helpers.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/helpers.js b/lib/helpers.js
index 95df7fd..bb46e79 100644
--- a/lib/helpers.js
+++ b/lib/helpers.js
@@ -37,9 +37,10 @@ exports['is-url'] = function isUrl(url) {
  *
  * @param {Object} src 图片路径对象
  * @param {Object} dppx dppx对象
+ * @param {Object} separator 分隔符对象，默认值为 `@`
  * @return {string}
  */
-exports['get-retina-src'] = function getRetinaSrc(src, dppx) {
+exports['get-retina-src'] = function getRetinaSrc(src, dppx, separator) {
     utils.assertString(src, 'src');
     utils.assertPresent(dppx, 'dppx');
 
@@ -50,6 +51,7 @@ exports['get-retina-src'] = function getRetinaSrc(src, dppx) {
 
     var originName = src.val;
     var extName = path.extname(originName);
+    var separatorValue = separator ? separator.val : '@';
 
-    return originName.slice(0, -extName.length) + '@' + dppx.val + 'x' + extName;
+    return originName.slice(0, -extName.length) + separatorValue + dppx.val + 'x' + extName;
 };

From 25fc9f42a2378666d892e3998aac2ddc12accfc8 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 13 Jun 2015 03:28:43 +0800
Subject: [PATCH 34/62] =?UTF-8?q?=E5=8D=87=E7=BA=A7=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 只支持本地图片
* 自动找本地的 retina 图片
* 取消 cover, contain 的支持
* 增加图片质量优先模式
* 更新测试用例
---
 lib/rider/image.styl        |  76 ++++++++++++--------
 lib/rider/setting.styl      |  11 ++-
 test/cases/image.css        | 134 +++++++++++++++++-------------------
 test/cases/image.styl       |  71 +++++--------------
 test/cases/img/rider.png    | Bin 0 -> 6553 bytes
 test/cases/img/rider@2x.png | Bin 0 -> 14141 bytes
 6 files changed, 137 insertions(+), 155 deletions(-)
 create mode 100644 test/cases/img/rider.png
 create mode 100644 test/cases/img/rider@2x.png

diff --git a/lib/rider/image.styl b/lib/rider/image.styl
index 537d9a1..61ad307 100644
--- a/lib/rider/image.styl
+++ b/lib/rider/image.styl
@@ -1,41 +1,57 @@
-// image
+// 图片
 //
 // @author  firede(firede@firede.us)
 // @desc    image helpers
 
 
 @require 'setting'
+@require 'retina'
 @require 'typography'
 
+bg($src, $width = null, $height = null)
 
-// set background image
-bg($path, $width = auto, $height = auto, $dppx = $-image-dppx)
-    warn('$path should be a string.') if typeof($path) != 'string'
-    background: url($path) no-repeat
-
-    if $width in (cover contain) and $height == auto
-        $height = null
-    else if $width == auto && $height == auto
-        $img-size = image-size($path, 0)
-        if $img-size[0] != 0
-            $width = ($img-size[0] / $dppx)
-            $height = ($img-size[1] / $dppx)
-        else
-            $width = null
-            $height = null
-            warn('$width and $height get failed, the values has been set to `auto`.')
-
-    if $width != null || $height != null
-        background-size: $width $height
-
-// image replace
-// hide text and set background image
-ir($path, $x = 0, $y = 0, $width = auto, $height = auto, $dppx = $-image-dppx)
-    bg($path, $width, $height, $dppx)
-
-    if $x != 0 && $y == 0
-        $y = null
-    if $x != 0
-        background-position: $x $y
+    if not file-exists($src)
+        error('$src 必须为本地已存在的图片路径：' + $src)
 
+    // 获取图片尺寸
+    $img-size = image-size($src)
+    $width = $img-size[0] if $width == null
+    $height = $img-size[1] if $height == null
+
+    background-image: url($src)
+    background-size: $width $height
+
+    for $dppx, $index in $-image-dppx-range
+        // 忽略 dppx 为 1 的情况
+        if $dppx != 1
+            $computed-src = get-retina-src($src, $dppx, $-image-dppx-separator)
+            if file-exists($computed-src)
+                // 质量优先模式
+                if $-image-dppx-quality-first && $dppx > 1.5
+                    $computed-dppx = $dppx - 0.5
+                else
+                    $computed-dppx = $dppx
+
+                +retina($computed-dppx)
+                    background-image: url($computed-src)
+
+
+ir($src, $x = null, $y = null, $width = null, $height = null)
     hide-text()
+
+    background-position-x: $x if $x != null && $y == null
+    background-position-y: $y if $x == null && $y != null
+    background-position: $x $y if $x != null && $y != null
+
+    bg($src, $width, $height)
+// // image replace
+// // hide text and set background image
+// ir($path, $x = 0, $y = 0, $width = auto, $height = auto, $dppx = 2)
+//     bg($path, $width, $height, $dppx)
+
+//     if $x != 0 && $y == 0
+//         $y = null
+//     if $x != 0
+//         background-position: $x $y
+
+//     hide-text()
diff --git a/lib/rider/setting.styl b/lib/rider/setting.styl
index 28f99ad..a439e1c 100644
--- a/lib/rider/setting.styl
+++ b/lib/rider/setting.styl
@@ -23,11 +23,16 @@ $-prevent-text-size-adjust ?= true
 // 消除 tap highlight 颜色
 $-prevent-tap-highlight ?= true
 
-// 图片dppx范围
-$-image-dppx-range ?= 1..3
+// 图片的retina版本探测范围
+// 顺序按从小到大排列
+$-image-dppx-range ?= (2 3)
 
 // 图片dppx分隔符
-$-image-dppx-separator = '@'
+$-image-dppx-separator ?= '@'
+
+// 图片质量优先模式
+// 启用时将为低 0.5dppx 以内的设备，使用质量更高的图片
+$-image-dppx-quality-first ?= false
 
 // breakpoint 的切片分段
 // 默认值: 0 400px 600px 800px 1050px
diff --git a/test/cases/image.css b/test/cases/image.css
index 751a03a..36cb7fc 100644
--- a/test/cases/image.css
+++ b/test/cases/image.css
@@ -1,101 +1,95 @@
-.bg-external-link-1 {
-  background: url("http://www.baidu.com/img/bdlogo.gif") no-repeat;
-}
-.bg-external-link-2 {
-  background: url("http://www.baidu.com/img/bdlogo.gif") no-repeat;
-  background-size: 100px auto;
-}
-.bg-external-link-3 {
-  background: url("http://www.baidu.com/img/bdlogo.gif") no-repeat;
-  background-size: 100px 50px;
+.bg-1 {
+  background-image: url("../../test/cases/img/logo.png");
+  background-size: 150px 88px;
 }
-.bg-local-image-1 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 75px 44px;
+.bg-2 {
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 136px 136px;
 }
-.bg-local-image-2 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 100px auto;
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .bg-2 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
-.bg-local-image-3 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 100px 50px;
+.bg-3 {
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 20px 30px;
 }
-.bg-local-image-4 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 150px 88px;
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .bg-3 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
-.bg-local-image-5 {
-  background: url("img/logo.png") no-repeat;
-  background-size: contain;
+.bg-4 {
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 20px 136px;
 }
-.bg-local-image-not-exist {
-  background: url("img/not-exist.png") no-repeat;
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .bg-4 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
-.ir-external-link-1 {
-  background: url("http://www.baidu.com/img/bdlogo.gif") no-repeat;
+.ir-1 {
   color: transparent;
   font: 0/0 a;
   text-shadow: none;
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 136px 136px;
 }
-.ir-local-image-1 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 75px 44px;
-  color: transparent;
-  font: 0/0 a;
-  text-shadow: none;
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .ir-1 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
-.ir-local-image-2 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 75px 44px;
-  background-position: -10px;
+.ir-2 {
   color: transparent;
   font: 0/0 a;
   text-shadow: none;
-}
-.ir-local-image-3 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 75px 44px;
   background-position: -10px -20px;
-  color: transparent;
-  font: 0/0 a;
-  text-shadow: none;
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 136px 136px;
 }
-.ir-local-image-4 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 75px 44px;
-  background-position: center;
-  color: transparent;
-  font: 0/0 a;
-  text-shadow: none;
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .ir-2 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
-.ir-local-image-5 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 100px auto;
-  background-position: -10px -20px;
+.ir-3 {
   color: transparent;
   font: 0/0 a;
   text-shadow: none;
+  background-position-y: -20px;
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 136px 136px;
 }
-.ir-local-image-6 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 100px 50px;
-  background-position: -10px -20px;
-  color: transparent;
-  font: 0/0 a;
-  text-shadow: none;
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .ir-3 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
-.ir-local-image-7 {
-  background: url("img/logo.png") no-repeat;
-  background-size: 150px 88px;
-  background-position: -10px -20px;
+.ir-4 {
   color: transparent;
   font: 0/0 a;
   text-shadow: none;
+  background-position-x: -30px;
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 136px 136px;
+}
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .ir-4 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
-.ir-local-image-not-exist {
-  background: url("img/not-exist.png") no-repeat;
+.ir-5 {
   color: transparent;
   font: 0/0 a;
   text-shadow: none;
+  background-position: 0 -30px;
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 100px 200px;
+}
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .ir-5 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
 }
diff --git a/test/cases/image.styl b/test/cases/image.styl
index c08d477..7d7c925 100644
--- a/test/cases/image.styl
+++ b/test/cases/image.styl
@@ -1,52 +1,19 @@
-// bg($path, $width = auto, $height = auto, $dppx = $-image-dppx)
-
-// external link
-.bg-external-link-1
-    bg: 'http://www.baidu.com/img/bdlogo.gif'
-.bg-external-link-2
-    bg: 'http://www.baidu.com/img/bdlogo.gif' 100px
-.bg-external-link-3
-    bg: 'http://www.baidu.com/img/bdlogo.gif' 100px 50px
-
-// local image
-.bg-local-image-1
-    bg: 'img/logo.png'
-.bg-local-image-2
-    bg: 'img/logo.png' 100px
-.bg-local-image-3
-    bg: 'img/logo.png' 100px 50px
-.bg-local-image-4
-    bg: 'img/logo.png' auto auto 1
-.bg-local-image-5
-    bg: 'img/logo.png' contain
-
-// local image does not exist
-.bg-local-image-not-exist
-    bg: 'img/not-exist.png'
-
-
-// ir($path, $x = 0, $y = 0, $width = auto, $height = auto, $dppx = $-image-dppx)
-
-// external link
-.ir-external-link-1
-    ir: 'http://www.baidu.com/img/bdlogo.gif'
-
-// local image
-.ir-local-image-1
-    ir: 'img/logo.png'
-.ir-local-image-2
-    ir: 'img/logo.png' -10px
-.ir-local-image-3
-    ir: 'img/logo.png' -10px -20px
-.ir-local-image-4
-    ir: 'img/logo.png' center
-.ir-local-image-5
-    ir: 'img/logo.png' -10px -20px 100px
-.ir-local-image-6
-    ir: 'img/logo.png' -10px -20px 100px 50px
-.ir-local-image-7
-    ir: 'img/logo.png' -10px -20px auto auto 1
-
-// local image does not exist
-.ir-local-image-not-exist
-    ir 'img/not-exist.png'
+.bg-1
+    bg: '../../test/cases/img/logo.png'
+.bg-2
+    bg: '../../test/cases/img/rider.png'
+.bg-3
+    bg: '../../test/cases/img/rider.png', 20px, 30px
+.bg-4
+    bg: '../../test/cases/img/rider.png', 20px
+
+.ir-1
+    ir: '../../test/cases/img/rider.png'
+.ir-2
+    ir: '../../test/cases/img/rider.png', -10px, -20px
+.ir-3
+    ir: '../../test/cases/img/rider.png', null, -20px
+.ir-4
+    ir: '../../test/cases/img/rider.png', -30px
+.ir-5
+    ir: '../../test/cases/img/rider.png', 0, -30px, 100px, 200px
diff --git a/test/cases/img/rider.png b/test/cases/img/rider.png
new file mode 100644
index 0000000000000000000000000000000000000000..70542fb4eb0e30952b88b7df80bc0a7b49eda2ea
GIT binary patch
literal 6553
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
LNkvXXu0mjf!ONw0

literal 0
HcmV?d00001

diff --git a/test/cases/img/rider@2x.png b/test/cases/img/rider@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..8edf64eff7d9d82ab412452bd4a0df2681be5d84
GIT binary patch
literal 14141
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
Hu0mjfMiSU6

literal 0
HcmV?d00001


From e501321d3f70810a242ed84a16a9fb5cae97042c Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 13 Jun 2015 03:33:45 +0800
Subject: [PATCH 35/62] =?UTF-8?q?=E6=95=B4=E7=90=86=E4=BB=A3=E7=A0=81=20&?=
 =?UTF-8?q?=20=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider/clockhand.styl |  2 +-
 lib/rider/image.styl     | 16 ++++------------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/lib/rider/clockhand.styl b/lib/rider/clockhand.styl
index 7669025..ef525f1 100644
--- a/lib/rider/clockhand.styl
+++ b/lib/rider/clockhand.styl
@@ -1,5 +1,5 @@
 // clockhand
-// 
+//
 // @author  firede(firede@firede.us)
 // @desc    shorthand properties support, based on `clockhand-stylus`
 // @see     https://github.com/jasonkuhrt/clockhand-stylus
diff --git a/lib/rider/image.styl b/lib/rider/image.styl
index 61ad307..a43c3a8 100644
--- a/lib/rider/image.styl
+++ b/lib/rider/image.styl
@@ -8,6 +8,8 @@
 @require 'retina'
 @require 'typography'
 
+// 设置背景图片
+// 自动查找并设置为 retina 设备准备的高清图片
 bg($src, $width = null, $height = null)
 
     if not file-exists($src)
@@ -35,7 +37,8 @@ bg($src, $width = null, $height = null)
                 +retina($computed-dppx)
                     background-image: url($computed-src)
 
-
+// 图片替换
+// 隐藏文字并设置背景图片，可指定背景图片坐标
 ir($src, $x = null, $y = null, $width = null, $height = null)
     hide-text()
 
@@ -44,14 +47,3 @@ ir($src, $x = null, $y = null, $width = null, $height = null)
     background-position: $x $y if $x != null && $y != null
 
     bg($src, $width, $height)
-// // image replace
-// // hide text and set background image
-// ir($path, $x = 0, $y = 0, $width = auto, $height = auto, $dppx = 2)
-//     bg($path, $width, $height, $dppx)
-
-//     if $x != 0 && $y == 0
-//         $y = null
-//     if $x != 0
-//         background-position: $x $y
-
-//     hide-text()

From 03a37785aaa09f274463555e44729496fa28dbfb Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 13 Jun 2015 03:55:47 +0800
Subject: [PATCH 36/62] =?UTF-8?q?`bg()`=20=E9=BB=98=E8=AE=A4=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=20`no-repeat`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider/image.styl | 1 +
 test/cases/image.css | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/lib/rider/image.styl b/lib/rider/image.styl
index a43c3a8..6b53c15 100644
--- a/lib/rider/image.styl
+++ b/lib/rider/image.styl
@@ -22,6 +22,7 @@ bg($src, $width = null, $height = null)
 
     background-image: url($src)
     background-size: $width $height
+    background-repeat: no-repeat
 
     for $dppx, $index in $-image-dppx-range
         // 忽略 dppx 为 1 的情况
diff --git a/test/cases/image.css b/test/cases/image.css
index 36cb7fc..0651785 100644
--- a/test/cases/image.css
+++ b/test/cases/image.css
@@ -1,10 +1,12 @@
 .bg-1 {
   background-image: url("../../test/cases/img/logo.png");
   background-size: 150px 88px;
+  background-repeat: no-repeat;
 }
 .bg-2 {
   background-image: url("../../test/cases/img/rider.png");
   background-size: 136px 136px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .bg-2 {
@@ -14,6 +16,7 @@
 .bg-3 {
   background-image: url("../../test/cases/img/rider.png");
   background-size: 20px 30px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .bg-3 {
@@ -23,6 +26,7 @@
 .bg-4 {
   background-image: url("../../test/cases/img/rider.png");
   background-size: 20px 136px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .bg-4 {
@@ -35,6 +39,7 @@
   text-shadow: none;
   background-image: url("../../test/cases/img/rider.png");
   background-size: 136px 136px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-1 {
@@ -48,6 +53,7 @@
   background-position: -10px -20px;
   background-image: url("../../test/cases/img/rider.png");
   background-size: 136px 136px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-2 {
@@ -61,6 +67,7 @@
   background-position-y: -20px;
   background-image: url("../../test/cases/img/rider.png");
   background-size: 136px 136px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-3 {
@@ -74,6 +81,7 @@
   background-position-x: -30px;
   background-image: url("../../test/cases/img/rider.png");
   background-size: 136px 136px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-4 {
@@ -87,6 +95,7 @@
   background-position: 0 -30px;
   background-image: url("../../test/cases/img/rider.png");
   background-size: 100px 200px;
+  background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-5 {

From 0d51878ccf18c2555db0421a4c7599b98916ab55 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sat, 13 Jun 2015 04:03:43 +0800
Subject: [PATCH 37/62] =?UTF-8?q?=E4=BC=98=E5=8C=96=20`background-position?=
 =?UTF-8?q?`=20=E8=BE=93=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider/image.styl  |  6 +++++-
 test/cases/image.css  | 14 ++++++++++++++
 test/cases/image.styl |  2 ++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/lib/rider/image.styl b/lib/rider/image.styl
index 6b53c15..8a39bd7 100644
--- a/lib/rider/image.styl
+++ b/lib/rider/image.styl
@@ -45,6 +45,10 @@ ir($src, $x = null, $y = null, $width = null, $height = null)
 
     background-position-x: $x if $x != null && $y == null
     background-position-y: $y if $x == null && $y != null
-    background-position: $x $y if $x != null && $y != null
+    if $x != null && $y != null
+        if $x == $y
+            background-position: $x
+        else
+            background-position: $x $y
 
     bg($src, $width, $height)
diff --git a/test/cases/image.css b/test/cases/image.css
index 0651785..8040e4a 100644
--- a/test/cases/image.css
+++ b/test/cases/image.css
@@ -102,3 +102,17 @@
     background-image: url("../../test/cases/img/rider@2x.png");
   }
 }
+.ir-6 {
+  color: transparent;
+  font: 0/0 a;
+  text-shadow: none;
+  background-position: 0;
+  background-image: url("../../test/cases/img/rider.png");
+  background-size: 100px 200px;
+  background-repeat: no-repeat;
+}
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+  .ir-6 {
+    background-image: url("../../test/cases/img/rider@2x.png");
+  }
+}
diff --git a/test/cases/image.styl b/test/cases/image.styl
index 7d7c925..dfd79cd 100644
--- a/test/cases/image.styl
+++ b/test/cases/image.styl
@@ -17,3 +17,5 @@
     ir: '../../test/cases/img/rider.png', -30px
 .ir-5
     ir: '../../test/cases/img/rider.png', 0, -30px, 100px, 200px
+.ir-6
+    ir: '../../test/cases/img/rider.png', 0, 0, 100px, 200px

From bfbdc028b18c80065e92dfc23d44a383bafd085b Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sun, 14 Jun 2015 02:17:47 +0800
Subject: [PATCH 38/62] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20`bg2x()`,=20`bg3x()`?=
 =?UTF-8?q?,=20`bg-dppx()`.=20#23?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider/image.styl  | 33 +++++++++++++++++++
 test/cases/image.css  | 73 ++++++++++++++++++++++++++++++++-----------
 test/cases/image.styl | 37 ++++++++++++++++------
 3 files changed, 114 insertions(+), 29 deletions(-)

diff --git a/lib/rider/image.styl b/lib/rider/image.styl
index 8a39bd7..ff8fd1b 100644
--- a/lib/rider/image.styl
+++ b/lib/rider/image.styl
@@ -8,6 +8,7 @@
 @require 'retina'
 @require 'typography'
 
+
 // 设置背景图片
 // 自动查找并设置为 retina 设备准备的高清图片
 bg($src, $width = null, $height = null)
@@ -38,6 +39,7 @@ bg($src, $width = null, $height = null)
                 +retina($computed-dppx)
                     background-image: url($computed-src)
 
+
 // 图片替换
 // 隐藏文字并设置背景图片，可指定背景图片坐标
 ir($src, $x = null, $y = null, $width = null, $height = null)
@@ -52,3 +54,34 @@ ir($src, $x = null, $y = null, $width = null, $height = null)
             background-position: $x $y
 
     bg($src, $width, $height)
+
+
+// 使用若干 dppx 倍数的图片
+// 若换算后的图片尺寸不为整数，则舍弃小数部分
+bg-dppx($dppx, $src, $width = null, $height = null)
+
+    if unit($dppx) != ''
+        error('$dppx 的值必须是一个代表倍数的数字')
+
+    if not file-exists($src)
+        error('$src 必须为本地已存在的图片路径：' + $src)
+
+    // 获取图片尺寸
+    $img-size = image-size($src)
+    $width = floor($img-size[0] / $dppx) if $width == null
+    $height = floor($img-size[1] / $dppx) if $height == null
+
+    background-image: url($src)
+    background-size: $width $height
+    background-repeat: no-repeat
+
+
+// 使用 2dppx 的图片作为背景
+bg2x($src, $width = null, $height = null)
+    bg-dppx(2, $src, $width, $height)
+
+
+// 使用 3dppx 的图片作为背景
+bg3x($src, $width = null, $height = null)
+    bg-dppx(3, $src, $width, $height)
+
diff --git a/test/cases/image.css b/test/cases/image.css
index 8040e4a..d72b838 100644
--- a/test/cases/image.css
+++ b/test/cases/image.css
@@ -1,49 +1,49 @@
 .bg-1 {
-  background-image: url("../../test/cases/img/logo.png");
+  background-image: url("img/logo.png");
   background-size: 150px 88px;
   background-repeat: no-repeat;
 }
 .bg-2 {
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 136px 136px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .bg-2 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .bg-3 {
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 20px 30px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .bg-3 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .bg-4 {
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 20px 136px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .bg-4 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .ir-1 {
   color: transparent;
   font: 0/0 a;
   text-shadow: none;
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 136px 136px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-1 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .ir-2 {
@@ -51,13 +51,13 @@
   font: 0/0 a;
   text-shadow: none;
   background-position: -10px -20px;
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 136px 136px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-2 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .ir-3 {
@@ -65,13 +65,13 @@
   font: 0/0 a;
   text-shadow: none;
   background-position-y: -20px;
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 136px 136px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-3 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .ir-4 {
@@ -79,13 +79,13 @@
   font: 0/0 a;
   text-shadow: none;
   background-position-x: -30px;
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 136px 136px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-4 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .ir-5 {
@@ -93,13 +93,13 @@
   font: 0/0 a;
   text-shadow: none;
   background-position: 0 -30px;
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 100px 200px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-5 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
 .ir-6 {
@@ -107,12 +107,47 @@
   font: 0/0 a;
   text-shadow: none;
   background-position: 0;
-  background-image: url("../../test/cases/img/rider.png");
+  background-image: url("img/rider.png");
   background-size: 100px 200px;
   background-repeat: no-repeat;
 }
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .ir-6 {
-    background-image: url("../../test/cases/img/rider@2x.png");
+    background-image: url("img/rider@2x.png");
   }
 }
+.bg2x-1 {
+  background-image: url("img/logo.png");
+  background-size: 75px 44px;
+  background-repeat: no-repeat;
+}
+.bg2x-2 {
+  background-image: url("img/logo.png");
+  background-size: 10px 44px;
+  background-repeat: no-repeat;
+}
+.bg2x-3 {
+  background-image: url("img/logo.png");
+  background-size: 10px 5px;
+  background-repeat: no-repeat;
+}
+.bg2x-4 {
+  background-image: url("img/rider@2x.png");
+  background-size: 136px 136px;
+  background-repeat: no-repeat;
+}
+.bg3x-1 {
+  background-image: url("img/logo.png");
+  background-size: 50px 29px;
+  background-repeat: no-repeat;
+}
+.bg-dppx-1 {
+  background-image: url("img/logo.png");
+  background-size: 75px 44px;
+  background-repeat: no-repeat;
+}
+.bg-dppx-2 {
+  background-image: url("img/logo.png");
+  background-size: 37px 22px;
+  background-repeat: no-repeat;
+}
diff --git a/test/cases/image.styl b/test/cases/image.styl
index dfd79cd..b4e9943 100644
--- a/test/cases/image.styl
+++ b/test/cases/image.styl
@@ -1,21 +1,38 @@
 .bg-1
-    bg: '../../test/cases/img/logo.png'
+    bg: 'img/logo.png'
 .bg-2
-    bg: '../../test/cases/img/rider.png'
+    bg: 'img/rider.png'
 .bg-3
-    bg: '../../test/cases/img/rider.png', 20px, 30px
+    bg: 'img/rider.png', 20px, 30px
 .bg-4
-    bg: '../../test/cases/img/rider.png', 20px
+    bg: 'img/rider.png', 20px
 
 .ir-1
-    ir: '../../test/cases/img/rider.png'
+    ir: 'img/rider.png'
 .ir-2
-    ir: '../../test/cases/img/rider.png', -10px, -20px
+    ir: 'img/rider.png', -10px, -20px
 .ir-3
-    ir: '../../test/cases/img/rider.png', null, -20px
+    ir: 'img/rider.png', null, -20px
 .ir-4
-    ir: '../../test/cases/img/rider.png', -30px
+    ir: 'img/rider.png', -30px
 .ir-5
-    ir: '../../test/cases/img/rider.png', 0, -30px, 100px, 200px
+    ir: 'img/rider.png', 0, -30px, 100px, 200px
 .ir-6
-    ir: '../../test/cases/img/rider.png', 0, 0, 100px, 200px
+    ir: 'img/rider.png', 0, 0, 100px, 200px
+
+.bg2x-1
+    bg2x: 'img/logo.png'
+.bg2x-2
+    bg2x: 'img/logo.png', 10px
+.bg2x-3
+    bg2x: 'img/logo.png', 10px, 5px
+.bg2x-4
+    bg2x: 'img/rider@2x.png'
+
+.bg3x-1
+    bg3x: 'img/logo.png'
+
+.bg-dppx-1
+    bg-dppx: 2 'img/logo.png'
+.bg-dppx-2
+    bg-dppx: 4 'img/logo.png'

From b5d59f0ed7e463c0ac9f0ec137f95836c3f794c5 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Sun, 14 Jun 2015 02:38:40 +0800
Subject: [PATCH 39/62] release 2.0.0-alpha.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3ae1854..6e821b1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "rider",
-    "version": "2.0.0-alpha.1",
+    "version": "2.0.0-alpha.2",
     "description": "Rider is a CSS library to focus on Mobile Web, build on top of Stylus.",
     "maintainers": [
         {

From 87f7bc47bbe7add8fcf5fe10ef7f26747c72caca Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 12:48:09 +0800
Subject: [PATCH 40/62] =?UTF-8?q?=E6=9B=B4=E6=96=B0=202.0.0=20=E7=89=88?=
 =?UTF-8?q?=E7=9A=84=20History.md?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 History.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/History.md b/History.md
index 333db60..e6156de 100644
--- a/History.md
+++ b/History.md
@@ -1,4 +1,27 @@
 
+2.0.0 / 2015-06-15
+==================
+
+ * **Breaking Change** 改进 Function：`bg()`, `ir()` [#18](https://github.com/ecomfe/rider/issues/18)
+ * **Breaking Change** 改进 Root Mixin：`font-face()` [#16](https://github.com/ecomfe/rider/issues/16)
+ * **Breaking Change** 改进 Block Mixin：`+breakpoint()`，移除组合能力，迁出 retina 支持 [#19](https://github.com/ecomfe/rider/issues/19)
+ * **Breaking Change** 移除：retina 支持中的浏览器兼容代码 [#17](https://github.com/ecomfe/rider/issues/17)
+ * **Breaking Change** 移除 全局变量：`$-image-dppx`，retina 图片机制已更新
+ * 增加 全局变量：`$-code-font-family` 作为代码段默认字体
+ * 增加 全局变量：`$-image-dppx-range` 作为 retina 图片的探测范围
+ * 增加 全局变量：`$-image-dppx-separator` 作为 retina 图片的分隔符
+ * 增加 全局变量：`$-image-dppx-quality-first` 作为 retina 图片质量优先模式的开关
+ * 增加 全局变量：`$-unit-precision` 作为单位转换的小数点精度控制
+ * 增加 Function：`bg2x()`, `bg3x()`, `bg-dppx()` [#23](https://github.com/ecomfe/rider/issues/23)
+ * 增加 Function：`file-exists()`, `is-url()`, `get-retina-src` [#15](https://github.com/ecomfe/rider/issues/15)
+ * 增加 Mixin：`normalize()` 作为布局初始化的补充 [#8](https://github.com/ecomfe/rider/issues/8)
+ * 增加 Mixin：`physical-border-width()` 解决 retina 设备 1px 边框问题 [#13](https://github.com/ecomfe/rider/issues/13)
+ * 增加 Block Mixin：`+retina()` [#20](https://github.com/ecomfe/rider/issues/20)
+ * 改进 Function：`rem()`, `em()`, `px()` 单位转换定义截取小数点位数 [#4](https://github.com/ecomfe/rider/issues/4)
+ * 改进 Mixin：`animate()` 升级至 animate.css 3.2.6 版 [#5](https://github.com/ecomfe/rider/issues/5)
+ * 改进：测试脚本启用 inline diff [#7](https://github.com/ecomfe/rider/issues/7)
+ * 改进：简化 demo 的支持部分 [#6](https://github.com/ecomfe/rider/issues/6)
+
 0.4.4 / 2014-11-06
 ==================
 

From 716208ad2502623177a50778431deedd1cd60bfe Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 13:23:16 +0800
Subject: [PATCH 41/62] =?UTF-8?q?=E8=A1=A5=E5=85=85=20`circle()`=20?=
 =?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E4=B8=8E=20change?=
 =?UTF-8?q?=20log?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 History.md            |  1 +
 test/cases/shape.css  | 17 ++++++++++++++++-
 test/cases/shape.styl |  8 ++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/History.md b/History.md
index e6156de..d2b5972 100644
--- a/History.md
+++ b/History.md
@@ -16,6 +16,7 @@
  * 增加 Function：`file-exists()`, `is-url()`, `get-retina-src` [#15](https://github.com/ecomfe/rider/issues/15)
  * 增加 Mixin：`normalize()` 作为布局初始化的补充 [#8](https://github.com/ecomfe/rider/issues/8)
  * 增加 Mixin：`physical-border-width()` 解决 retina 设备 1px 边框问题 [#13](https://github.com/ecomfe/rider/issues/13)
+ * 增加 Mixin：`circle()` 生成圆形或椭圆
  * 增加 Block Mixin：`+retina()` [#20](https://github.com/ecomfe/rider/issues/20)
  * 改进 Function：`rem()`, `em()`, `px()` 单位转换定义截取小数点位数 [#4](https://github.com/ecomfe/rider/issues/4)
  * 改进 Mixin：`animate()` 升级至 animate.css 3.2.6 版 [#5](https://github.com/ecomfe/rider/issues/5)
diff --git a/test/cases/shape.css b/test/cases/shape.css
index bb2e05c..c3f7def 100644
--- a/test/cases/shape.css
+++ b/test/cases/shape.css
@@ -56,4 +56,19 @@
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   border-left: 5px solid #369;
-}
\ No newline at end of file
+}
+.test-circle-1 {
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+}
+.test-circle-2 {
+  border-radius: 20px/40px;
+  width: 20px;
+  height: 40px;
+}
+.test-circle-3 {
+  border-radius: 5rem/3rem;
+  width: 5rem;
+  height: 3rem;
+}
diff --git a/test/cases/shape.styl b/test/cases/shape.styl
index 5024bb8..4be77ce 100644
--- a/test/cases/shape.styl
+++ b/test/cases/shape.styl
@@ -33,3 +33,11 @@
     triangle: left 5px #369
 .test-triangle-5
     triangle: right 5px #369
+
+// circle
+.test-circle-1
+    circle: 20px
+.test-circle-2
+    circle: 20px 40px
+.test-circle-3
+    circle: 5rem 3rem

From 7119f92884199ab5d223e5a6b17593bff3b97bce Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 13:31:11 +0800
Subject: [PATCH 42/62] =?UTF-8?q?=E6=B3=A8=E9=87=8A=E4=B8=AD=E6=96=87?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider.js              |  2 +-
 lib/rider/animate.styl    |  4 ++--
 lib/rider/easing.styl     | 10 +++++-----
 lib/rider/image.styl      |  1 -
 lib/rider/initialize.styl |  2 +-
 lib/rider/normalize.styl  |  2 +-
 lib/rider/retina.styl     |  3 +--
 lib/rider/shape.styl      | 14 ++++++++------
 lib/rider/typography.styl | 20 ++++++++++----------
 lib/rider/unit.styl       | 15 +++++++++------
 10 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/lib/rider.js b/lib/rider.js
index bdfecf4..79f04c8 100644
--- a/lib/rider.js
+++ b/lib/rider.js
@@ -6,7 +6,7 @@
 var helpers = require('./helpers');
 
 /**
- * stylus plugin
+ * stylus 插件
  *
  * @param {Object=} options 可选参数
  * @param {boolean=} options.implicit 隐式调用
diff --git a/lib/rider/animate.styl b/lib/rider/animate.styl
index 636db79..86bbd1d 100644
--- a/lib/rider/animate.styl
+++ b/lib/rider/animate.styl
@@ -1,4 +1,4 @@
-// animate
+// 动画
 //
 // @author  firede(firede@firede.us)
 // @desc    ported from Animate.css v3.2.6
@@ -17,7 +17,7 @@ animate($name, $duration = 1s, $fill-mode = both)
         animation-duration: $duration
         animation-fill-mode: $fill-mode
 
-        // process special animation
+        // 处理特殊动画
         if $name == bounce
             transform-origin: center bottom
         if $anme == flip
diff --git a/lib/rider/easing.styl b/lib/rider/easing.styl
index d1d177e..e2460be 100644
--- a/lib/rider/easing.styl
+++ b/lib/rider/easing.styl
@@ -1,7 +1,7 @@
-// easing
-// 
+// 缓动函数
+//
 // @author  firede(firede@firede.us)
-// @desc    more easing functions by cubic-bezier
+// @desc    通过 `cubic-bezier` 定义的更多缓动函数
 // @see     http://easings.net
 
 
@@ -47,11 +47,11 @@ easing($type = 'ease')
     return cubic-bezier(0.175,  0.885, 0.320, 1.275) if $type == 'out-back'
     return cubic-bezier(0.680, -0.550, 0.265, 1.550) if $type == 'in-out-back'
 
-    // others
+    // 兼容默认缓动函数
     if $type == 'ease'
         return unquote('ease')
     else if $type in ('in' 'out' 'in-out')
         return unquote('ease-' + $type)
     else
-        error('easing function is not supported.')
+        error('不支持 `' + $type + '` 缓动函数')
 
diff --git a/lib/rider/image.styl b/lib/rider/image.styl
index ff8fd1b..9113539 100644
--- a/lib/rider/image.styl
+++ b/lib/rider/image.styl
@@ -1,7 +1,6 @@
 // 图片
 //
 // @author  firede(firede@firede.us)
-// @desc    image helpers
 
 
 @require 'setting'
diff --git a/lib/rider/initialize.styl b/lib/rider/initialize.styl
index 7a171ac..b290df9 100644
--- a/lib/rider/initialize.styl
+++ b/lib/rider/initialize.styl
@@ -1,4 +1,4 @@
-// initialize
+// 样式初始化
 //
 // @author  firede(firede@firede.us)
 
diff --git a/lib/rider/normalize.styl b/lib/rider/normalize.styl
index 7462cce..20a4af1 100644
--- a/lib/rider/normalize.styl
+++ b/lib/rider/normalize.styl
@@ -1,4 +1,4 @@
-// normalize
+// 样式归一化
 //
 // @author  firede(firede@firede.us)
 // @desc    ported from normalize.css v3.0.3, MIT License
diff --git a/lib/rider/retina.styl b/lib/rider/retina.styl
index 46200f5..2a27311 100644
--- a/lib/rider/retina.styl
+++ b/lib/rider/retina.styl
@@ -1,7 +1,6 @@
-// retina
+// Retina 支持
 //
 // @author  firede(firede@firede.us)
-// @desc    retina helpers
 
 // 物理边框尺寸
 physical-border-width($args...)
diff --git a/lib/rider/shape.styl b/lib/rider/shape.styl
index 19aba41..48e8d75 100644
--- a/lib/rider/shape.styl
+++ b/lib/rider/shape.styl
@@ -1,10 +1,10 @@
-// shape
+// 形状
 //
-// @author  firede(firede@firede.us)
+// @author firede(firede@firede.us)
 
 
-// set width and height quickly
-// default unit is `px`
+// 快速设置宽度与高度
+// 默认单位为 `px`
 size($values...)
     if length($values) == 1
         $values-unit = unit($values) == '' ? 'px' : unit($values)
@@ -19,7 +19,7 @@ size($values...)
         height: unit($values[1], $height-unit)
 
 
-// triangle
+// 三角形
 triangle($direction = top, $size = 10px, $color = #333)
     size: 0
 
@@ -40,7 +40,8 @@ triangle($direction = top, $size = 10px, $color = #333)
         border-bottom: $size solid transparent
         border-left: $size solid $color
 
-// circle
+
+// 圆形
 circle($values...)
     if length($values) == 1
         $values-unit = unit($values) == '' ? 'px' : unit($values)
@@ -53,3 +54,4 @@ circle($values...)
 
         border-radius: unit($values[0], $horizontal-unit) \/ unit($values[1], $vertical-unit)
         size: $values[0] $values[1]
+
diff --git a/lib/rider/typography.styl b/lib/rider/typography.styl
index 8569624..d9e23ff 100644
--- a/lib/rider/typography.styl
+++ b/lib/rider/typography.styl
@@ -1,9 +1,9 @@
-// typography
+// 排版
 //
-// @author  firede(firede@firede.us)
+// @author firede(firede@firede.us)
 
 
-// hide text
+// 隐藏文字
 // @see http://goo.gl/EglZN
 hide-text()
     color: transparent
@@ -11,8 +11,8 @@ hide-text()
     text-shadow: none
 
 
-// ellipsis
-// support multi line (webkit only)
+// 省略
+// 多行截断并省略，仅在 webkit 下支持
 ellipsis($line = 1)
     overflow: hidden
     text-overflow: ellipsis
@@ -25,7 +25,7 @@ ellipsis($line = 1)
         -webkit-box-orient: vertical
 
 
-// clearfix
+// 清除浮动
 // @see http://h5bp.com/q
 clearfix()
     &:after,
@@ -36,12 +36,12 @@ clearfix()
         clear: both
 
 
-// font face
-// iOS/Android used ttf, Mobile IE 10 used woff.
+// 字体
+// 根据存在的字体类型，自动生成配置
 font-face($font-family, $font-path)
 
     if is-url($font-path)
-        error('Only support local $font-path, please using `@font-face` instead.')
+        error('$font-path 只支持本地路径，请直接用 @font-face 写远程路径')
 
     // 字体类型与对应的format,顺序排列
     $font-formats = {
@@ -65,7 +65,7 @@ font-face($font-family, $font-path)
 
     // 无任何可用字体则报错
     if length($usable-types) == 0
-        error('Web fonts `' + $font-family + '` not exists!');
+        error('没有找到 `' + $font-family + '` 的本地字体文件');
 
     // 合并字体src
     for $type in $usable-types
diff --git a/lib/rider/unit.styl b/lib/rider/unit.styl
index 1f3f19f..ae2dbe8 100644
--- a/lib/rider/unit.styl
+++ b/lib/rider/unit.styl
@@ -1,13 +1,13 @@
-// unit
+// 单位
 //
 // @author  firede(firede@firede.us)
-// @desc    unit conversion functions
+// @desc    单位转换函数
 
 
 @require 'setting'
 
-// convert to rem unit
-// default unit is `px`
+// 转换至 rem 单位
+// $value 接收 `px` 单位的值，`px` 可省略
 rem($value)
     if unit($value) == 'px' || unit($value) == ''
         $value = round($value / $-base-font-size, $-unit-precision)
@@ -15,7 +15,9 @@ rem($value)
     unit($value, 'rem')
 
 
-// convert to em unit
+// 转换至 em 单位
+// $value 接收 `px`, `rem` 单位的值，省略单位默认为 `px`
+// $upper-value 作为相对单位，需指定上级元素字体大小
 em($value, $upper-value = $-base-font-size)
     if unit($value) == 'px' || unit($value) == ''
         $value = round($value / px($upper-value), $-unit-precision)
@@ -25,7 +27,8 @@ em($value, $upper-value = $-base-font-size)
     unit($value, 'em')
 
 
-// convert to px unit
+// 转换至 px 单位
+// $value 接收 `rem` 单位的值
 px($value)
     if unit($value) == 'rem'
         $value = round($value * $-base-font-size, $-unit-precision)

From ee8a3b962845a9ab05d0fd28bb9fb8fa268b9673 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 14:44:51 +0800
Subject: [PATCH 43/62] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E7=89=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md      |  32 +++++++++----
 doc/feature.md | 124 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 146 insertions(+), 10 deletions(-)
 create mode 100644 doc/feature.md

diff --git a/README.md b/README.md
index 2c261a4..4c154dd 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,30 @@
 rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) [![License](https://img.shields.io/npm/l/rider.svg?style=flat-square)](./LICENSE) [![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)](http://efe.baidu.com)
 ===
 
-(2.0.0 系列仍在 alpha 阶段，请不要在 **生产环境** 使用)
+`rider` 是基于 [Stylus](http://stylus-lang.com) 与后处理器、无侵入风格的 CSS 样式工具库。它提供了以下功能：
 
-`rider` 是一个基于 [`stylus`](https://github.com/LearnBoost/stylus)、专注于 **移动 Web** 的 CSS 样式库。
+ * 样式初始化
+ * 顺时针简写
+ * 缓动函数
+ * 图片
+ * 排版
+ * 形状
+ * 动画
+ * 单位转换
+ * 响应式工具
+ * Retina 支持
+ * 辅助函数
+ * ...
 
-它提供了样式初始化、顺时针简写、缓动函数、图片、排版、单位转换、形状、动画、响应式工具等功能，可以让你的前端样式开发更轻松、更省心。
+基于 `rider` 开发 **项目** 或 **UI 样式库**，能有效提高开发效率，延长代码生命周期。
 
 ## 文档
 
-+ 安装与配置
-    + [在 `edp` 环境使用](https://github.com/ecomfe/edp-provider-rider)
-    + [在 `connect`/`express` 环境使用](./doc/connect.md)
-+ [API](./doc/api.md)
-+ [代码风格](./doc/code-style.md)
-+ [常见问题](./doc/faq.md)
-+ [DEMO与单元测试](./doc/demo-and-ut.md)
+ * [特性](./doc/feature.md)
+ * 安装与配置
+     * [在 `edp` 环境使用](https://github.com/ecomfe/edp-provider-rider)
+     * [在 `connect`/`express` 环境使用](./doc/connect.md)
+ * [API](./doc/api.md)
+ * [代码风格](./doc/code-style.md)
+ * [常见问题](./doc/faq.md)
+ * [DEMO与单元测试](./doc/demo-and-ut.md)
diff --git a/doc/feature.md b/doc/feature.md
new file mode 100644
index 0000000..ee5c433
--- /dev/null
+++ b/doc/feature.md
@@ -0,0 +1,124 @@
+特性
+===
+
+## 高效工作流
+
+`rider` 通过前后处理器混合的方式，提供了更高效的工作流。
+
+    DSL(Stylus) → 标准 CSS → 生产环境 CSS
+
+通过 **预处理器** 处理样式层的抽象、复用，减少冗余；通过 **后处理器** 处理兼容性问题、优化输出。
+
+在写 Stylus 时，只需面向 **标准 CSS** 开发；在后处理阶段，自动将 **标准 CSS** 转换为对目标浏览器优化后的 **生产环境 CSS**。
+
+### 工作流的三个阶段
+
+**DSL(Stylus)：**
+
+```stylus
+.navbar
+    fixed: _ 0 0
+    display: flex
+    box-sizing: border-box
+```
+
+**标准 CSS：**
+
+```css
+.navbar {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    box-sizing: border-box;
+}
+```
+
+**生产环境 CSS：**
+
+```css
+.navbar {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+```
+
+## 无侵入风格
+
+在预处理阶段，`rider` 的各种功能均通过 `Mixin`, `Function` 或 `Block Mixin` 的方式提供，只有在主动调用时才输出代码。
+
+我们不提供直接给 HTML 调用的类名，不会用「样式类」污染 HTML 代码的语义。
+
+所以，您能在享受 `rider` 各种便捷工具的同时，写出干净且符合语义的 HTML 代码。
+
+### Bootstrap 风格与无侵入风格的对比
+
+**Bootstrap 风格：**
+
+```html
+<!-- 被样式类污染的 HTML 结构 -->
+
+<div class="col-xs-6 col-md-4">
+    <p class="text-danger">...</p>
+    <button class="btn btn-danger btn-xs" type="button">...</button>
+</div>
+```
+
+```css
+/* 无论是否用到，都输出所有样式 */
+
+.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2,
+.col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
+.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5,
+.col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
+.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8,
+.col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
+.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11,
+.col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12,
+.col-md-12, .col-lg-12 {
+    /* 通用样式 */
+}
+.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4,
+.col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8,
+.col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
+    /* 另一组通用样式 */
+}
+.text-danger {
+    /* ... */
+}
+/* 更多没有被用到的样式 */
+```
+
+**无侵入风格：**
+
+```html
+<!-- 一目了然，语义化的 HTML 结构 -->
+
+<div class="order">
+    <p class="total-prices">...</p>
+    <button class="pay" type="button">...</button>
+</div>
+```
+
+```css
+/* 无调用，不输出 */
+
+.order {
+    /* 通过 Mixin, Function 生成样式 */
+}
+.order .total-prices {
+    /* ... */
+}
+.order .pay {
+    /* ... */
+}
+```

From 297fdc6ffd6e428dfff5ffd5fd3d08541d1864d7 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 20:24:27 +0800
Subject: [PATCH 44/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E6=A0=B7=E5=BC=8F=E5=88=9D=E5=A7=8B=E5=8C=96=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/initialize.md | 123 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 doc/initialize.md

diff --git a/doc/initialize.md b/doc/initialize.md
new file mode 100644
index 0000000..db2bb7c
--- /dev/null
+++ b/doc/initialize.md
@@ -0,0 +1,123 @@
+样式初始化
+===
+
+由于应用场景的多样化，`rider` 提供了三种样式初始化的方式。请根据你的项目特点，选择最合适的方案。
+
+## Normalize
+
+样式归一化，基于 [`normalize.css`](http://necolas.github.io/normalize.css/) 定制的 Stylus 版本。
+
+如果你希望各种元素都有 **可用的默认样式**，并基于此进行开发，那么 `Normalize` 就是为你准备的。这也是社区中 **最流行** 的样式初始化方案。
+
+比如，你的内容区域有 `<em>`、`<strong>` 标签，即使你不去特意的定义它的样式，也能够得到符合寓意的展现。
+
+### normalize()
+
+对全局样式进行归一化。
+
+相关的[全局配置](./setting.md)：
+
+ * `$-base-font-size`
+ * `$-base-font-family`
+ * `$-code-font-family`
+ * `$-prevent-text-size-adjust`
+ * `$-prevent-tap-highlight`
+
+如有希望调整的配置，请在调用 Mixin 之前进行声明。
+
+```stylus
+// 修改默认的代码字体
+$-code-font-family = Monaco, Consolas, monospace
+
+// 进行样式归一化
+normalize()
+```
+
+### normalize-form()
+
+归一化表单样式。
+
+**注意**：如果已使用 `normalize()` 或 `initialize()` 进行过初始化，请 **不要** 使用这个 Mixin。
+
+## Initialize
+
+以 `CSS reset` 为主，`CSS normalize` 为辅的样式初始化方案。
+
+适合设计中各种 **用户界面元素** 均需要 **精确定义** 的使用场景。
+
+如果网站的每一部分都是精心设计的，默认样式不可能生效，那么 `Initialize` 给你的 **一张白纸** 会让你的创作过程更省心。
+
+### initialize()
+
+对全局样式进行初始化。
+
+相关的[全局配置](./setting.md)：
+
+ * `$-base-font-size`
+ * `$-base-font-family`
+ * `$-prevent-text-size-adjust`
+ * `$-prevent-tap-highlight`
+
+如有希望调整的配置，请在调用 Mixin 之前进行声明。
+
+```stylus
+// 修改默认的基础字体大小
+$-base-font-size = 14px
+
+// 进行样式初始化
+initialize()
+```
+
+## 局部 CSS Reset
+
+适合用于运行在第三方环境，需要确保 **不影响外部容器样式** 的初始化方案。
+
+比如在第三方页面投放的广告、在第三方平台运行的应用等，根据需要对 **特定区域** 进行初始化。
+
+注意：在使用了 `normalize()` 或 `initialize()` 的环境中，不推荐使用这些 Mixin。
+
+### reset-font()
+
+重置文字字体、尺寸、样式、垂直对齐方式。
+
+```stylus
+.ad-slot
+    reset-font()
+```
+
+### reset-box-model()
+
+重置盒模型。处于可访问性考虑，不会重置 `outline`。
+
+```stylus
+.app-container
+    reset-box-model()
+```
+
+### reset-list()
+
+重置列表样式。应用于 `ul`、`ol` 类型元素。
+
+```stylus
+.menu-list
+    reset-list()
+```
+
+### reset-table()
+
+重置表格样式。应用于 `table` 类型元素。
+
+```stylus
+.data-table
+    reset-table()
+```
+
+### reset-table-cell()
+
+初始化单元格样式。应用于 `td`、`th` 类型元素。
+
+```stylus
+.data-table td
+    reset-table-cell()
+```
+

From 2bb65cdc742ffd600c8edfe1626fdc44f5936771 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 21:05:23 +0800
Subject: [PATCH 45/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E9=A1=BA=E6=97=B6=E9=92=88=E7=AE=80=E5=86=99=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/clockhand.md | 117 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 doc/clockhand.md

diff --git a/doc/clockhand.md b/doc/clockhand.md
new file mode 100644
index 0000000..4b87950
--- /dev/null
+++ b/doc/clockhand.md
@@ -0,0 +1,117 @@
+顺时针简写
+===
+
+在 `CSS` 语法中，可以通过 `顺时针` 的方式简写属性的值，比如 `padding`、`margin` 等。其规则如下：
+
+    上 右 下 左 => 1 2 3 4
+    上 右 下 => 1 2 3 2
+    上 右 => 1 2 1 2
+    上 => 1 1 1 1
+
+类似的还有 `border-radius` 中，按照 `左上`、`右上`、`右下`、`左下` 顺序的简写方式。
+
+但是，因为不存在代表 **未定义** 的占位符，使用简写后，每个方向都被设置了 **值**。  
+为了解决这个问题，我们引入了一个 `_` 占位符，用来表示 **未定义** 的状态。
+
+同时，我们也对一些符合 `顺时针简写` 规律的用法进行了拓展，使其用起来更高效。
+
+### absolute: top right bottom left
+
+将当前容器设为 `absolute`，并设置定位的值。
+
+```stylus
+.mask
+    absolute: 0
+.toolbar
+    absolute: 60px 0 _
+```
+
+生成的 CSS：
+
+```css
+.mask {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+.toolbar {
+    position: absolute;
+    top: 60px;
+    right: 0;
+    left: 0;
+}
+```
+
+### fixed: top right bottom left
+
+将当前容器设为 `fixed`，并设置定位的值。
+
+```stylus
+.back-to-top
+    fixed: _ 0 20px _
+    // => position: fixed; right: 0; bottom: 20px;
+```
+
+### relative: top right bottom left
+
+将当前容器设为 `relative`，并设置定位的值。
+
+```stylus
+.box
+    relative: 10px _ _ _
+    // => position: relative; top: 10px;
+```
+
+### padding: padding-top padding-right padding-bottom padding-left
+
+替换了 CSS 的 `padding`，处理使用了 `_` 占位符的情况。
+
+```stylus
+.content
+    padding: 20px
+    // => padding: 20px;
+
+.content code
+    padding: _ 5px
+    // => padding-right: 5px; padding-left: 5px;
+```
+
+### margin: margin-top margin-right margin-bottom margin-left
+
+替换了 CSS 的 `margin`，处理使用了 `_` 占位符的情况。
+
+```stylus
+.main
+    margin: _ auto
+    // => margin-right: auto; margin-left: auto;
+```
+
+### border-color: border-top-color border-right-color border-bottom-color border-left-color
+
+替换了CSS的 `border-color`，处理使用了 `_` 占位符的情况。
+
+```stylus
+.box
+    border-color: #f7f7f7 _
+    // => border-top-color: #f7f7f7; border-bottom-color: #f7f7f7;
+```
+
+### border-style: border-top-style border-right-style border-bottom-style border-left-style
+
+替换了CSS的 `border-style`，处理使用了 `_` 占位符的情况。
+
+### border-width: border-top-width border-right-width border-bottom-width border-left-width
+
+替换了CSS的 `border-width`，处理使用了 `_` 占位符的情况。
+
+### clockhand: values, property-prefix, property-suffix, sides
+
+生成符合 **顺时针简写** 规则的属性，以上 Mixin 均是通过它来生成的，很少会直接用到。
+
+```stylus
+.test
+    clockhand: 1 2 3 4, 'foo', 'bar', (a b c d)
+    // => foo-a-bar: 1; foo-b-bar: 2; foo-c-bar: 3; foo-d-bar: 4;
+```

From 5ba6e67a19b88dec3665452915fb10789874b776 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 21:19:31 +0800
Subject: [PATCH 46/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E7=BC=93=E5=8A=A8=E5=87=BD=E6=95=B0=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/easing.md | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 doc/easing.md

diff --git a/doc/easing.md b/doc/easing.md
new file mode 100644
index 0000000..5b98de9
--- /dev/null
+++ b/doc/easing.md
@@ -0,0 +1,27 @@
+缓动函数
+===
+
+CSS默认提供的缓动函数有限，我们通过贝塞尔曲线对缓动函数进行了扩充。
+
+### easing(type)
+
+生成 **指定类型** 的缓动函数。
+
+支持的型有：
+
+`in-sine` `out-sine` `in-out-sine`
+`in-quad` `out-quad` `in-out-quad`
+`in-cubic` `out-cubic` `in-out-cubic`
+`in-quart` `out-quart` `in-out-quart`
+`in-quint` `out-quint` `in-out-quint`
+`in-expo` `out-expo` `in-out-expo`
+`in-circ` `out-circ` `in-out-circ`
+`in-back` `out-back` `in-out-back`
+
+各缓动函数的效果可以参考 [easings.net](http://easings.net/zh-cn)，使用示例如下：
+
+```stylus
+.box
+    transition: all 1s easing('in-sine')
+    // => transition: all 1s cubic-bezier(0.47, 0, 0.745, 0.715);
+```

From 90f5b71797c29ec2c1060f1bb6ae8c9116e1799f Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Mon, 15 Jun 2015 21:57:51 +0800
Subject: [PATCH 47/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E5=85=A8=E5=B1=80=E9=85=8D=E7=BD=AE=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/setting.md | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 doc/setting.md

diff --git a/doc/setting.md b/doc/setting.md
new file mode 100644
index 0000000..159ca37
--- /dev/null
+++ b/doc/setting.md
@@ -0,0 +1,89 @@
+# 全局配置
+
+`rider` 的 **默认配置** 能够适应大多数场景，但如有需要，我们可以通过 **覆盖全局配置** 对样式工具库进行微调。
+
+建议在样式入口文件的 **最前方** 设置全局配置，以确保调用相关方法时能够生效。
+
+### $-base-font-size
+
+用于设置文档的 **基础** 文字大小。**单位转换** 函数就是根据此配置计算的。
+
+默认值：`16px`
+
+相关：[样式初始化](./initialize.md)，[单位转换](./unit.md)
+
+### $-base-font-family
+
+基础字体族群。
+
+默认值：`'Helvetica Neue', Arial, sans-serif`
+
+相关：[样式初始化](./initialize.md)
+
+### $-code-font-family
+
+代码字体族群。
+
+默认值：`Menlo, Consolas, monospace`
+
+相关：[样式初始化](./initialize.md)
+
+### $-prevent-text-size-adjust
+
+是否 **阻止** 屏幕翻转时，浏览器缩放字体的行为。
+
+默认值：`true`
+
+相关：[样式初始化](./initialize.md)
+
+### $-prevent-tap-highlight
+
+是否 **屏蔽** 移动浏览器中，`a`、`nav` 等标签 **点击触发** 时的高亮效果。
+
+默认值：`true`
+
+相关：[样式初始化](./initialize.md)
+
+### $-image-dppx-range
+
+使用图片工具时，探测设定 DPPX 范围内的 Retina 图片。
+
+默认值：`(2 3)`
+
+相关：[图片](./image.md)
+
+### $-image-dppx-separator
+
+使用图片工具时，拼装带 DPPX 值的路径所用的分隔符。
+
+比如，当该配置为 `@` 时，`./logo.png` 的 `3dppx` 版本图片为 `./logo@3x.png`。
+
+默认值：`@`
+
+相关：[图片](./image.md)
+
+### $-image-dppx-quality-first
+
+使用图片工具时，是否启用 **质量优先** 模式。
+
+该配置启用时，将为比设定值低 `0.5dppx` 以内的设备，使用质量更高的图片。
+
+默认值：`false`
+
+相关：[图片](./image.md)
+
+### $-breakpoint-slice
+
+响应式工具 Breakpoint 所使用的屏幕切片分段。
+
+默认值：`0 400px 600px 800px 1050px`
+
+相关：[响应式工具](./breakpoint.md)
+
+### $-unit-precision
+
+单位转换的精度，小数点后保留的位数。
+
+默认值：`5`
+
+相关：[单位转换](./unit.md)

From 5cbffda7f78f19201037ec50554ccfb4305eec67 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 16 Jun 2015 13:51:49 +0800
Subject: [PATCH 48/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E5=8D=95=E4=BD=8D=E8=BD=AC=E6=8D=A2=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/unit.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 doc/unit.md

diff --git a/doc/unit.md b/doc/unit.md
new file mode 100644
index 0000000..e06cd9f
--- /dev/null
+++ b/doc/unit.md
@@ -0,0 +1,64 @@
+单位转换
+===
+
+### rem(value)
+
+将 `value` 转换成单位为 `rem` 的值。
+
+`value` 支持以 `px` 或 `rem` 为单位的数值。默认单位为 `px`。
+
+相关的[全局配置](./setting.md)：
+
+ * `$-base-font-size`
+
+```stylus
+// 当基础字体大小为 16px 时：
+.box
+    font-size: rem(20)
+    // => font-size: 1.25rem;
+    font-size: rem(14px)
+    // => font-size: 0.875rem;
+    font-size: rem(2rem)
+    // => font-size: 2rem;
+```
+
+### px(value)
+
+将 `value` 转换成单位为 `px` 的值。
+
+`value` 支持以 `rem` 或 `px` 为单位的数值。默认单位为 `px`。
+
+相关的[全局配置](./setting.md)：
+
+ * `$-base-font-size`
+
+```stylus
+.box
+    width: px(1rem)
+    // => width: 16px;
+    width: px(1.5rem)
+    // => width: 24px;
+    width: px(20)
+    // => width: 20px;
+```
+
+### em(value, upper-value)
+
+根据继承自上级元素字体大小，将 `value` 转换成单位为 `em` 的值。
+
+`value` 支持以 `rem` 或 `px` 为单位的数值。默认单位为 `px`。  
+`upper-value` 是手动传入的继承自上级元素的字体大小（默认值：`$-base-font-size`）。
+
+相关的[全局配置](./setting.md)：
+
+ * `$-base-font-size`
+
+```stylus
+.box
+    foo: em(20)
+    // => foo: 1.25em;
+    foo: em(16, 10)
+    // => foo: 1.6em;
+    foo: em(1rem, 10)
+    // => foo: 1.6em;
+```

From d8af683d13c3e3f85e0bdc01a591d1729673b01c Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 16 Jun 2015 16:07:21 +0800
Subject: [PATCH 49/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E5=BD=A2=E7=8A=B6=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md    | 24 +++++++--------
 doc/shape.md | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 12 deletions(-)
 create mode 100644 doc/shape.md

diff --git a/README.md b/README.md
index 4c154dd..8360885 100644
--- a/README.md
+++ b/README.md
@@ -3,22 +3,22 @@ rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)]
 
 `rider` 是基于 [Stylus](http://stylus-lang.com) 与后处理器、无侵入风格的 CSS 样式工具库。它提供了以下功能：
 
- * 样式初始化
- * 顺时针简写
- * 缓动函数
- * 图片
- * 排版
- * 形状
- * 动画
- * 单位转换
- * 响应式工具
- * Retina 支持
- * 辅助函数
+ * [样式初始化](./doc/initialize.md)
+ * [顺时针简写](./doc/clockhand.md)
+ * [缓动函数](./doc/easing.md)
+ * [图片](./doc/image.md)
+ * [排版](./doc/typography.md)
+ * [形状](./doc/shape.md)
+ * [动画](./doc/animate.md)
+ * [单位转换](./doc/unit.md)
+ * [响应式工具](./doc/breakpoint.md)
+ * [Retina 支持](./doc/retina.md)
+ * [辅助函数](./doc/helper.md)
  * ...
 
 基于 `rider` 开发 **项目** 或 **UI 样式库**，能有效提高开发效率，延长代码生命周期。
 
-## 文档
+## 参考
 
  * [特性](./doc/feature.md)
  * 安装与配置
diff --git a/doc/shape.md b/doc/shape.md
new file mode 100644
index 0000000..9a255f5
--- /dev/null
+++ b/doc/shape.md
@@ -0,0 +1,85 @@
+形状
+===
+
+### size: width, height
+
+绘制矩形，快速设置容器的 **宽度** 和 **高度**。
+
+ * `width` - 宽度，默认单位为 `px`
+ * `height` _(可选)_ - 高度，默认单位为 `px`，留空为绘制正方形
+
+```stylus
+.square
+    size: 5em
+.rectangle
+    size: 100 20
+```
+
+生成的 CSS：
+
+```css
+.square {
+    width: 5em;
+    height: 5em;
+}
+.rectangle {
+    width: 100px;
+    height: 20px;
+}
+```
+
+### circle: width, height
+
+绘制圆形。
+
+ * `width` - 宽度，默认单位为 `px`
+ * `height` _(可选)_ - 高度，默认单位为 `px`，留空为绘制正圆形
+
+```stylus
+.avatar
+    circle: 30px
+.bubble
+    circle: 100px 80px
+```
+
+生成的 CSS：
+
+```css
+.avatar {
+    border-radius: 30px;
+    width: 30px;
+    height: 30px;
+}
+.bubble {
+    border-radius: 100px/80px;
+    width: 100px;
+    height: 80px;
+}
+```
+
+### triangle: direction, size, color
+
+绘制三角形。
+
+ * `direction` - 方向，取值范围为 `top`、`right`、`bottom`、`left`
+ * `size` - 尺寸
+ * `color` - 颜色
+
+```stylus
+.box:after
+    // 通常在 :before, :after 选择器下
+    // 与 absolute, content 配合使用
+    triangle: top 5px #369
+```
+
+生成的 CSS：
+
+```css
+.box:after {
+    width: 0px;
+    height: 0px;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid #369;
+}
+```

From b23be592da749fb9aae13264b4a69e73100e4d97 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 16 Jun 2015 19:12:16 +0800
Subject: [PATCH 50/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E5=8A=A8=E7=94=BB=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/animate.md | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++
 doc/easing.md  |  2 +-
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 doc/animate.md

diff --git a/doc/animate.md b/doc/animate.md
new file mode 100644
index 0000000..761971a
--- /dev/null
+++ b/doc/animate.md
@@ -0,0 +1,72 @@
+动画
+===
+
+### animate: name, duration, fill-mode
+
+快速添加来自 `Animate.css` 的动画。
+
+应用于 CSS 根节点时，只生成动画的 `@keyframes`。  
+应用于 CSS 选择器时，生成动画的 `@keyframes` 与 `animation` 相关属性。
+
+同一个动画，`@keyframes` 只会被引入一次。
+
+支持的动画有：
+
+`bounce` `bounceIn` `bounceInDown` `bounceInLeft` `bounceInRight`
+`bounceInUp` `bounceOut` `bounceOutDown` `bounceOutLeft`
+`bounceOutRight` `bounceOutUp` `fadeIn` `fadeInDown` `fadeInDownBig`
+`fadeInLeft` `fadeInLeftBig` `fadeInRight` `fadeInRightBig`
+`fadeInUp` `fadeInUpBig` `fadeOut` `fadeOutDown` `fadeOutDownBig`
+`fadeOutLeft` `fadeOutLeftBig` `fadeOutRight` `fadeOutRightBig`
+`fadeOutUp` `fadeOutUpBig` `flash` `flip` `flipInX` `flipInY`
+`flipOutX` `flipOutY` `hinge` `lightSpeedIn` `lightSpeedOut` `pulse`
+`rollIn` `rollOut` `rotateIn` `rotateInDownLeft` `rotateInDownRight`
+`rotateInUpLeft` `rotateInUpRight` `rotateOut` `rotateOutDownLeft`
+`rotateOutDownRight` `rotateOutUpLeft` `rotateOutUpRight`
+`rubberBand` `shake` `slideInDown` `slideInLeft` `slideInRight`
+`slideOutLeft` `slideOutRight` `slideOutUp` `swing` `tada` `wobble`
+`zoomIn` `zoomInDown` `zoomInLeft` `zoomInRight` `zoomInUp` `zoomOut`
+`zoomOutDown` `zoomOutLeft` `zoomOutRight` `zoomOutUp`
+
+各种动画的效果可参考 [Animate.css](http://daneden.github.io/animate.css/)，使用示例如下：
+
+```stylus
+// 在根节点使用
+animate('flash')
+
+// 在选择器中使用
+.box
+    animate('pulse', .5s)
+```
+
+生成的 CSS：
+
+```css
+/* 在根节点使用，只生成 @keyframes */
+@keyframes flash {
+    0%, 50%, 100% {
+        opacity: 1;
+    }
+    25%, 75% {
+        opacity: 0;
+    }
+}
+
+/* 在选择器中使用，生成 @keyframes 与 animation 相关属性 */
+.box {
+    animation-name: pulse;
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+}
+@keyframes pulse {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+    50% {
+        transform: scale3d(1.05, 1.05, 1.05);
+    }
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+```
diff --git a/doc/easing.md b/doc/easing.md
index 5b98de9..e63b1da 100644
--- a/doc/easing.md
+++ b/doc/easing.md
@@ -7,7 +7,7 @@ CSS默认提供的缓动函数有限，我们通过贝塞尔曲线对缓动函
 
 生成 **指定类型** 的缓动函数。
 
-支持的型有：
+支持的类型有：
 
 `in-sine` `out-sine` `in-out-sine`
 `in-quad` `out-quad` `in-out-quad`

From 8d3666e347ba6570776d26ad2bb5066f050b1e68 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 16 Jun 2015 19:38:21 +0800
Subject: [PATCH 51/62] =?UTF-8?q?font-face=20=E5=A2=9E=E5=8A=A0=20`$font-w?=
 =?UTF-8?q?eight`=20=E4=B8=8E=20`$font-style`=20=E5=8F=82=E6=95=B0=20#24?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/rider/typography.styl  | 6 +++---
 test/cases/typography.css  | 2 +-
 test/cases/typography.styl | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/rider/typography.styl b/lib/rider/typography.styl
index d9e23ff..bfcf3e6 100644
--- a/lib/rider/typography.styl
+++ b/lib/rider/typography.styl
@@ -38,7 +38,7 @@ clearfix()
 
 // 字体
 // 根据存在的字体类型，自动生成配置
-font-face($font-family, $font-path)
+font-face($font-family, $font-path, $font-weight = normal, $font-style = normal)
 
     if is-url($font-path)
         error('$font-path 只支持本地路径，请直接用 @font-face 写远程路径')
@@ -85,5 +85,5 @@ font-face($font-family, $font-path)
         if 'eot' in $usable-types
             src: url($font-files['eot'])
         src: unquote($str)
-        font-weight: normal
-        font-style: normal
+        font-weight: $font-weight
+        font-style: $font-style
diff --git a/test/cases/typography.css b/test/cases/typography.css
index f7f6ca0..44fcace 100644
--- a/test/cases/typography.css
+++ b/test/cases/typography.css
@@ -31,6 +31,6 @@
 @font-face {
   font-family: 'rider-icon';
   src: url("../../demo/font/rider-icon.woff") format('woff'), url("../../demo/font/rider-icon.ttf") format('truetype');
-  font-weight: normal;
+  font-weight: 700;
   font-style: normal;
 }
diff --git a/test/cases/typography.styl b/test/cases/typography.styl
index d9cf594..4f3ff7e 100644
--- a/test/cases/typography.styl
+++ b/test/cases/typography.styl
@@ -15,4 +15,4 @@
     clearfix()
 
 // font-face: found
-font-face('rider-icon', '../../demo/font/rider-icon')
+font-face('rider-icon', '../../demo/font/rider-icon', 700)

From 575af47d1d95349fb0be7a6ae0935690e0361201 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Tue, 16 Jun 2015 20:11:05 +0800
Subject: [PATCH 52/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E6=8E=92=E7=89=88=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md         |   4 ++
 doc/typography.md | 117 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 121 insertions(+)
 create mode 100644 doc/typography.md

diff --git a/README.md b/README.md
index 8360885..19f0b95 100644
--- a/README.md
+++ b/README.md
@@ -28,3 +28,7 @@ rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)]
  * [代码风格](./doc/code-style.md)
  * [常见问题](./doc/faq.md)
  * [DEMO与单元测试](./doc/demo-and-ut.md)
+
+## License
+
+MIT &copy; [Baidu Inc.](./LICENSE)
diff --git a/doc/typography.md b/doc/typography.md
new file mode 100644
index 0000000..1222892
--- /dev/null
+++ b/doc/typography.md
@@ -0,0 +1,117 @@
+排版
+===
+
+### clearfix()
+
+清除浮动。
+
+参考：[A new micro clearfix hack](http://h5bp.com/q)
+
+```stylus
+.container
+    clearfix()
+```
+
+生成的 CSS：
+
+```css
+.container:after,
+.container:before {
+    content: ' ';
+    display: table;
+}
+.container:after {
+    clear: both;
+}
+```
+
+### hide-text()
+
+隐藏容器内的文字。
+
+参考：[Update CSS image replacement technique](https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757c9e03dda4e463fb0d4db5a5f82d7)
+
+```stylus
+.banner
+    hide-text()
+```
+
+生成的 CSS：
+
+```css
+.banner {
+    color: transparent;
+    font: 0/0 a;
+    text-shadow: none;
+}
+```
+
+### ellipsis(line)
+
+溢出文本显示省略号。
+
+**多行截断** 仅在 `webkit` 内核下有生效，且要保证容器上下的 `padding` 为 `0`，否则本该被截断的文字会溢出。
+
+ * `line` _(可选)_ - 想要截断的行数，留空则默认为 **单行截断**。
+
+```stylus
+.title
+    ellipsis()
+.desc
+    ellipsis(3)
+```
+
+生成的 CSS：
+
+```css
+.title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.desc {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+}
+```
+
+### font-face: font-family, font-path, font-weight, font-style
+
+快速引入本地路径的字体。
+
+通过检测 `font-path` 对应的各种 **字体格式** 是否存在，生成最合适的配置。
+
+若需要引入远程路径的字体，请直接手写 `@font-face`。
+
+ * `font-family` - 字体名
+ * `font-path` - 字体路径，指字体 **去掉后缀** 之后的部分
+ * `font-weight` _(可选)_ - 字重，默认为 `normal`
+ * `font-style` _(可选)_ - 字体样式，默认为 `normal`
+
+检测的字体格式有：
+
+ * eot
+ * woff
+ * woff2
+ * ttf
+ * svg
+
+```stylus
+// 对应路径下有 ttf, woff 两种格式的字体
+font-face('Open Sans', '../font/open-sans-bold', 700)
+```
+
+生成的 CSS：
+
+```css
+@font-face {
+    font-family: 'Open Sans';
+    src: url("../font/open-sans-bold.woff") format('woff'),
+         url("../font/open-sans-bold.ttf") format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+```

From e297c6e46720ac00a1e1ce83c506656bf6ef4fd7 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 11:43:13 +0800
Subject: [PATCH 53/62] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 19f0b95..ead3ba2 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,8 @@
-rider [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) [![License](https://img.shields.io/npm/l/rider.svg?style=flat-square)](./LICENSE) [![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)](http://efe.baidu.com)
+rider
 ===
 
+[![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) [![License](https://img.shields.io/npm/l/rider.svg?style=flat-square)](./LICENSE) [![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)](http://efe.baidu.com)
+
 `rider` 是基于 [Stylus](http://stylus-lang.com) 与后处理器、无侵入风格的 CSS 样式工具库。它提供了以下功能：
 
  * [样式初始化](./doc/initialize.md)

From 1c0a77fb2d348d853c35bda5270dbcd62c856f43 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 12:14:32 +0800
Subject: [PATCH 54/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9ARetina=20=E6=94=AF=E6=8C=81=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

考虑到通过 `+retina()` 已经能够较方便的实现 `physical-border-width()`
的功能，所以此方法决定不写入文档，在发布正式版前可能会被移除。
---
 doc/retina.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 doc/retina.md

diff --git a/doc/retina.md b/doc/retina.md
new file mode 100644
index 0000000..b8f2b44
--- /dev/null
+++ b/doc/retina.md
@@ -0,0 +1,35 @@
+Retina 支持
+===
+
+### +retina(dppx)
+
+用于限定仅在 Retina 屏幕生效的样式代码，屏幕密度依靠 `dppx` 单位描述。
+
+ * `dppx` - 每像素包含的点数，默认值为 `1.5`。
+
+```stylus
+.box
+    color: #f00
+    +retina()
+        color: #0f0
+    +retina(2)
+        color: #00f
+```
+
+生成的 CSS：
+
+```css
+.box {
+    color: #f00;
+}
+@media (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+    .box {
+        color: #0f0;
+    }
+}
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+    .box {
+        color: #00f;
+    }
+}
+```

From f69e79d21bdfe11e466175c863fb579ffb234e41 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 12:18:19 +0800
Subject: [PATCH 55/62] =?UTF-8?q?=E7=A7=BB=E9=99=A4=20`physical-border-wid?=
 =?UTF-8?q?th()`=20=E5=8F=8A=E7=9B=B8=E5=85=B3=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 History.md             |  1 -
 lib/rider/retina.styl  | 16 ----------------
 test/cases/retina.css  | 16 ----------------
 test/cases/retina.styl |  6 ------
 4 files changed, 39 deletions(-)

diff --git a/History.md b/History.md
index d2b5972..0410e8b 100644
--- a/History.md
+++ b/History.md
@@ -15,7 +15,6 @@
  * 增加 Function：`bg2x()`, `bg3x()`, `bg-dppx()` [#23](https://github.com/ecomfe/rider/issues/23)
  * 增加 Function：`file-exists()`, `is-url()`, `get-retina-src` [#15](https://github.com/ecomfe/rider/issues/15)
  * 增加 Mixin：`normalize()` 作为布局初始化的补充 [#8](https://github.com/ecomfe/rider/issues/8)
- * 增加 Mixin：`physical-border-width()` 解决 retina 设备 1px 边框问题 [#13](https://github.com/ecomfe/rider/issues/13)
  * 增加 Mixin：`circle()` 生成圆形或椭圆
  * 增加 Block Mixin：`+retina()` [#20](https://github.com/ecomfe/rider/issues/20)
  * 改进 Function：`rem()`, `em()`, `px()` 单位转换定义截取小数点位数 [#4](https://github.com/ecomfe/rider/issues/4)
diff --git a/lib/rider/retina.styl b/lib/rider/retina.styl
index 2a27311..792bc6a 100644
--- a/lib/rider/retina.styl
+++ b/lib/rider/retina.styl
@@ -2,22 +2,6 @@
 //
 // @author  firede(firede@firede.us)
 
-// 物理边框尺寸
-physical-border-width($args...)
-    $half-args = ()
-    for $arg in $args
-        if $arg == '_'
-            push($half-args, $arg)
-        else
-            push($half-args, ($arg / 2))
-
-    border-width: $args
-
-    // 只有 iOS 8+ 支持 0.5px 边框，不需要做 dpi 兼容
-    @media (min-resolution: 2dppx)
-        border-width: $half-args
-
-
 // 限定 retina 模式的 block mixin
 // 不区分 dppx 具体倍数时，取 1.5dppx 作为一般意义上的 retina 设备
 retina($dppx = 1.5)
diff --git a/test/cases/retina.css b/test/cases/retina.css
index c70e8af..1b02d8f 100644
--- a/test/cases/retina.css
+++ b/test/cases/retina.css
@@ -1,19 +1,3 @@
-.physical-border-1 {
-  border-width: 1px;
-}
-@media (min-resolution: 2dppx) {
-  .physical-border-1 {
-    border-width: 0.5px;
-  }
-}
-.physical-border-2 {
-  border-bottom-width: 1px;
-}
-@media (min-resolution: 2dppx) {
-  .physical-border-2 {
-    border-bottom-width: 0.5px;
-  }
-}
 @media (min-resolution: 2dppx), (min-resolution: 192dpi) {
   .retina-1 {
     foo: bar;
diff --git a/test/cases/retina.styl b/test/cases/retina.styl
index c963abc..120e3ea 100644
--- a/test/cases/retina.styl
+++ b/test/cases/retina.styl
@@ -1,9 +1,3 @@
-.physical-border-1
-    physical-border-width: 1px
-
-.physical-border-2
-    physical-border-width: _ _ 1px
-
 +retina(2)
     .retina-1
         foo: bar

From 0c7986e0e60ab594dbe7319b1671f7ad5776988a Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 14:15:48 +0800
Subject: [PATCH 56/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E5=9B=BE=E7=89=87=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/image.md | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 doc/image.md

diff --git a/doc/image.md b/doc/image.md
new file mode 100644
index 0000000..1adceee
--- /dev/null
+++ b/doc/image.md
@@ -0,0 +1,109 @@
+图片
+===
+
+### bg: src, width, height
+
+设置背景图片。
+
+假如本地存在 `logo.png`, `logo@2x.png`, `logo@3x.png` 三种尺寸的图片，只需在 `src` 中填入一倍尺寸的图片路径即可，二倍、三倍尺寸的图片会自动设置妥当。
+
+**注意**：只支持使用 **本地** 图片路径，**远程** 路径请直接写 CSS。
+
+ * `src` - 一倍尺寸的图片路径
+ * `width` _(可选)_ - 图片宽度。不填或值为 `null` 时，会自动获取一倍尺寸图片的宽度
+ * `height` _(可选)_ - 图片高度。不填或值为 `null` 时，会自动获取一倍尺寸图片的高度
+
+相关的[全局配置](./setting.md)：
+
+ * `$-image-dppx-range`
+ * `$-image-dppx-separator`
+ * `$-image-dppx-quality-first`
+
+```stylus
+// 测试环境
+// 存在 "../img/logo.png" 与 "../img/logo@2x.png" 文件
+// 图片 "../img/logo.png" 的宽度为 120px，高度为 80px
+.logo
+    bg: '../img/logo.png'
+```
+
+生成的 CSS：
+
+```css
+.logo {
+    background-image: url("../img/logo.png");
+    background-size: 120px 80px;
+    background-repeat: no-repeat;
+}
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+    .logo {
+        background-image: url("../img/logo@2x.png");
+    }
+}
+```
+
+同样是上面的例子，开启了 **质量优先模式** (`$-image-dppx-quality-first`) 后，生成的 CSS：
+
+```css
+.logo {
+    background-image: url("../img/logo.png");
+    background-size: 120px 80px;
+    background-repeat: no-repeat;
+}
+@media (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+    .logo {
+        background-image: url("../img/logo@2x.png");
+    }
+}
+```
+
+可以看到，在 `dppx` 大于等于 `1.5` 时，就使用了 `@2x` 质量的图片。
+
+### ir: src, x, y, width, height
+
+图片替换。隐藏文字并设置背景图片，可指定背景图片坐标。
+
+与 `bg()` 类似，具备 Retina 图片的探测与背景图片的设置能力。  
+增加了容器内文字隐藏与 `background-position` 坐标设置的功能。
+
+**注意**：只支持使用 **本地** 图片路径，**远程** 路径请直接写 CSS。
+
+ * `src` - 一倍尺寸的图片路径
+ * `x` _(可选)_ -
+ * `y` _(可选)_ -
+ * `width` _(可选)_ - 图片宽度。不填或值为 `null` 时，会自动获取一倍尺寸图片的宽度
+ * `height` _(可选)_ - 图片高度。不填或值为 `null` 时，会自动获取一倍尺寸图片的高度
+
+相关的[全局配置](./setting.md)：
+
+ * `$-image-dppx-range`
+ * `$-image-dppx-separator`
+ * `$-image-dppx-quality-first`
+
+相关：[排版](./typography.md)
+
+```stylus
+// 测试环境
+// 存在 "../img/logo.png" 与 "../img/logo@2x.png" 文件
+// 图片 "../img/logo.png" 的宽度为 120px，高度为 80px
+.logo
+    ir: '../img/logo.png'
+```
+
+生成的 CSS：
+
+```css
+.logo {
+    color: transparent;
+    font: 0/0 a;
+    text-shadow: none;
+    background-image: url("../img/logo.png");
+    background-size: 120px 80px;
+    background-repeat: no-repeat;
+}
+@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
+    .logo {
+        background-image: url("../img/logo@2x.png");
+    }
+}
+```

From 2b88a7f580b079139ac44d86bf58b1c1f14893a7 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 14:36:25 +0800
Subject: [PATCH 57/62] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E5=9B=BE=E7=89=87=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/image.md | 40 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/doc/image.md b/doc/image.md
index 1adceee..83b5dd7 100644
--- a/doc/image.md
+++ b/doc/image.md
@@ -1,14 +1,15 @@
 图片
 ===
 
+图片工具提供的功能需 **依赖本地能力**，所以以下 `src` 要求使用已存在的 **本地** 图片路径。  
+如需使用 **远程** 图片，请直接写 CSS。
+
 ### bg: src, width, height
 
 设置背景图片。
 
 假如本地存在 `logo.png`, `logo@2x.png`, `logo@3x.png` 三种尺寸的图片，只需在 `src` 中填入一倍尺寸的图片路径即可，二倍、三倍尺寸的图片会自动设置妥当。
 
-**注意**：只支持使用 **本地** 图片路径，**远程** 路径请直接写 CSS。
-
  * `src` - 一倍尺寸的图片路径
  * `width` _(可选)_ - 图片宽度。不填或值为 `null` 时，会自动获取一倍尺寸图片的宽度
  * `height` _(可选)_ - 图片高度。不填或值为 `null` 时，会自动获取一倍尺寸图片的高度
@@ -66,8 +67,6 @@
 与 `bg()` 类似，具备 Retina 图片的探测与背景图片的设置能力。  
 增加了容器内文字隐藏与 `background-position` 坐标设置的功能。
 
-**注意**：只支持使用 **本地** 图片路径，**远程** 路径请直接写 CSS。
-
  * `src` - 一倍尺寸的图片路径
  * `x` _(可选)_ -
  * `y` _(可选)_ -
@@ -107,3 +106,36 @@
     }
 }
 ```
+
+### bg-dppx: dppx, src, width, height
+
+根据传入的 **图片尺寸倍数** 与 **图片地址**，获取并计算出所需尺寸，生成相关样式。
+
+ * `dppx` - 图片的尺寸倍数
+ * `src` - 图片路径
+ * `width` _(可选)_ - 图片宽度。不填或值为 `null` 时，会计算出所需的图片宽度
+ * `height` _(可选)_ - 图片高度。不填或值为 `null` 时，会计算出所需的图片高度
+
+```stylus
+// 传入 2 倍尺寸的图片，实际宽高为：640px, 88px
+.slogan
+    bg-dppx: 2, '../img/slogan.png'
+```
+
+转换为 CSS：
+
+```css
+.slogan {
+    background-image: url("../img/slogan.png");
+    background-size: 320px 44px;
+    background-repeat: no-repeat;
+}
+```
+
+### bg2x: src, width, height
+
+使用效果参考 `bg-dppx`，它这是 `bg-dppx: 2, src, width, height` 的简写。
+
+### bg3x: src, width, height
+
+使用效果参考 `bg-dppx`，它这是 `bg-dppx: 3, src, width, height` 的简写。

From ee235848674a2322de4b86d7ce64aeb3e10a0f97 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 15:17:40 +0800
Subject: [PATCH 58/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E8=BE=85=E5=8A=A9=E5=87=BD=E6=95=B0=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/helper.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 doc/helper.md

diff --git a/doc/helper.md b/doc/helper.md
new file mode 100644
index 0000000..56f073d
--- /dev/null
+++ b/doc/helper.md
@@ -0,0 +1,51 @@
+辅助函数
+===
+
+### file-exists(file)
+
+检测 **文件路径** 是否存在。
+
+相关：[图片](./image.md)，[排版](./typography.md)
+
+```stylus
+.header
+    $img = '../img/bg.png'
+    if file-exists($img)
+        background: url($img) cover no-repeat
+    else
+        background: #369
+```
+
+### is-url(url)
+
+检测是否是 URL。
+
+这里的检测并不严格，此函数的目的主要是快速区分 **远程路径** 与 **本地路径**。
+
+相关：[排版](./typography.md)
+
+```stylus
+is-url('../font/icon.ttf')
+// => false
+
+is-url('http://efe.baidu.com/font/icon.ttf')
+// => true
+```
+
+### get-retina-src(src, dppx, separator)
+
+获取高分辨率版本的图片地址。
+
+ * `src` - 图片路径
+ * `dppx` - 图片尺寸的倍数
+ * `separator` _(可选)_ - 分隔符，默认为 `@`
+
+相关：[图片](./image.md)
+
+```stylus
+get-retina-src('../img/logo.png', 2)
+// => '../img/logo@2x.png'
+
+get-retina-src('../img/logo.png', 3, '-')
+// => '../img/logo-3x.png'
+```

From e84e345773aefe7530a0e74341b1b3b56f8f4b20 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 16:12:46 +0800
Subject: [PATCH 59/62] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=EF=BC=9A=E5=93=8D=E5=BA=94=E5=BC=8F=E5=B7=A5=E5=85=B7=20#21?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/breakpoint.md | 170 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 170 insertions(+)
 create mode 100644 doc/breakpoint.md

diff --git a/doc/breakpoint.md b/doc/breakpoint.md
new file mode 100644
index 0000000..d51ff1b
--- /dev/null
+++ b/doc/breakpoint.md
@@ -0,0 +1,170 @@
+响应式工具
+===
+
+`rider` 提供的响应式工具叫 `Breakpoint`（思路来自 [breakpoint-slicer](https://github.com/lolmaus/breakpoint-slicer)），以 `Block Mixin` 的方式调用。
+
+在做 **响应式布局** 时，按照 **屏幕宽度** 的范围，划分成几个 **切片**：
+
+    Breakpoint: 0                 400px     600px     800px       1050px
+                ├───────────────────┼─────────┼──────────┼───────────┼────────>
+    切片 #:               1              2          3          4          5
+
+以上面的划分方式为例，我们可以使用 **切片** 的编号来表示宽度的区间。
+
+切片的划分与 **设计** 强相关，每个项目的划分方式可能是不同的。  
+**建议** 在项目开始时，先通过全局配置 `$-breakpoint-slice` 定义好切片的划分方式。
+
+生成 Media Query 阶段，如果是根据 **切片** 设置 `min-width`，会自动加 `1px` 错开上一个区间，以确保边界值正常。
+
+**注意**：因为新版 Stylus 对 `@media` 标签嵌套已有较好的支持，`rider` 2.0 之前的版本的 **规则组合** 能力现已移除。
+
+相关的[全局配置](./setting.md)：
+
+ * `$-breakpoint-slice`
+
+### +below(value)
+
+限定低于目标尺寸或 **切片** 边界值。
+
+    Breakpoint: 0                 400px     600px     800px       1050px
+                ├───────────────────┼─────────┼──────────┼───────────┼────────>
+    切片 #:               1              2          3           4          5
+                ·                   ·         · below(3) ·           ·
+                <────────────────────────────────────────┤
+
+`value` 带单位时为具体的值，不带单位时为对应 **切片** 的值。
+
+```stylus
+.test
+    // 直接使用
+    +below(3)
+        foo: bar
+
+    // 与 +retina() 嵌套使用
+    +retina()
+        +below(3)
+            bar: baz
+```
+
+生成的 CSS：
+
+```css
+@media (max-width: 800px) {
+    .test {
+        foo: bar;
+    }
+}
+
+@media (min-resolution: 1.5dppx) and (max-width: 800px), (min-resolution: 144dpi) and (max-width: 800px) {
+    .test {
+        bar: baz;
+    }
+}
+```
+
+### +above(value)
+
+限定高于目标尺寸或 **切片** 边界值。
+
+    Breakpoint: 0                 400px     600px     800px       1050px
+                ├───────────────────┼─────────┼──────────┼───────────┼────────>
+    切片 #:               1              2          3           4          5
+                ·                   ·         · above(3) ·           ·
+                                              ├───────────────────────────────>
+
+`value` 带单位时为具体的值，不带单位时为对应 **切片** 的值。
+
+stylus:
+
+```stylus
+// Block Mixin 与选择器的嵌套可按逻辑顺序书写
+// 最终生成的 @media 将会提至最顶层
++above(3)
+    .test
+        foo: bar
+
+// 也可以直接指定具体的值
++above(681px)
+    .tablet
+        color: #f00
+```
+
+生成的 CSS：
+
+```css
+@media (min-width: 601px) {
+    .test {
+        foo: bar;
+    }
+}
+
+@media (min-width: 681px) {
+    .tablet {
+        color: #f00;
+    }
+}
+```
+
+### +at(value)
+
+限定指定 **切片** 范围。`value` 为切片编号。
+
+    Breakpoint: 0                 400px     600px     800px       1050px
+                ├───────────────────┼─────────┼──────────┼───────────┼────────>
+    切片 #:               1              2          3           4          5
+                ·                   ·         ·   at(3)  ·           ·
+                                              ├──────────┤
+
+```stylus
+.test
+    foo: bar
+    +at(3)
+        bar: baz
+```
+
+生成的 CSS：
+
+```css
+.test {
+    foo: bar;
+}
+@media (min-width: 601px) and (max-width: 800px) {
+    .test {
+        bar: baz;
+    }
+}
+```
+
+### +between(from-value, to-value)
+
+限定目标尺寸或 **切片** 边界值的区间。
+
+    Breakpoint: 0                 400px     600px     800px       1050px
+                ├───────────────────┼─────────┼──────────┼───────────┼────────>
+    切片 #:               1              2          3           4          5
+                ·                   ·     between(3)     ·           ·
+                                    ├────────────────────┤
+
+`value` 带单位时为具体的值，不带单位时为对应 **切片** 的值。
+
+```stylus
+// breakpoint 可与 @media 嵌套使用
+@media (orientation: landscape)
+    .test
+        +between(2, 3)
+            foo: bar
+```
+
+生成的 CSS：
+
+```css
+@media (orientation: landscape) and (min-width: 401px) and (max-width: 800px) {
+    .test {
+        foo: bar;
+    }
+}
+```
+
+### +breakpoint(from-value, to-value)
+
+以上 `Block Mixin` 的底层实现，现用法同 `+between()`，**不建议** 直接使用。

From 139c67fa5453c47c28a50660f31c0b11d65cb778 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 16:17:07 +0800
Subject: [PATCH 60/62] =?UTF-8?q?=E5=B0=86=E6=B5=8B=E8=AF=95=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E7=A7=BB=E8=87=B3=E6=B5=8B=E8=AF=95=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 {demo => test/cases}/font/rider-icon.ttf  | Bin
 {demo => test/cases}/font/rider-icon.woff | Bin
 test/cases/typography.css                 |   2 +-
 test/cases/typography.styl                |   2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename {demo => test/cases}/font/rider-icon.ttf (100%)
 rename {demo => test/cases}/font/rider-icon.woff (100%)

diff --git a/demo/font/rider-icon.ttf b/test/cases/font/rider-icon.ttf
similarity index 100%
rename from demo/font/rider-icon.ttf
rename to test/cases/font/rider-icon.ttf
diff --git a/demo/font/rider-icon.woff b/test/cases/font/rider-icon.woff
similarity index 100%
rename from demo/font/rider-icon.woff
rename to test/cases/font/rider-icon.woff
diff --git a/test/cases/typography.css b/test/cases/typography.css
index 44fcace..952b135 100644
--- a/test/cases/typography.css
+++ b/test/cases/typography.css
@@ -30,7 +30,7 @@
 }
 @font-face {
   font-family: 'rider-icon';
-  src: url("../../demo/font/rider-icon.woff") format('woff'), url("../../demo/font/rider-icon.ttf") format('truetype');
+  src: url("font/rider-icon.woff") format('woff'), url("font/rider-icon.ttf") format('truetype');
   font-weight: 700;
   font-style: normal;
 }
diff --git a/test/cases/typography.styl b/test/cases/typography.styl
index 4f3ff7e..85bb80c 100644
--- a/test/cases/typography.styl
+++ b/test/cases/typography.styl
@@ -15,4 +15,4 @@
     clearfix()
 
 // font-face: found
-font-face('rider-icon', '../../demo/font/rider-icon', 700)
+font-face('rider-icon', 'font/rider-icon', 700)

From 6fc766182e9f472ce5038326017472ae4926f415 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 16:51:35 +0800
Subject: [PATCH 61/62] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
 =?UTF-8?q?=E4=B8=8EREADME?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md          | 19 +++++++++----------
 doc/code-style.md  | 10 ++++++----
 doc/connect.md     |  6 ++++++
 doc/demo-and-ut.md | 36 ------------------------------------
 doc/faq.md         |  4 ++--
 5 files changed, 23 insertions(+), 52 deletions(-)
 delete mode 100644 doc/demo-and-ut.md

diff --git a/README.md b/README.md
index ead3ba2..7565028 100644
--- a/README.md
+++ b/README.md
@@ -3,8 +3,13 @@ rider
 
 [![NPM version](https://img.shields.io/npm/v/rider.svg?style=flat-square)](https://npmjs.org/package/rider) [![Build Status](https://img.shields.io/travis/ecomfe/rider.svg?style=flat-square)](https://travis-ci.org/ecomfe/rider) [![License](https://img.shields.io/npm/l/rider.svg?style=flat-square)](./LICENSE) [![EFE Mobile Team](https://img.shields.io/badge/EFE-Mobile_Team-blue.svg?style=flat-square)](http://efe.baidu.com)
 
-`rider` 是基于 [Stylus](http://stylus-lang.com) 与后处理器、无侵入风格的 CSS 样式工具库。它提供了以下功能：
+`rider` 是基于 [Stylus](http://stylus-lang.com) 与后处理器、无侵入风格的 CSS 样式工具库。
 
+基于 `rider` 开发 **项目** 或 **UI 样式库**，能有效提高开发效率，延长代码生命周期。
+
+## 功能
+
+ * [特性](./doc/feature.md)
  * [样式初始化](./doc/initialize.md)
  * [顺时针简写](./doc/clockhand.md)
  * [缓动函数](./doc/easing.md)
@@ -16,20 +21,14 @@ rider
  * [响应式工具](./doc/breakpoint.md)
  * [Retina 支持](./doc/retina.md)
  * [辅助函数](./doc/helper.md)
- * ...
 
-基于 `rider` 开发 **项目** 或 **UI 样式库**，能有效提高开发效率，延长代码生命周期。
-
-## 参考
+## 使用
 
- * [特性](./doc/feature.md)
  * 安装与配置
-     * [在 `edp` 环境使用](https://github.com/ecomfe/edp-provider-rider)
-     * [在 `connect`/`express` 环境使用](./doc/connect.md)
- * [API](./doc/api.md)
+     * [edp 环境](https://github.com/ecomfe/edp-provider-rider)
+     * [connect/express 环境](./doc/connect.md)
  * [代码风格](./doc/code-style.md)
  * [常见问题](./doc/faq.md)
- * [DEMO与单元测试](./doc/demo-and-ut.md)
 
 ## License
 
diff --git a/doc/code-style.md b/doc/code-style.md
index e34657e..dc46ed3 100644
--- a/doc/code-style.md
+++ b/doc/code-style.md
@@ -22,7 +22,7 @@ Mixin 字母全小写，多个单词用 `-` 连接，如：
     relative
     border-width
 
-*说明：Mixin 的命名规则，是为了与 CSS 风格保持一致，以便对 CSS 进行增强。*
+Mixin 的命名规则，是为了与 CSS 风格保持一致，以便对 CSS 进行增强。
 
 ## 整体风格
 
@@ -33,14 +33,16 @@ Mixin 字母全小写，多个单词用 `-` 连接，如：
 initialize()
 
 .box
-    // 在给属性赋值、给 Mixin 传参数时，**用** `:`（冒号）分隔
-    // 语句的结尾 **不加** `;`（分号）
+    // 采用 4 空格缩进
+    // 在给属性赋值、给 Mixin 传参数时，用 `:`（冒号）分隔
+    // 语句的结尾不加 `;`（分号）
     display: block
     size: 80px 60px
     box-shadow: 2px 2px 5px #999
+
     // 使用 Function 时，加括号传递参数
     font-size: rem(14)
 
-// 当 Mixin 应用于 CSS root 时，加括号执行
+// 当 Mixin 应用于 CSS 根节点时，加括号执行
 font-face('rider-icon', 'font/rider-icon')
 ```
diff --git a/doc/connect.md b/doc/connect.md
index 46a35d8..ce02fd1 100644
--- a/doc/connect.md
+++ b/doc/connect.md
@@ -54,3 +54,9 @@ initialize()
 
 // etc...
 ```
+
+## 后处理器
+
+`rider` 是一个面向标准 CSS 输出的样式库，需要与 `Autoprefixer` 等后处理器配合使用。
+
+请参考 [`autoprefixer-core`](https://github.com/postcss/autoprefixer-core)、[css-mqpacker](https://github.com/hail2u/node-css-mqpacker) 的文档对后处理器进行配置。
diff --git a/doc/demo-and-ut.md b/doc/demo-and-ut.md
deleted file mode 100644
index 9c5f6cf..0000000
--- a/doc/demo-and-ut.md
+++ /dev/null
@@ -1,36 +0,0 @@
-DEMO与单元测试
-===
-
-发布版是不包含 `demo` 和 `test` 的，所以需要先将仓库 clone 到本地：
-
-```shell
-$ git clone https://github.com/ecomfe/rider.git
-```
-
-之后进入项目根目录，安装依赖的 package：
-
-```shell
-$ npm install
-```
-
-## DEMO
-
-在仓库根目录执行：
-
-```shell
-$ npm run demo
-```
-
-访问网址：
-
-    http://localhost:8888
-
-## 测试用例
-
-执行测试：
-
-```shell
-$ npm test
-```
-
-测试用例在 `test/cases` 目录中，`.styl` 文件与同名的 `.css` 文件对应。
diff --git a/doc/faq.md b/doc/faq.md
index e8f23f4..9299b6a 100644
--- a/doc/faq.md
+++ b/doc/faq.md
@@ -1,13 +1,13 @@
 常见问题
 ===
 
-## @require 和 @import 用哪个？
+### @require 和 @import 用哪个？
 
 根据需求而定，通常使用 `@require`。
 
 `@require` 多次引入同一文件时只会执行一次，`@import` 每次都会执行。
 
-## RIA项目如何组织各视图样式？
+### RIA项目如何组织各视图样式？
 
 可以用 `CSS Class` 做命名空间，配合 `@require` 来拆分文件组织代码。但要让级别扁平化，避免多级嵌套：
 

From 12d25e85588059846c218823a760057436e51ff7 Mon Sep 17 00:00:00 2001
From: Firede <firede@firede.us>
Date: Wed, 17 Jun 2015 17:11:16 +0800
Subject: [PATCH 62/62] release 2.0.0

---
 History.md     |  7 ++++---
 doc/connect.md |  2 +-
 doc/faq.md     | 14 +++++++++++---
 package.json   |  4 ++--
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/History.md b/History.md
index 0410e8b..954a3a2 100644
--- a/History.md
+++ b/History.md
@@ -1,9 +1,9 @@
 
-2.0.0 / 2015-06-15
+2.0.0 / 2015-06-17
 ==================
 
  * **Breaking Change** 改进 Function：`bg()`, `ir()` [#18](https://github.com/ecomfe/rider/issues/18)
- * **Breaking Change** 改进 Root Mixin：`font-face()` [#16](https://github.com/ecomfe/rider/issues/16)
+ * **Breaking Change** 改进 Root Mixin：`font-face()` [#16](https://github.com/ecomfe/rider/issues/16) [#24](https://github.com/ecomfe/rider/issues/24)
  * **Breaking Change** 改进 Block Mixin：`+breakpoint()`，移除组合能力，迁出 retina 支持 [#19](https://github.com/ecomfe/rider/issues/19)
  * **Breaking Change** 移除：retina 支持中的浏览器兼容代码 [#17](https://github.com/ecomfe/rider/issues/17)
  * **Breaking Change** 移除 全局变量：`$-image-dppx`，retina 图片机制已更新
@@ -13,7 +13,7 @@
  * 增加 全局变量：`$-image-dppx-quality-first` 作为 retina 图片质量优先模式的开关
  * 增加 全局变量：`$-unit-precision` 作为单位转换的小数点精度控制
  * 增加 Function：`bg2x()`, `bg3x()`, `bg-dppx()` [#23](https://github.com/ecomfe/rider/issues/23)
- * 增加 Function：`file-exists()`, `is-url()`, `get-retina-src` [#15](https://github.com/ecomfe/rider/issues/15)
+ * 增加 Function：`file-exists()`, `is-url()`, `get-retina-src()` [#15](https://github.com/ecomfe/rider/issues/15)
  * 增加 Mixin：`normalize()` 作为布局初始化的补充 [#8](https://github.com/ecomfe/rider/issues/8)
  * 增加 Mixin：`circle()` 生成圆形或椭圆
  * 增加 Block Mixin：`+retina()` [#20](https://github.com/ecomfe/rider/issues/20)
@@ -21,6 +21,7 @@
  * 改进 Mixin：`animate()` 升级至 animate.css 3.2.6 版 [#5](https://github.com/ecomfe/rider/issues/5)
  * 改进：测试脚本启用 inline diff [#7](https://github.com/ecomfe/rider/issues/7)
  * 改进：简化 demo 的支持部分 [#6](https://github.com/ecomfe/rider/issues/6)
+ * 改进：文档重新经过深入整理 [#21](https://github.com/ecomfe/rider/issues/21)
 
 0.4.4 / 2014-11-06
 ==================
diff --git a/doc/connect.md b/doc/connect.md
index ce02fd1..8078d42 100644
--- a/doc/connect.md
+++ b/doc/connect.md
@@ -59,4 +59,4 @@ initialize()
 
 `rider` 是一个面向标准 CSS 输出的样式库，需要与 `Autoprefixer` 等后处理器配合使用。
 
-请参考 [`autoprefixer-core`](https://github.com/postcss/autoprefixer-core)、[css-mqpacker](https://github.com/hail2u/node-css-mqpacker) 的文档对后处理器进行配置。
+请参考 [autoprefixer-core](https://github.com/postcss/autoprefixer-core)、[css-mqpacker](https://github.com/hail2u/node-css-mqpacker) 的文档对后处理器进行配置。
diff --git a/doc/faq.md b/doc/faq.md
index 9299b6a..fe58ab6 100644
--- a/doc/faq.md
+++ b/doc/faq.md
@@ -7,11 +7,11 @@
 
 `@require` 多次引入同一文件时只会执行一次，`@import` 每次都会执行。
 
-### RIA项目如何组织各视图样式？
+### SPA项目如何组织各视图样式？
 
-可以用 `CSS Class` 做命名空间，配合 `@require` 来拆分文件组织代码。但要让级别扁平化，避免多级嵌套：
+可以用 `CSS Class` 做命名空间，配合 `@require` 来拆分文件组织代码。但请注意级别扁平化，避免太多嵌套级别：
 
-```haml
+```stylus
 .view-detail
     @require 'detail'
 .view-detail-comment
@@ -20,3 +20,11 @@
 .view-list
     @require 'list'
 ```
+
+### 生成的 Media Query 太多怎么办？
+
+Breakpoint 让响应式代码的可读性更好，但会生成较多的 Media Query，建议使用后处理器 [css-mqpacker](https://github.com/hail2u/node-css-mqpacker) 进行优化，注意合并规则中的[顺序问题](https://github.com/hail2u/node-css-mqpacker#known-issues)。
+
+### 其他问题？
+
+欢迎给我们 [提 issue](https://github.com/ecomfe/rider/issues/new)。
diff --git a/package.json b/package.json
index 6e821b1..4384d68 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "rider",
-    "version": "2.0.0-alpha.2",
-    "description": "Rider is a CSS library to focus on Mobile Web, build on top of Stylus.",
+    "version": "2.0.0",
+    "description": "Rider 是一个基于 Stylus 与后处理器、无侵入风格的 CSS 样式工具库",
     "maintainers": [
         {
             "name": "Firede",