@y-fe/ui-system

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; }