ToolKit[Titon]を利用した
Typographyのサンプルプログラムです。
※「ヘッダー」や「リスト」についても記載してあります。
ToolKit[Titon]については
下記サイトを参照してください。
参照URL①：Toolkit – Project Titon
参照URL②：Bootstrapのように多数のコンポーネントが詰まったUIツールキット「Titon Toolkit」:phpspot開発日誌
デモサイト：Typography – Titon Toolkit Demo Site
HTML head部
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/toolkit.css" /> <link rel="stylesheet" type="text/css" href="css/ui.css" /> </head>
HTML body部（サンプル①）
<!-- h1 --> <h1>ヘッダー1</h1> <!-- h2 --> <h2>ヘッダー2</h2> <!-- h3 --> <h3>ヘッダー3</h3> <!-- h4 --> <h4>ヘッダー4</h4> <!-- h5 --> <h5>ヘッダー5</h5> <!-- h6 --> <h6>ヘッダー6</h6>
HTML body部（サンプル②）
<blockquote> <p> サンプルテキスト サンプルテキスト サンプルテキスト<br /> サンプルテキスト サンプルテキスト サンプルテキスト </p> <cite> 引用元 </cite> </blockquote>
HTML body部（サンプル③）
<!-- muted --> <p class="text-muted"> muted テキスト </p> <!-- info --> <p class="text-info"> info テキスト </p> <!-- success --> <p class="text-success">success テキスト</p> <!-- warning --> <p class="text-warning">warning テキスト</p> <!-- error --> <p class="text-error"> error テキスト </p>
HTML body部（サンプル④）
<!-- UL --> <ul> <li>No.01 サンプルアイテム</li> <li>No.02 サンプルアイテム</li> <li>No.03 サンプルアイテム</li> <li>No.04 サンプルアイテム</li> <ul> <li>No.04-01 サンプルアイテム</li> <li>No.04-02 サンプルアイテム</li> <li>No.04-03 サンプルアイテム</li> <li>No.04-04 サンプルアイテム</li> </ul> </ul> <!-- OL --> <ol> <li>No.01 サンプルアイテム</li> <li>No.02 サンプルアイテム</li> <li>No.03 サンプルアイテム</li> <li>No.04 サンプルアイテム</li> <ul> <li>No.04-01 サンプルアイテム</li> <li>No.04-02 サンプルアイテム</li> <li>No.04-03 サンプルアイテム</li> <li>No.04-04 サンプルアイテム</li> </ul> </ol>
HTML body部（サンプル⑤）
<dl> <dt>No.01 サンプルタイトル</dt> <dd>No.01 サンプルデータ</dd> </dl> <dl> <dt>No.02 サンプルタイトル</dt> <dd>No.02 サンプルデータ</dd> </dl>
解説
Typographyのみの機能を使う場合は
ファイル[toolkit.js]は
必要無いですので
ファイル[toolkit.css]及び
ファイル[ui.css]のみを
読み込んでいます。
※ToolKit[Titon]のライセンスは[BSD]です。