UNPKG

unicorn-ui

Version:

This is a used to develop the background management system based on the react to develop a set of UI framework

github.com/xiaoking/unicorn-ui

xiaoking/unicorn-ui

106 lines (84 loc) • 3.21 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
title: unicorn样式规范 date: 2016-01-07 10:57:15 tags: - unicorn --- 样式文件组织 ============= xx_component.less ======= 组件的样式文件，比如start.less 、 button.less **注意事项** 这类样式文件里**不需要引入任何less文件** ，unicorn.less里会事先引入variables.less,mixins.less variables.less ======= 样式变量文件，这里只放可能会变化的属性（允许别人定制的，可以理解为和皮肤相关的）。 **注意事项** 每当添加新的component时，务必注意用注释来表明是哪一个组件的样式并用分割线隔开，如下图 ```less // Buttons // ------------------------------- @button-color: #222; @button-block-margin: 10px; @button-border-radius: 2px; @button-border-width: 1px; @button-font-size: 18px; @button-height: 42px; @button-padding: 25px; @button-small-font-size: 12px; @button-small-height: 25px; @button-small-padding: 15px; @button-light-bg: @light; @button-light-text: #666; @button-light-border: #bbb; @button-light-active-border: #bbb; @button-balanced-bg: @balanced; @button-balanced-text: #fff; @button-balanced-border: @balanced; @button-balanced-active-border: #a2a2a2; @button-default-bg: @button-assertive-bg; @button-default-text: @button-assertive-text; @button-default-border: @button-assertive-border; @button-default-active-border: @button-assertive-active-border; // Grids // ------------------------------- @grid-padding-width: 10px; @grid-responsive-sm-break: 567px; // smaller than landscape phone @grid-responsive-md-break: 767px; // smaller than portrait tablet @grid-responsive-lg-break: 1023px; // smaller than landscape tablet ``` **主题色** 按照视觉图整理出的常用颜色 颜色相近的就直接用这几个颜色，比如switch开关、绿色的label以及提示icon，都统一成@balanced这个色值 ```less @light: #fff; @positive: #387ef5; @calm: #11c1f3; @balanced: #4bd762; @energized: #ffc900; @assertive: #ee5511; @lightbrown: #a29690; @lightgray: #cccccc; ``` mixins.less ======= 用来统一引入 mixin文件夹下的xx_mixin.less **注意事项** 写新的组件是请把公共代码抽象成mixin，然后记得在这个文件里进行引入，目前分了3类，请把所有component相关的mixin归类在Components注释下 ```less // Components @import "mixins/button.less"; // Layout @import "mixins/grid.less"; //Basic @import "mixins/basic.less"; ``` mixins/xx_mixin.less ======= 一般情况下每一个component都会对应一个mixin 新增1个组件样式的开发流程 ======= 在variables.less里设置好变量 在mixins文件夹里写对映的mixin 在mixins.less里引入对映的mixin 在unicorn.less里引入对映的组件less文件