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
107
108
109
110
111
112
113
114
115
116
117
118
|
Building Blocks
===============
Taxonomy
--------
* `action_menu.css`: context menus
* `buttons.css`: common buttons
* `confirm.css`: dialog boxes with message + accept/dismiss buttons
* `edit_mode.css`: edition panels with a dialog-like button toolbar
* `headers.css`: common header bars (title + navigation buttons)
* `input_areas.css`: common input areas (e.g. search bars)
* `status.css`: notification toasters
* `switches.css`: checkboxes, radio buttons, ON/OFF switches
Specific Attributes
-------------------
A `data-type` attribute is used when the `type` and `role` attributes are not specific enough. Here’s the list of its possible values.
* `action`: used in `action_menu.css`, title + action selection + accept/dismiss buttons
* `confirm`: used in `confirm.css`, message + accept/dismiss buttons
* `edit`: used in `edit_mode.css`, edition panel with dialog-like button toolbar
* `object`: used in `action_menu.css`, action selection + accept/dismiss buttons
* `switch`: used in `switches.css`, turns a checkbox into an ON/OFF switch
Class Name Usage
----------------
We try to avoid arbitrary class names as much as possible, but sometimes we have to use some — here’s the list.
### Common Class Names
**Icons**
* `.icon`
* `.icon-add`
* `.icon-back`
* `.icon-close`
* `.icon-dialog`
* `.icon-edit`
* `.icon-menu`
* `.icon-user`
* `.icon-view`
**Skins**
* `.skin-dark`
* `.skin-organic`
**Buttons**
* `.danger`: dangerous choice, e.g. delete something
* `.recommend`: default/recommended choice, should be safe
**Other**
* `.action`: applies to fieldset elements (explanation needed)
* `.bottom`: bottom-positioned element, applies to search forms
* `.compact`: compact list, applies to button lists
* `.full`: full-width element, applies to buttons or search forms
### Usage by Block
**action_menu.css**
None
**buttons.css**
* `.compact`
* `.danger`
* `.icon-dialog`
* `.icon-view`
* `.recommend`
**confirm.css**
* `.full`
**edit_mode.css**
* `.danger`
* `.full`
* `.icon`
* `.recommend`
**headers.css**
* `.icon`
* `.icon-add`
* `.icon-edit`
* `.icon-close`
* `.icon-back`
* `.icon-menu`
* `.icon-user`
* `.skin-dark`
* `.skin-organic`
**input_areas.css**
* `.action` (explanation needed)
* `.bottom`
* `.full`
**status.css**
None
**switches.css**
* `.danger`
Future improves
----------------
* Use `[data-icon="name"]` instead of `.icon.icon-name`
|
