ecomfe / rider

Rider 是一个基于 Stylus 与后处理器、无侵入风格的 CSS 样式工具库

rider

rider 是基于 Stylus 与后处理器、无侵入风格的 CSS 样式工具库。

基于 rider 开发 项目 或 UI 样式库，能有效提高开发效率，延长代码生命周期。

功能

• 特性
• 样式初始化
• 顺时针简写
• 缓动函数
• 图片
• 排版
• 形状
• 动画
• 单位转换
• 响应式工具
• Retina 支持
• 辅助函数

使用

• 安装与配置
  • edp 环境
  • connect/express 环境
• 代码风格
• 常见问题

License

MIT © Baidu Inc.

rider's Issues

图片 retina 支持的改进

使用设置背景图片的 mixin 后，读取本地图片路径，若发现有带 @2x、@3x 后缀的同名文件，则自动增加包含 media query 的支持代码。

font-face 根据本地字体文件类型自动生成 css

比如，本地只有 woff 和 ttf 格式的字体文件，生成出的 CSS 就只包含这两种类型的引用。

breakpoint 去除 retina, screen, portrait 等逻辑

现在的 Stylus 已有比较靠谱的嵌套 @media 合并功能，所以组合式的用法就显得多余了，如：

.box
    +breakpoint('screen', +below(4))
        foo: bar

实际上等价于：

.box
    @media screen
        +below(4)
            foo: bar

虽说多了一层缩进，但从理解上会更简单，所以 2.0 中将废除第一段代码中的用法。

Echart在android的webview中不显示

Echart在android的webview中偶尔显示，偶尔不显示，不知道这是什么问题？请大神指教

静态资源 md5 版本号生成

增加图片、字体等静态资源的版本号自动生成功能。

2.0 版 DEMO

目测现在的 DEMO 已经被玩坏了，需要写个新的 DEMO 网站。

demo 部分的 webserver 改用 gulp 实现

RT，替换为社区常用的构建工具作为示范。

能在哪些浏览器上正常运行？

简单描述一下对各浏览器的支持程度

2.0 版文档

重写 2.0 版的文档与教程。

• 特性
• 样式初始化
• 顺时针简写
• 缓动函数
• 图片
• 排版
• 形状
• 动画
• 单位转换
• 响应式工具
• Retina 支持
• 辅助函数
• 全局配置
• 安装与配置
• FAQ
• 代码风格

retina 支持去除浏览器兼容

autoprefixer-core 已经支持对 min-resolution 的处理，去除此部分的兼容代码。

增加 +retina() block mixin

由于 breakpoint 中移除了 retina 的支持，需要新增名为 +retina() 的 block mixin：

// 无参数时，以 1.5dppx 生成 media query
// 认为是通常意义上的 retina 设备
+retina()
    .test-1
        foo: bar

// 接收一个无单位的 unit 类型参数，代表 dppx
+retina(2)
    .test-2
        foo: bar

生成代码为：

@media (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
  .test-1 {
    foo: bar;
  }
}
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .test-2 {
    foo: bar;
  }
}

兼容性可由 Autoprefixer 处理。

font-face 支持 inline 模式

较小的图标字体或子集化字体，可通过 inline 的方式引入以节省链接数。

基于 flex 的布局支持

参考 polymer 中 layout attributes 的布局支持，使用方式可能会是这样：

<div class="container">
    <div>Alpha</div>
    <div class="beta">Beta (flex)</div>
    <div>Gamma</div>
</div>

.container
     horizontal()
.beta
    flex()

Do not ignore the .idea folder

See https://github.com/github/gitignore/blob/master/Global/JetBrains.gitignore
The .idea folder includes many files which are meant to be shared between developers.

支持 HWB 颜色的转换

增加对「CSS Color Module Level 4」中 HWB 颜色格式的支持。

加入 normalize

为了支持更多的使用场景，加入 normalize 作为初始化的另一选项。

增加探测文件是否存在、探测是否是Url的API

增加 file-exists(file) 与 is-url(path) 两个 API。

animate 升级至最新版本

现在的 animate 部分的版本较老，升级至新版本的 animate.css

增加对 named hue 的支持

RT.

移除 font-face 的 $version-suffix 参数

版本更新应该是后处理器管的事儿，靠手工维护根本不靠谱。

done.

test 粒度细化

现在的 test 粒度太粗，出了问题很难定位，需要更好的测试代码

retina 设备下的 1px 问题

在 2.0 版需要想想是否在 rider 层面解决。

font-face 支持 font-weight 与 font-style 的设置

一般在用字体图标的时候，font-weight 与 font-style 设置为 normal 就好了。
但是引入一些英文字体时，会有定义粗体、斜体的需求，所以加两个可选参数支持这种场景。

rem 等单位转换可定义截取的小数点位数

现在单位换算会自动截取 3 位小数，有时候会不够精确，此处需要改进。

增加 bg2x(), bg3x()...

使用传入图片，并自动计算合适的 background-size 尺寸。

网格系统支持

RT