# fis3-parser-toutiao-less-ui-spec

> 头条UI规范less版，集成fis3的parser插件

Latest version **1.0.6** (published 2017-06-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install fis3-parser-toutiao-less-ui-spec
pnpm add fis3-parser-toutiao-less-ui-spec
yarn add fis3-parser-toutiao-less-ui-spec
bun add fis3-parser-toutiao-less-ui-spec
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2017-06-05 |
| First published | 2016-09-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | guoshuyan |
| Maintainers | shuyankwok, winnerhp |
| Keywords | ui, spec, less, toutiao, fis3, parser |

## Links

- npm: https://www.npmjs.com/package/fis3-parser-toutiao-less-ui-spec
- Repository: git@code.byted.org:fe/less-ui-spec
- npm.io page: https://npm.io/package/fis3-parser-toutiao-less-ui-spec

## Dependencies (1)

- [less](https://npm.io/package/less.md) latest

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2017-06-05
- 1.0.5 — 2017-05-09
- 1.0.4 — 2017-05-07
- 1.0.3 — 2016-09-20
- 1.0.2 — 2016-09-07
- 1.0.1 — 2016-09-06
- 1.0.0 — 2016-09-06

## README

LESS-ui-spec
-----
根据[《今日头条UI设计规范（新版）》](https://wiki.bytedance.com/pages/viewpage.action?pageId=6883201)和[《今日头条UI设计颜色控件规范（研发版）》](https://wiki.bytedance.com/pages/viewpage.action?pageId=31395143)实现

# 使用方法
具体的规则请参考代码简述
通过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

[Codepen](http://codepen.io/shuyankwok/pen/Pzqzej)

# 代码简述

## 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

---
_Source: https://npm.io/package/fis3-parser-toutiao-less-ui-spec · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._