Settings
Texts
/path/to/floncss/settings/texts.css
サイトで利用する共通のテキスト装飾関連の変数です。
デザインに応じて適宜変更してください。
こちらで定義されている変数は、utility classと連携しています。
1:root {
2 /**
3 * line-heightを定義
4 *
5 * @example html
6 * <div class="line-height line-height:lg@md">...</div>
7 *
8 * @example css
9 * .selector {
10 * line-height: var(--line-height-base);
11 * }
12 */
13 /* base line-height */
14 --line-height-base: 1.8;
15
16 /** other line-height */
17 --line-height-xl: 2.4;
18 --line-height-lg: 2.2;
19 --line-height-md: 2;
20 --line-height-sm: 1.2;
21
22 /**
23 * letter-spacingを定義
24 *
25 * @example html
26 * <div class="letter-spacing letter-spacing:lg@md">...</div>
27 *
28 * @example css
29 * .selector {
30 * letter-spacing: var(--letter-spacing-base);
31 * }
32 */
33 /* base letter-spacing */
34 --letter-spacing-base: inherit;
35
36 /** other letter-spacing */
37 --letter-spacing-xl: 0.08em;
38 --letter-spacing-lg: 0.06em;
39 --letter-spacing-md: 0.04em;
40 --letter-spacing-sm: 0.02em;
41}Useage
utility class
1<div class="line-height:xl">text...</div>
2
3<div class="letter-spacing:md">text...</div>css
1.selector {
2 line-height: var(--line-height-xl);
3 letter-spacing: var(--letter-spacing-md);
4}