This repository has been archived by the owner on Jan 10, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathdocs.html
366 lines (315 loc) · 16.9 KB
/
docs.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>YUI Skin Builder - Documentation</title>
<link rel="stylesheet" type="text/css" href="http://necolas.github.com/normalize.css/1.0.2/normalize.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.9.0pr1/build/cssgrids-responsive/cssgrids-responsive-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssbutton/cssbutton-min.css">
<link rel="icon"
type="image/png"
href="http://http://yui.github.com/skinbuilder/assets/images/favicon.png">
<style>
body {
font-family: sans-serif;
color: #333;
}
.header {
background: black;
min-height: 80px;
margin: 0;
color:white;
padding: 30px 20px;
}
.header h2 {
font-weight:300;
color: #666;
margin:0;
}
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", sans-serif;
font-weight: 300;
}
.content {
padding: 0 30px 2em;
}
.content h2 {
color:#2B474F;
margin:50px 0 20px 0;
font-weight:bold;
}
.gist {
margin-top:25px;
}
.gist::before {
content: "Code:";
margin-bottom: 10px;
display: block;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", sans-serif;
font-weight: 300;
}
/* Specific to this page */
#list-control-tabs img, #use-pattern img {
float: right;
margin: 0 0 1em 0.7em;
}
#list-control-tabs li, #use-pattern li, .clear-floats {
clear: both;
}
#list-control-tabs li, #use-pattern li {
margin-bottom: 1em;
border-top: 1px solid #E0E0E0;
padding: 0.5em 0 0;
}
#main-colors {
margin: 0;
padding: 0;
}
#main-colors li {
display: inline-block;
*display: block;
/* inline block hack for IE */
*zoom: 1;
width: 91px;
font-size: 80%;
color: #808080;
text-align: center;
}
.separator {
border-top: solid 1px #ccc;
margin: 2em 0;
}
</style>
</head>
<body>
<div class="header y-u-1">
<h1 class="yui3-u-1">YUI Skin Builder - Documentation</h1>
<h2 class="yui3-u">This is a tool for creating or modifying YUI 3 Widget skins.</h2>
</div>
<div class="content">
<h2>Overview</h2>
Use this tool to create or modify skins for YUI Widgets, with real-time previewing.
A skin is the visual presentation of something, not its features or function.
Use <a href="http://yui.github.com/skinbuilder">YUI Skin Builder</a>.
<h2>Main Parts of the Tool</h2>
<p>
There are 2 main parts to the Skin Builder UI.
<ul>
<li>Control Tabs</li>
<li>Skin Preview</li>
</ul>
</p>
<h3>Control Tabs</h3>
Toward the top of YUI Skin Builder is an area with 5 tabs
<ul id="list-control-tabs">
<li>
<img src="assets/images/cap_style.png" width="561" height="115" alt="Controls for changing colors, padding, radius, etc."/>
<strong>Style:</strong> This displays buttons for changing the key colors of the skin. You can change the border-radius, padding, and text contrast styles in the skin.
</li>
<li>
<img src="assets/images/cap_scheme.png" width="561" height="124" alt="Color scheme radio button choices"/>
<strong>Schemes:</strong> From this tab, you can select one of several color schemes, or start creating your own custom scheme. Color schemes set different relationships between the colors shown in the palette tab. More explanation about schemes later.
</li>
<li>
<img src="assets/images/cap_items.png" width="561" height="97" alt="Items tab with checkboxes for modules to skin"/>
<strong>Items:</strong> This contains checkboxes for each of the available widgets and modules that are available for skinning.
</li>
<li>
<img src="assets/images/cap_code.png" width="561" height="236" alt="CSS generated code"/>
<strong>Code:</strong> This tab contains text area controls that display the real-time generated CSS code for your skin as you make modifications. You can also change the skin name, which marks all the selectors in the CSS code.
<p>The Code tab also includes a Link button which captures all the current skin settings into a URL. You can save it somewhere or bookmark it to get back to where you left off. You can also share it with others.</p>
</li>
</ul>
<h3 class="clear-floats">Skin Preview</h3>
At the bottom of Skin Builder is an array of real instances of each of the YUI 3 Widgets selected in the "Items" tab. Their skin/appearance is continually updated with the latest changes you make in the Control Tabs.<br>
<img src="assets/images/cap_preview.png" width="706" height="525" alt="YUI Widgets Preview"/>
<h2>A Typical Use Pattern</h2>
<ol id="use-pattern">
<li>During all the following steps, keep an eye on the Widget previews, evaluating the results of your changes.</li>
<li>Open the Style tab.</li>
<li><img src="assets/images/cap_master_color_button.png" width="434" height="198" alt="Edit Master Color... button and color picker"/>Click Edit Master Color... button. The color you select should match a very dominant color from the app these widgets will appear in. For example if these skinned widgets will go on a site that has green as a high emphasis, attention attracting color, choose that same green from this color picker. You'll notice the other colors in the palette change automatically. They change to relative colors based on relationships to the "highest/master" color. These relationships are called "schemes".</li>
<li><img src="assets/images/cap_page_color_button.png" width="434" height="198" alt="Edit Page Color... button and color picker"/>Click the Edit Page Color... button (if your page background color isn't white). From the Color Picker that pops up, select a color that matches the background color the widgets will display on. This is commonly the page background, but may be a container object that widgets will appear in. You can also enter the color directly with a hex value if you know it.</li>
<li><img src="assets/images/cap_sliders.png" width="452" height="125" alt="sliders for text padding, border-radius, and contrast"/>Make any changes needed to the padding and border-radius styles. You can adjust the contrast between the text and its background. This adjustment can help maintain readability.</li>
<li><img src="assets/images/cap_scheme.png" width="561" height="124" alt="Color scheme radio button choices"/>Click the Schemes tab. Try other schemes to see which works best for your site. If you choose a dark background scheme, you may need to select a different "highest/master" color from the palettes tab</li>
<li><img src="assets/images/cap_code.png" width="561" height="236" alt="CSS generated code"/>Edit the Skin Name suffix. In the markup of your site or app where widgets are to use this skin, replace the class "yui3-skin-sam" with the matching new class name, such as, "yui3-skin-myskinnamesuffix".</li>
<li>Select the contents of the textarea labeled "CSS for all widgets". Paste this code into the file wherever you want your CSS to be referenced from. If you don't need CSS skin code for all the YUI 3 widgets, you can pick out and use only the sections of the CSS you do need.</li>
<li>
Click the Link button shown in step 7. Save this URL somewhere so you can make future edits starting where you left off. Share it with others.
</ol>
<h2>Examples</h2>
<p>Here are a couple screenshots of using YUI Skin Builder to edit/create YUI Widget skins to match existing sites.
</p>
<div class="yui3-g">
<div class='yui3-g-responsive'>
<div class="yui3-u-1 centered">
<img class="yui3-u" alt="Yahoo! Shine and YUI Skin Builder" src="assets/images/yahoo_shine.jpg" width="100%"/>
</div>
<div class="separator">
</div>
<div class="yui3-u-1 centered">
<img class="yui3-u" alt="Yahoo! Movies and YUI Skin Builder" src="assets/images/yahoo_movies.jpg" width="100%"/>
</div>
</div>
</div>
<h2>How Does It Work?</h2>
Successfully applying colors to objects (skinning) is a process of applying the colors that will give the objects their correct visual emphasis for their function relative to other objects. Skin Builder provides a palette of colors arranged by emphasis, and then logically maps those colors onto the backgrounds, borders, and text of each part of YUI widgets and components according to their function. It then allows you to manipulate the color palette in several ways that provide infinite variety of colors while giving instant preview feedback.
<h3>Key color</h3>
This is a user-selected color. It's the color that has the most emphasis in the skin. It will be used as the background color of visually dominant widget elements such as, primary or default buttons, or selected tabs. In the Palette, it is presented as the background color of the "highest"
<h3>Main colors</h3>
There are 6 Main Colors used in this tool. From left to right, their names are...
<ol id="main-colors">
<li>Highest</li>
<li>High</li>
<li>Normal</li>
<li>Low</li>
<li>Lowest</li>
<li>Page</li>
</ol><img src="assets/images/cap_palette.png" width="586" height="93" alt="Color palette withy 6 main color blocks"/>
<p>
Main colors "Highest" through "Lowest" are designed to hold colors of decreasing visual emphasis. The main color "Page" is the background color of the page or container the widgets will be viewed on in the final app or web page. Each of these main colors represents a family of colors that are used to color widgets.
</p>
<h3>Color scheme</h3>
A Color Scheme is a data structure that holds information about the relationship of each main color to the Key Color. The Main color "Highest" always has the same value color value as the Key Color.
The value of the main color "high" might be calculated like this: Start with the key color, and adjust its hue by 0, its saturation down by 30%, and its lightness up by 20%. The value of the main color "normal" might be calculated like this: Start with the key color, and adjust its hue by 0, its saturation down by 30%,
and its lightness up by 30%. Etc.
A Color Scheme data structure looks like this...
<pre>
Y.ColorSpace.schemes.monochrome = {
container: {h:0, s:0, l:0}, // the page or container
highest: {h:0, s:-30, l:60},
high: {h:0, s:-30, l:60},
normal: {h:0, s:-30, l:75},
low: {h:0, s:-30, l:80},
lowest: {h:0, s:-30, l:90}
};
</pre>
<h3>Foreground Colors</h3>
Each main color has an associated set of named, foreground colors:
<ul>
<li>Text-high</li>
<li>Text-normal</li>
<li>Text-low</li>
<li>Rule-high</li>
<li>Rule-low</li>
<li>Border-high</li>
<li>Border-low</li>
<li>Gradient</li>
</ul>
Each foreground color is calculated from the background color of its parent,
Main color.
Their names are suggestive of how they may be used to color widget elements.
<p>
The text colors have special algorithms applied to them to keep them readable given any background color.
</p>
<h3>Hover Colors</h3>
Since many widgets have objects that require visual feedback on user interaction, we provide a set of hover colors for the hover state of elements. The hover color is calculated from each of the main colors. It's a child of its parent main color. Each hover color also has a full set of foreground colors.
<h3>Space/palette</h3>
The Space/palette is a nested data structure collection of all the color values available for use in a particular skin. These values include all main colors, hover colors, and foreground colors.
The space/palette object literal in JSON form, contains nested key-value pairs. The values are colors in hex format that looks like this.
<pre>
Skin.PALETTE = {
block: {
highest: {
background: '#3355BA',
gradient: '',
border: {
low: '#0B2981',
high: '#6680CC'
},
text: {
low: '#708EE6',
normal: '#D9E2FF',
high: '#ffffff'
},
rule: {
low: '#223A80',
high: '#4A69C4'
},
hover: { // the hover color and its foreground colors
background: '#1B3A95',
gradient: '',
border: {
low: '#041D67',
high: '#6680CC'
},
text: {
low: '#5675CF',
normal: '#EFF3FF',
high: '#fff'
},
rule: {
low: '#162D6F',
high: '#314D9F'
}
}
// next would be the other main colors,
// "high", "normal", "low", "lowest", and "page"
}
};
</pre>
<h3>Color Mapping</h3>
Each YUI Widget has a color map file, which defines variable names and set their value equal to a color, padding, or radius value in the skin palette.
<pre>
YUI.add('skin-tabview', function (Y) {
Y.Skin.renderers.tabview = function (skin) {
var space = skin.colorspace,
block = skin.colorspace.block;
return {
paddingTab: skin.padding(0.3, 0.75),
paddingTabSelected: skin.padding(0.4, 0.75),
paddingPanel: skin.padding(0.25, 0.5),
tabRadius: skin.radius(0.4), // 40% of global radius
tabBackground: block.high.background,
tabGradient: block.high.gradient,
tabText: block.high.text.normal, // Example variable is here
tabBorderLow: block.high.border.low,
tabBorderHigh: block.high.border.high,
tabHoverBackground: block.high.hover.background,
tabHoverGradient: block.high.hover.gradient,
tabHoverText: block.high.hover.text.normal,
tabHoverBorderLow: block.high.hover.border.low,
tabHoverBorderHigh: block.high.hover.border.high,
</pre>
For example: The mapping file for the TabView widget is named skin-tabview.js. One of the variables you can see in the snippet above is named "tabText". Its value is equal to (mapped to) the color stored in the skin object "block.high.text.normal". This is the normal text color in the "high" main color that you can see (circled) in the palette of this tool.<img src="assets/images/cap_high_text_normal.png" width="586" height="93" alt="text.normal in 'high' main color is circled"/>
<p>
YUI Skin Builder has CSS style code templates for each widget. At the bottom of the template snippet below, you can see where the variable "tabText" is used.
</p>
<pre>
...
{{prefix}}{{skinName}} {{prefix}}tab-label {
{{tabGradient}};
background-color: {{tabBackground}};
border-style: solid;
border-color: {{tabBorderHigh}} {{tabBorderLow}} {{tabBorderLow}} {{tabBorderHigh}};
border-width: 1px 1px 0 1px;
cursor:pointer;
font-size: 85%;
padding: {{paddingTab}};
text-decoration:none;
border-radius: {{tabRadius}} {{tabRadius}} 0 0;
color: {{tabText}}; /****** The variable in the example is here */
}
...
</pre>
When the CSS templates are processed, the variables are replaced.
<pre>
.yui3-skin-mine .yui3-tab-label {
/* omitting a lot of gradient CSS here for this example */
background-color: #b0bcdd;
border-style: solid;
border-color: #d1d8eb #a6b3d9 #a6b3d9 #d1d8eb;
border-width: 1px 1px 0 1px;
cursor:pointer;
font-size:85%;
padding: 0.29em 0.75em; /*0.3em .75em;*/
text-decoration:none;
border-radius: 4px 4px 0 0;
color: #0e1320; /****** The variable has been replaced */
}
</pre>
The YUI Widgets Preview uses this CSS and it's output in the code tab of the YUI Skin Builder for your use.
</div>
</body>
</html>