ehome-visual-standard
Visual standard for ehome web developer, including a number of CSS style about fonts and colors.
Last updated a year ago by ehome .
ISC · Original npm · Tarball · package.json
$ cnpm install ehome-visual-standard 
SYNC missed versions from official npm registry.

左邻视觉规范

1. 安装

npm install ehome-visual-standard --save-dev

2. 文字样式

文字样式通过类名 class 的形式调用,类名以 eh- 开头。

const text = <p className="eh-t1">Hello, Sinker</p>

3. 色库取值

对于 UI 设计稿中给出的色号(例 C001),通过项目的相对路径引用该项目下的 less 文件,获取到色值变量的引用。

@import '~ehome-visual-standard/styles/eh-normalize-HD.less';

.c001 {
  color: @c016;
  background-color: @c001;
}

4. 项目色

4-1. 在项目入口的调用

在左邻运营后台,可以在模块【域空间配置】中设置每一个域空间的主题色,通过后台提供的接口,我们可以在项目中获取项目的主题色。

参考杰哥的 主题配色 中提供的解决方案,封装了 init.js 方法用于设置主题色。

init.js 中通过异步请求获取主题色并利用 css-vars-ponyfill 设置主题色,对接时直接在项目的样式表使用即可。

调用方法只需要在项目中 public/index.html 中引入第一个 script 标签前引入 init.js 及其依赖脚本文件。

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@1"></script>
<script src="./init.js"></script>

4-2. 在 .less 中的调用

.less 文件中声明变量或者直接使用 var(--theme) 均可以。

.eh-btn {
  // some styles...
  background-color: @eh-theme;
  color: #fff;
  &:active, &:hover {
    background-color: @eh-pressed;
  }
  &[disabled] {
    background-color: @eh-bg_invalid;
  }
}
.eh-text {
  // some styles...
  color: @eh-text_invalid;
}
.eh-div {
  // some styles...
  background-color: @eh-bg_opacity;
}

如果项目中不需要引入视觉规范包的 .less 文件,则需要在项目自身顶部的 less 文件中声明相关的项目色变量。

@eh-theme: var(--theme);
@eh-pressed: var(--pressed);
@eh-bg_invalid: var(--bg_invalid);
@eh-text_invalid: var(--text_invalid);
@eh-bg_opacity: var(--bg_opacity);

注意:项目中的项目色变量声明字段名不能修改。

项目色的获取是异步的,要考虑到异步调用结束前的页面状态,应避免主题色设置后的页面抖动

4-3. 对 antd-mobile 主题色的修改

在规范包中 styles 目录下的样式文件(eh-normalize-HD.lesseh-normalize.less)已经对相关的主题色变量进行覆盖

对于 antd 组件的样式修改,需要业务开发单独在模块中设置样式去覆盖,即根据模块使用到的组件,给组件的样式进行定制覆盖。

@class-prefix: eh-home;
.@{class-prefix} {
  .am-button {
    background-color: @eh-theme;
    border-color: @eh-theme;
  }
  .am-button-active {
    background-color: @eh-pressed;
    border-color: @eh-pressed;
  }
  .am-button-disabled {
    background-color: @eh-bg_invalid;
    color: #fff;
  }
}

Current Tags

  • 1.0.8                                ...           latest (a year ago)

8 Versions

  • 1.0.8                                ...           a year ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 6
Last Day 0
Last Week 2
Last Month 30
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2016 © taobao.org |