Spacing
SPACINGトークンは、次の2種類があります。
SPACING.S: 主にコンテンツ間の余白をコントロールするための--sトークンSPACING.EM: ボックス内側の余白やテキストとアイコンの間隔など、em単位で細かい調整に利用できる--emトークン
paddingやmargin, gap等で利用できます。(p,py,px,pl,pr,pt,pb,m,my,mx,ml,mr,mt,mb,gap,clmg,rowg,top,left,bottom,right,inset)
SPACING.S トークン
| トークン | 変数 | デフォルト値 |
|---|---|---|
0 | --s--0 | 0rem |
5 | --s--5 | 0.25rem |
10 | --s--10 | 0.375rem |
20 | --s--20 | 0.625rem |
30 | --s--30 | 1rem |
40 | --s--40 | 1.625rem |
50 | --s--50 | 2.625rem |
60 | --s--60 | 4.25rem |
70 | --s--70 | 6.875rem |
80 | --s--80 | 11.125rem |
90 | --s--90 | 18rem |
DEMO
0
5
10
20
30
40
50
60
70
80
90
スケーリングの計算方法について
- フィボナッチ数列 ((0, 1,) 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...) に基づいたスケーリングを採用。
- デフォルトでは
1 = 0.125rem,2 = 0.25remとして計算し、0.25remから実際にトークン化しています。
対応するUtilityクラス
paddingやmarginの全方向に対してクラスを用意すると大量になってしまうので、主要なものに対してのみクラスを用意しています。
デフォルトでは、-ms:{s}, -mbs:{s}, -p:{s}, -[py|px]:{s}, -gap:{s} のみ用意しています。要検討
また、それぞれクラスを用意しているのは 0, 5, 10, 20, ~, 50 までです。
SPACING.EM トークン
| EMトークン | 変数 | デフォルト値 |
|---|---|---|
em1 | --em--1 | 0.125em |
em2 | --em--2 | 0.25em |
em3 | --em--3 | 0.375em |
em5 | --em--5 | 0.5em |
em7 | --em--7 | 0.75em |
em10 | --em--10 | 1em |
em15 | --em--15 | 1.5em |
em20 | --em--20 | 2em |
em25 | --em--25 | 2.5em |
em30 | --em--30 | 3em |
DEMO
em1
em2
em3
em5
em7
em10
em15
em20
em25
em30
対応するUtilityクラス
paddingやmarginの全方向に対してクラスを用意すると大量になってしまうので、主要なものに対してのみクラスを用意しています。
デフォルトでは、 -p:{EM}, -[py|px]:{EM}, -gap:{EM} のみ用意しています。要検討