@y-fe/ui-system
v0.0.7
Published
ui-system from YFE TEAM
Downloads
5
Readme
UI-system
这是什么?
ui-system
是来自阅文前端团队前端 UI 设计系统。
用于解决初始项目的前端样式问题,也属于前端规范。
- 我需要一份 reset css?
- 如何管理全局的颜色,间距,z-index?
- 我不想需要 clearfix 的样式,需要去网上找,或者拷贝代码。
如何使用?
npm 安装
$ npm i @y-fe/ui-system;
$ yarn add @y-fe/ui-system;
在你的全局基础样式文件中引入
import "@y-fe/ui-system/lib/reset.css";
# import "@y-fe/ui-system/lib/reset.mobile.css";
import "@y-fe/ui-system/lib/acss.css";
import "@y-fe/ui-system/lib/_mixin.scss";
目录结构
lib/
├── _mixin.less // 常用 mixin less 版本
├── _mixin.scss // 常用 mixin scss 版本
├── acss.css // 常用的 Atomic css
├── reset.css // 基础的 reset
└── reset.mobile.css // 基础的 reset mobile
Mixin Api
以下方法需要内嵌到 CSS选择器 中使用
| mixin名字 | 参数 | notes |
|:--|:--|:--|
|clearfix
| - | 清除浮动 |
|ell
| - | 单行文本点点点 |
|ells
| [行数:2,行高:null ] | 多行文本显示点点点 |
|placeholder
| [ #999
] | 设置输入框placeholder颜色 |
|selection
| [ 背景色, 文字颜色 ] | 设置文本选择颜色 |
|margins
| [数字列表,单位:px] | 基于列表生成4个方向的外间距 |
|paddings
| [数字列表,单位:px] | 基于列表生成4个方向的内间距 |
Scss 使用
import "@y-fe/ui-system/lib/_mixin.scss";
.clearfix{
@include clearfix;
}
.ell{
@include ell;
}
.ell2row{
@include ells(2, 24px);
}
input, textarea{
@include placeholder(2, 24px);
}
@include selection(#000000, #ffffff);
@include margins((8:8px, 16:16px, 32:32px));
@include paddings((8:8px, 16:16px, 32:32px));
Less 使用
import "@y-fe/ui-system/lib/_mixin.less";
.clearfix{
#clearfix;
}
.ell{
#ell;
}
.ell2row{
#ells(2, 24px);
}
input, textarea{
#placeholder(2, 24px);
}
@include #selection(#000000, #ffffff);
@marginsName: 8, 16, 32;
@marginsValue: 8px, 16px, 32px;
#margins(@marginsName, @marginsValue);
@paddingName: 8, 16, 32;
@paddingValue: 8px, 16px, 32px;
#paddings(@paddingName, @paddingValue);
全局参数
这里以 scss
举例,less
同理。
- 颜色以
c_
开头; z-index
以z_
开头;
// 主色
$c_primary:blue;
$c_secondary:gray;
$c_danger:red;
$c_warning:yellow;
$c_succcess:green;
// 文字颜色
$c_xl: #000;
$c_l: #222;
$c_m: #333; // 文字主色
$c_s: #666;
$c_xs: #999;
// z-index
$z_header: 99;
$z_dialog: 200;
$z_toast: 300;
ACSS
// 基于以上参数创建 Atomic css
.c_primary{ color: $c_primary; }
.c_secondary{ color: $c_secondary; }
.c_danger{ color: $c_danger; }
.c_warning{ color: $c_warning; }
.c_succcess{ color: $c_succcess; }
.c_xl{ color:$c_xl; }
.c_l{ color:$c_l; }
.c_m{ color:$c_m; }
.c_s{ color:$c_s; }
.c_xs{ color:$c_xs; }