LESS-ui-spec
根据《今日头条UI设计规范(新版)》和《今日头条UI设计颜色控件规范(研发版)》实现
使用方法
具体的规则请参考代码简述 通过npm安装fis3插件:
npm install --save fis3-parser-toutiao-less-ui-spec
然后在fis-conf.js里配置
fis.match('*.less', {
parser: fis.plugin('toutiao-less-ui-spec')
}, 300);
即可使用。
playground
代码简述
variables.less
根据UI规范,所有的变量分为:
- 字/word,对应CSS属性为
color
- 线/line,对应CSS属性为
border-color
,考虑到大多数情况均为实线描边,故将border-style: solid
写死,加上边线宽度可配置(默认为1px) - 面/plane,对应CSS属性为
background-color
.title {
.word1(); // 正常使用,会有日、夜、日按压、夜按压四种状态
.plane4(); // 按压态默认使用`:active`伪类
}
.banner {
.plane4(pressing); // 传入参数为按压态的class,同样有四种状态
}
article {
.word13(no-active); // 通过`no-active`参数控制只产生日、夜两种状态
.plane2(no-active); // 同时意味着不能使用`no-active`作为按压态的class名
}
.button {
.line3(); // 正常使用,产生1px宽度的实线描边,有四种状态
}
.bold-button {
.line2(2px, press); // 边线宽度为2px,按压状态的class为press
}
tag {
.line3(1px, no-active); // 无按压状态
}
此外,还提供了如@new-blackgray-1
,@line8-color
等变量方便使用。
utilities.less
提供了多种便捷工具
.text-overflow(@lines);
文字截断函数,可根据行数截断(只支持webkit).triangle(@arrowDirection, @color, @height, @width)
实心无边线三角 ▲▼,可配置选中颜色.half-pixel-border(@linetype, @borderwidth, @borderradius)
半像素边线,采用scale方法实现,支持2x/3x。配合.clear-half-pixel-border ()
清除半像素边线.clearfix
清除浮动
具体的使用方法可以是
button {
.half-pixel-border(line1, 1px, 3px); // 实现半像素线1边线,带3px圆角
&.no-border {
.clear-half-pixel-border(); // 去掉边线
}
}
.wrapper {
.clearfix(); // 清除浮动
}
p {
.text-overflow(2); // 2行省略
}
需要注意的是,由于公用了after伪元素,清除浮动不能和半像素边线同时使用。
keyframes.less
提供了一些动画关键帧
rotate-z-360
Z轴向360度旋转
components.less
根据规范实现了部分UI组件,目前有
- ui-button
- ui-subscript
可以这样使用
.buy {
.ui-button();
}
tt-rules.less
根据规范实现了字号、间距等的适配,目前有
.tt-font-size (@fontsize)
适配小/中/大/特大字号.tt-vertical-margin (@margintop, [@marginbottom])
适配小/中/大/特大字号的边距.tt-size (@property, @value)
iPhone5机型下对应的尺寸要*0.9.tt-background-image (@imageurl, [only-day])
拼接2x/3x、日/夜间背景图片
TODOs
- 提供对iconfont的编译支持
- variables提供编译功能,减少修改时的工作量
- 此文档后续介入JSDoc