docs/partials/cssfonts-context-source.mustache

	cssfonts-context-source.mustache revision 90c2e60494a1efb7a25dd97066523a0d1890ace9
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<html>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<head>
364b3f41370b5853ec58ed0f094565f69ab7c7fdLuke Smith    <meta http-equiv="content-type" content="text/html; charset=utf-8">
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra    <title>YUI 3.x: CSS Fonts Contextual Example</title>
dc2e4d465cdefe2663fc35e35162eab1b817af9eLuke Smith    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssreset/cssreset.css" type="text/css">
dc2e4d465cdefe2663fc35e35162eab1b817af9eLuke Smith    <link rel="stylesheet" href="{{yuiBuildUrl}}/cssfonts-context/cssfonts-context.css" type="text/css">
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra</head>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra<body>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith    <div class="yui3-cssfonts">
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <h1>In Context</h1>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <h1>This is a H1 element.</h1>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <h2>This is a H2 element.</h2>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <h3>This is a H3 element.</h3>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <h4>This is a H4 element.</h4>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <h5>This is a H5 element.</h5>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <h6>This is a H6 element.</h6>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <ul>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <li>This is a LI in a UL</li>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        </ul>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <ol>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <li>This is a LI in a UL</li>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        </ol>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <dl>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <dt>This is a DT in a DL</dt>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <dd>This is a DD in a DL</dd>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        </dl>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <form>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <input type="text" value="This is an INPUT type TEXT in a FORM"/>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <select>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <option>This is an OPTION in a SELECT</option>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <option>This is an OPTION in a SELECT</option>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <optgroup>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra                    <option>This is an OPTION in a OPTGROUP in a SELECT</option>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <option>This is an OPTION in a OPTGROUP in a SELECT</option>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                </optgroup>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra                <option>This is an OPTION in a SELECT</option>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra            </select>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra            <textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra            <fieldset>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra                <textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra            </fieldset>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <button>This is a BUTTON</button>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        </form>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        <blockquote>This is a BLOCKQUOTE element.</blockquote>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra        <table>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <caption>This is a CAPTION in a TABLE</caption>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <thead>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                <tr>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <th>This is a TH in a TR in a THEAD in a TABLE</th>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra                    <td>This is a TD in a TR in a THEAD in a TABLE</td>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                </tr>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra            </thead>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <tfoot>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra                <tr>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                    <th>This is a TH in a TR in a TFOOT in a TABLE</th>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                    <td>This is a TD in a TR in a TFOOT in a TABLE</td>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                </tr>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            </tfoot>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <tbody>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <tr>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                    <th>This is a TH in a TR in a TBODY in a TABLE</th>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                    <td>This is a TD in a TR in a TBODY in a TABLE</td>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                </tr>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            </tbody>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        </table>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra    </div>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra    <div>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <h1>Out of Context</h1>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <h1>This is a H1 element.</h1>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <h2>This is a H2 element.</h2>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <h3>This is a H3 element.</h3>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <h4>This is a H4 element.</h4>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <h5>This is a H5 element.</h5>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <h6>This is a H6 element.</h6>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <ul>
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra            <li>This is a LI in a UL</li>
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra        </ul>
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra
76c9fe1d50dff2736aa35ed3e81acaf8cdf48588Tilo Mitra        <ol>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <li>This is a LI in a UL</li>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        </ol>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <dl>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <dt>This is a DT in a DL</dt>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <dd>This is a DD in a DL</dd>
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith        </dl>
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith
c77d701a41f1b77424b988c2e63f2a8e6829c7e6Luke Smith        <form>
31dc38d003f727e19c61510100f8418658af15d5Tilo Mitra            <input type="text" value="This is an INPUT type TEXT in a FORM"/>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <select>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <option>This is an OPTION in a SELECT</option>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <option>This is an OPTION in a SELECT</option>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <optgroup>
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra                    <option>This is an OPTION in a OPTGROUP in a SELECT</option>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <option>This is an OPTION in a OPTGROUP in a SELECT</option>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                </optgroup>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                <option>This is an OPTION in a SELECT</option>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            </select>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
98c7a407991cdb0caa6bce97544759d7d56b39e0Tilo Mitra            <fieldset>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            </fieldset>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <button>This is a BUTTON</button>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        </form>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <blockquote>This is a BLOCKQUOTE element.</blockquote>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra        <table>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <caption>This is a CAPTION in a TABLE</caption>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <thead>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                <tr>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <th>This is a TH in a TR in a THEAD in a TABLE</th>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <td>This is a TD in a TR in a THEAD in a TABLE</td>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                </tr>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            </thead>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            <tfoot>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                <tr>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <th>This is a TH in a TR in a TFOOT in a TABLE</th>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <td>This is a TD in a TR in a TFOOT in a TABLE</td>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                </tr>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            </tfoot>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra            <tbody>
28ab732ad7743763a94f34d018067c184e17de96Tilo Mitra                <tr>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <th>This is a TH in a TR in a TBODY in a TABLE</th>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                    <td>This is a TD in a TR in a TBODY in a TABLE</td>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith                </tr>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith            </tbody>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith        </table>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith    </div>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith</body>
a9469f39cbc0ff8977226a5e0469330341c5186eLuke Smith