Styles
このページは、タイポグラフィ、フォーム要素、アイコンなどの標準的なページ要素のスタイルを表示するためのものです。これらは、別のページテンプレートファイル（ page.styles.liquid.
タイポグラフィ
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
RTE見出し
RTE見出し1
RTE見出し2
RTE見出し3
RTE見出し4
RTE見出し5
RTE見出し6
パラグラフ
Loremのイプサムのニンジンは、学部開発を向上させる、SED NIBHのeuismodのlaoreetは素晴らしい週末だったオフセット。通常の運動NULLAをnostrud人、来てくれて感謝します。
aliquipにカートンの選手はそれから利用しています。宿題や事務局の悲しみには、AMETデジタル写真に座ります。
タイプのスタイル
- ストロング
- Emphasis
- インラインリンク
- ストライク
- Sup
Blockquotes
EuのFEUベロとの組み合わせで、ちょうどnonumy eirmod tempor doloreマグナNULLA存在座る資産を許可します。南の公文書のtempor eleifendオプションcongueのニヒルのimperdietドーミングのid QUOD彼らは私たちがローストを作るために投資することができるようにmazim.Unusualに独立しています。
見積もりの著者
リスト
|
|
数字の箇条書き
|
|
子リスト（RTEスタイルに一致する） |
|
レスポンシブテーブル
| Order | Date | 支払い状況 | フルフィルメントステータス | 合計 |
|---|---|---|---|---|
| #1001 | 2015年12月22日 | 認証済み | Unfulfilled | $43.03 |
| #1002 | 2015年12月23日 | 認証済み | Unfulfilled | $44.03 |
| #1003 | 2015年12月24日 | 認証済み | Unfulfilled | $45.03 |
| #1004 | 2015年12月25日 | 認証済み | Unfulfilled | $46.03 |
| #1005 | 2015年12月26日 | 認証済み | Unfulfilled | $47.03 |
| #1006 | 2015年12月27日 | 認証済み | Unfulfilled | $48.03 |
フォーム
デフォルトのフォーム要素
目に見えないラベル
のクラスを追加する label-hidden を視覚的に隠すためのラベルに、スクリーンリーダーにアクセス可能にしてください。使用 プレースホルダ あなたの目に見えるラベルとしての@属性。
注意： The プレースホルダ 属性はIE10 +でのみ動作するので、IE9以下では目に見えないラベルが無効になります。
縦型（顧客、連絡先など）
Slateにはスタイルはありませんが、ほとんどのテーマで使用されています。ここであなたのスタイルを見るには `form-vertical`クラスのform / div内のスタイル要素。
ほとんどの液体フォーム要素にクラスを直接追加することはできません（例： {% form 'contact' %}）。その代わりに、div内のフォームをクラス .form-vertical 同じ効果を達成する。
ノートとフォームエラー
Slateにはノートスタイルはありませんが、フォームエラーを処理するために一般的に追加されています。スタイル例：
.note {
padding: 20px;
border: 1px solid #ccc;
}
.note--success {
border-color: green;
background-color: lightgreen;
}
.note--error {
border-color: red;
background-color: lightred;
}
使用例：
{% if form.posted_successfully? %}
<p class = "ノートノート - 成功">フォームを送信していただきありがとうございます</ p>
{% endif %}
{% if form.errors %}
<div class = "note note - エラー">
{{ form.errors | default_errors }}
</ div>
{% endif %}
これはエラーメッセージです。
- 箇条書きは、より多くの洞察を提供することができます
ボタン
その他の要素
水平ルール
デフォルトはありません hr Slateでは@スタイルが追加されますが、これは一般的なものです。
デフォルト hr
Invisible hr.hr - クリア
小さい hr.hr - 小
SVGアイコン
SlateのドキュメントでSVGアイコンの使用、作成、編集について詳しく読む。
