|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: Contextual Example</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
|
|
|
24 |
<h1>Example: Contextual Example</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><div class="intro"> |
|
|
29 |
<p>This example shows a page of HTML elements with CSS Reset and contextual CSS Fonts applied.</p> |
|
|
30 |
</div> |
|
|
31 |
|
|
|
32 |
<div class="example newwindow"> |
|
|
33 |
<a href="cssfonts-context-example.html" target="_blank" class="button"> |
|
|
34 |
View Example in New Window |
|
|
35 |
</a> |
|
|
36 |
</div> |
|
|
37 |
|
|
|
38 |
<h2>Contextual Usage</h2> |
|
|
39 |
<p>When CSS Fonts is included in a page it applies rules to all HTML elements via type selectors like this: <code>body {font-size:13px;}</code>. An alternate version, <code>cssfonts-context.css</code>, uses only descendent selectors like this: <code>.yui3-cssfonts-context {font-size:13px;}</code>. This means you can put that class value on a node in your document to choose which region(s) of your page CSS Fonts will be applied to.</p> |
|
|
40 |
|
|
|
41 |
<pre class="code prettyprint"><div class="yui3-cssfonts"> |
|
|
42 |
<p>Everything within this container will have CSS Fonts applied.</p> |
|
|
43 |
</div></pre> |
|
|
44 |
|
|
|
45 |
|
|
|
46 |
<p>In this example, only the middle block is within the context of CSS Fonts. The other two blocks are unaffected by CSS Fonts since their context is not one matched by the descendent selector of the contextual version of CSS Fonts.</p> |
|
|
47 |
|
|
|
48 |
<h3>Note:</h3> |
|
|
49 |
<p>Because CSS examples are susceptible to other CSS on the page, this example is only available in a new window at the above link.</p> |
|
|
50 |
|
|
|
51 |
|
|
|
52 |
</div> |
|
|
53 |
</div> |
|
|
54 |
</div> |
|
|
55 |
|
|
|
56 |
<div class="yui3-u-1-4"> |
|
|
57 |
<div class="sidebar"> |
|
|
58 |
|
|
|
59 |
|
|
|
60 |
|
|
|
61 |
<div class="sidebox"> |
|
|
62 |
<div class="hd"> |
|
|
63 |
<h2 class="no-toc">Examples</h2> |
|
|
64 |
</div> |
|
|
65 |
|
|
|
66 |
<div class="bd"> |
|
|
67 |
<ul class="examples"> |
|
|
68 |
|
|
|
69 |
|
|
|
70 |
<li data-description="When CSS Fonts is included in a page, it applies a baseline font treatment to all HTML elements. This baseline is Arial at the equivalent of 13px size and 16px line-height."> |
|
|
71 |
<a href="cssfonts-basic.html">Global (Page-Level) Example</a> |
|
|
72 |
</li> |
|
|
73 |
|
|
|
74 |
|
|
|
75 |
|
|
|
76 |
<li data-description="Use the alternate contextual version of YUI Fonts to have precise control over which regions of the page are targeted."> |
|
|
77 |
<a href="cssfonts-context.html">Contextual Example</a> |
|
|
78 |
</li> |
|
|
79 |
|
|
|
80 |
|
|
|
81 |
|
|
|
82 |
<li data-description="Define all non-baseline sizes in percentages when using YUI Fonts."> |
|
|
83 |
<a href="cssfonts-size.html">Setting Font Size</a> |
|
|
84 |
</li> |
|
|
85 |
|
|
|
86 |
|
|
|
87 |
</ul> |
|
|
88 |
</div> |
|
|
89 |
</div> |
|
|
90 |
|
|
|
91 |
|
|
|
92 |
|
|
|
93 |
</div> |
|
|
94 |
</div> |
|
|
95 |
</div> |
|
|
96 |
</div> |
|
|
97 |
|
|
|
98 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
99 |
<script>prettyPrint();</script> |
|
|
100 |
|
|
|
101 |
<script> |
|
|
102 |
YUI.Env.Tests = { |
|
|
103 |
examples: [], |
|
|
104 |
project: '../assets', |
|
|
105 |
assets: '../assets/cssfonts', |
|
|
106 |
name: 'cssfonts-context', |
|
|
107 |
title: 'Contextual Example', |
|
|
108 |
newWindow: 'true', |
|
|
109 |
auto: false |
|
|
110 |
}; |
|
|
111 |
YUI.Env.Tests.examples.push('cssfonts-basic'); |
|
|
112 |
YUI.Env.Tests.examples.push('cssfonts-context'); |
|
|
113 |
YUI.Env.Tests.examples.push('cssfonts-size'); |
|
|
114 |
|
|
|
115 |
</script> |
|
|
116 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
117 |
|
|
|
118 |
|
|
|
119 |
|
|
|
120 |
</body> |
|
|
121 |
</html> |