財団-タイポグラフィヘルパー
この章では、 Typography Helpers。タイポグラフィヘルパーは、意味的に適切な方法でテキストをフォーマットするために使用されます。Foundationのヘルパークラスを使用すると、いくつかの活版印刷スタイルをすばやく作成できます。
次の表に、Foundationで使用されるタイポグラフィヘルパーを示します。
| シニア番号 | タイポグラフィヘルパーと説明 |
|---|---|
| 1 | テキストの配置 左、右、中央、両端揃えなどの要素のテキスト配置を変更するのに役立ちます。 |
| 2 | サブヘッダー サブヘッダーは、.subheaderクラスを使用して任意のヘッダー要素に追加できます。 |
| 3 | リードパラグラフ これは、広告やその他の説明テキストに使用できる通常のテキストと比較して、かなり大きなテキストブロックです。 |
| 4 | 箇条書きなし デフォルトでは、<ul>はFoundationの箇条書きです。箇条書きを削除するには、.no-bulletクラスを使用できます。 |
| 5 | 統計 ダッシュボードを扱うときはいつでも、いくつかの重要な数字を強調する必要があります。これは、.statクラスを使用して実現できます。 |
Sassリファレンス
変数
次の表に、プロジェクトの設定ファイル内のSASS変数を示します。これにより、コンポーネントのデフォルトのスタイルがカスタマイズされます。
| シニア番号 | 名前と説明 | タイプ | デフォルト値 |
|---|---|---|---|
| 1 | $lead-font-size デフォルトの先頭段落のフォントサイズ。 |
数 | $ global-font-size * 1.25 |
| 2 | $lead-lineheight デフォルトでは、先頭段落の行の高さ。 |
ストリング | 1.6 |
| 3 | $subheader-lineheight サブヘッダーのデフォルトの行の高さ。 |
数 | 1.4 |
| 4 | $subheader-color サブヘッダーのデフォルトのフォントの色。 |
色 | $ dark-gray |
| 5 | $subheader-font-weight サブヘッダーのデフォルトのフォントの太さ。 |
ストリング | $ global-weight-normal |
| 6 | $subheader-margin-top サブヘッダーのデフォルトの上部マージン。 |
数 | 0.2レム |
| 7 | $subheader-margin-bottom サブヘッダーのデフォルトの下マージン。 |
数 | 0.5レム |
| 8 | $stat-font-size 静的番号のデフォルトのフォントサイズ |
数 | 2.5レム |