Nil Packet Minimizer

    @y-fe/ui-system

    0.0.7 • Public • Published

    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-indexz_开头;
    // 主色
    $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; }

    Install

    npm i @y-fe/ui-system

    DownloadsWeekly Downloads

    1

    Version

    0.0.7

    License

    MIT

    Unpacked Size

    25 kB

    Total Files

    11

    Last publish

    Collaborators

    • mengyan
    • ziven27