unitone の CSS カスタムプロパティ

タイポグラフィ

--unitone--measure

テキストの1行の長さ(カラム幅)。デフォルトは 46rem です。

--unitone--font-size

文字サイズのレベル。-2〜7まで設定できます。デフォルトは 0。少し大きくしたい場合は下記のように指定できます。

.foo {
  --font-size: 1;
}

あるいは、CSS を書かなくてもコアブロックであればタイポグラフィパネルから設定できますし、unitone 的にはデコレーターブロックのタイポグラフィパネルからも設定できるので、デコレーターブロックで対象をラップしてデコレーターブロックで文字サイズを設定することもできます。

--unitone--harmonic-sequence-base

unitone の文字サイズは下記の計算式で算出されます。デフォルトは 8 です。

var(--unitone--harmonic-sequence-base) / (var(--unitone--harmonic-sequence-base) - var(--unitone--font-size))

調和数列に --unitone--harmonic-sequence-base を掛けたものです。--unitone--harmonic-sequence-base が小さいほどスケールは大雑把になり、大きいほど細かくなります。

--unitone--min-harmonic-sequence-base,
--unitone--max-harmonic-sequence-base

デコレーターブロックのタイポグラフィパネルには「流体タイポグラフィ」の設定があります。「流体タイポグラフィ」にチェックすると、画面サイズに応じて文字サイズが拡大縮小します。文字サイズが「6XL」だとすると、スマホでは大きすぎてまともに読むことができないので、そのようなときは「流体タイポグラフィ」を使うと良いです。

流体タイポグラフィの場合、文字サイズの計算式が下記のようになります。

最大: var(--unitone--max-harmonic-sequence-base) / (var(--unitone--max-harmonic-sequence-base) - var(--unitone--font-size))

最小: var(--unitone--min-harmonic-sequence-base) / (var(--unitone--min-harmonic-sequence-base) - var(--unitone--font-size))

--unitone--min-harmonic-sequence-base のデフォルト値は 9--unitone--max-harmonic-sequence-base のデフォルト値は --unitone--harmonic-sequence-base です。

--unitone--half-leading

文字の上下に追加される余白の大きさです。デフォルト値は 0.4 です。

1行の大きさ(line-height)は下記の計算式で算出されます。

1 * var(--unitone--half-leading) * 2

サイト全体の line-height については自分で CSS を書かなくてもサイトエディターのグローバルスタイルから設定できます。

--unitone--font-family

基本の書体。デフォルトは sans-serif

余白・サイズ

基本(単位なし)

--unitone--ms{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。全ての余白・サイズ用の CSS カスタムプロパティの基本になります。具体的には下記の数式で算出されます。

line-height * {フィボナッチ数}

--unitone--_space-reference-value は行間のサイズを基準にした値を保持している CSS カスタムプロパティです。フィボナッチ数 3 のときに基本の line-height と同じ大きさを返すようになっています。--unitone--_space-reference-value は一応プライベート変数扱いで、上書きすることは非推奨です。

--unitone--ms-2

line-height * 1

--unitone--ms-1

line-height * 2

--unitone--ms0

デフォルトでは0。

--unitone--ms1

line-height * 3

--unitone--ms2

line-height * 5

--unitone--ms3

line-height * 8

--unitone--ms4

line-height * 13

--unitone--ms5

line-height * 21

--unitone--ms6

line-height * 34

--unitone--ms7

line-height * 55

標準

各ブロックで設定可能な余白(gappadding 等)は --unitone--s{レベル} という形式の CSS カスタムプロパティが使用されます。

em ベースのサイズがベースとなりますが、レベルが2以上のものについては小さな画面のときに余白が大きくなりすぎないように clamp で調整されます。

var(--unitone--ms1) + var(--unitone--ms{レベル}) * 22.5em / 80em 〜 var(--unitone--ms{レベル})

--unitone--s-2

デフォルトでは約0.53em。

var(--unitone--em-2)

--unitone--s-1

デフォルトでは約1.07em。

var(--unitone--em-1)

--unitone--s0

デフォルトでは0em。

--unitone--s1

デフォルトでは1.8em。

var(--unitone--em1)

--unitone--s2

デフォルトでは3em〜約2.65em。

var(--unitone--ms1) + var(--unitone--ms2) * 22.5em / 80em 〜 var(--unitone--ms2)

--unitone--s3

デフォルトでは4.8em〜約3.18em。

var(--unitone--ms1) + var(--unitone--ms3) * 22.5em / 80em 〜 var(--unitone--ms3)

--unitone--s4

デフォルトでは7.8em〜約4.06em。

var(--unitone--ms1) + var(--unitone--ms4) * 22.5em / 80em 〜 var(--unitone--ms4)

--unitone--s5

デフォルトでは12.6em〜約5.46em。

var(--unitone--ms1) + var(--unitone--ms5) * 22.5em / 80em 〜 var(--unitone--ms5)

--unitone--s6

デフォルトでは20.4em〜約7.75em。

var(--unitone--ms1) + var(--unitone--ms6) * 22.5em / 80em 〜 var(--unitone--ms6)

--unitone--s7

デフォルトでは33em〜約11.44em。

var(--unitone--ms1) + var(--unitone--ms7) * 22.5em / 80em 〜 var(--unitone--ms7)

パディング用

各ブロックで設定可能な padding--unitone--p{レベル} という形式の CSS カスタムプロパティが使用されます。

em ベースのサイズがベースとなりますが、レベルが2以上のものについては小さな画面のときに余白が大きくなりすぎないように clamp で調整されます(--unitone--s{レベル} も調整されますが、それよりも縮小幅が大きくなります)。

--unitone--p-2

デフォルトでは約0.53em。

var(--unitone--em-2)

--unitone--p-1

デフォルトでは約1.07em。

var(--unitone--em-1)

--unitone--p0

デフォルトでは0em。

--unitone--p1

デフォルトでは1.8em。

var(--unitone--em1)

--unitone--p2

デフォルトでは3em〜約1.99em。

var(--unitone--ms1) + var(--unitone--ms2) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms2)

--unitone--p3

デフォルトでは4.8em〜約2.11em。

var(--unitone--ms1) + var(--unitone--ms3) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms3)

--unitone--p4

デフォルトでは7.8em〜約2.33em。

var(--unitone--ms1) + var(--unitone--ms4) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms4)

--unitone--p5

デフォルトでは12.6em〜約2.67em。

var(--unitone--ms1) + var(--unitone--ms5) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms5)

--unitone--p6

デフォルトでは20.4em〜約3.23em。

var(--unitone--ms1) + var(--unitone--ms6) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms6)

--unitone--p7

デフォルトでは33em〜約4.13em。

var(--unitone--ms1) + var(--unitone--ms7) * (22.5em / 80em) * 0.2 〜 var(--unitone--ms7)

em ベース

--unitone--em{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。具体的には下記の数式で算出されます。

1em * var(--unitone--ms{レベル})

--unitone--em-2

デフォルトでは約0.53em。

1em * var(--unitone--ms-2)

--unitone--em-1

デフォルトでは約1.07em。

1em * var(--unitone--ms-1)

--unitone--em0

デフォルトでは0em。

--unitone--em1

デフォルトでは1.8em。

1em * var(--unitone--ms1)

--unitone--em2

デフォルトでは3em。

1em * var(--unitone--ms2)

--unitone--em3

デフォルトでは4.8em。

1em * var(--unitone--ms3)

--unitone--em4

デフォルトでは7.8em。

1em * var(--unitone--ms4)

--unitone--em5

デフォルトでは12.6em。

1em * var(--unitone--ms5)

--unitone--em6

デフォルトでは20.4em。

1em * var(--unitone--ms6)

--unitone--em7

デフォルトでは33em。

1em * var(--unitone--ms7)

rem ベース

--unitone--rem{レベル} という形式でフィボナッチ数列に基づいたサイズを返します。具体的には下記の数式で算出されます。

1rem * var(--unitone--ms{レベル})

--unitone--rem-2

デフォルトでは約0.53rem。

1rem * var(--unitone--ms-2)

--unitone--rem-1

デフォルトでは約1.07rem。

1rem * var(--unitone--ms-1)

--unitone--rem0

デフォルトでは0rem。

--unitone--rem1

デフォルトでは1.8rem。

1rem * var(--unitone--ms1)

--unitone--rem2

デフォルトでは3rem。

1rem * var(--unitone--ms2)

--unitone--rem3

デフォルトでは4.8rem。

1rem * var(--unitone--ms3)

--unitone--rem4

デフォルトでは7.8rem。

1rem * var(--unitone--ms4)

--unitone--rem5

デフォルトでは12.6rem。

1rem * var(--unitone--ms5)

--unitone--rem6

デフォルトでは20.4rem。

1rem * var(--unitone--ms6)

--unitone--rem7

デフォルトでは33rem。

1rem * var(--unitone--ms7)

グリッド(%)ベース

--unitone--pg{グリッド数} という形式で、親要素を分割しそれに任意のグリッド数を掛け合わせたサイズを返します。分割数は var(--unitone--grid-columns)、各グリッド間の余白は var(--unitone--grid-gap) で定義されています。具体的には下記の数式で算出されます。

(100% - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * {グリッド数} + var(--unitone--grid-gap) * {グリッド数} - 1

グリッド(コンテナー)ベース

--unitone--cg{グリッド数} という形式で、コンテナーのサイズ(--unitone--container-max-width)を分割しそれに任意のグリッド数を掛け合わせたサイズを返します。分割数は var(--unitone--grid-columns)、各グリッド間の余白は var(--unitone--grid-gap) で定義されています。具体的には下記の数式で算出されます。

(var(--unitone--container-max-width) - var(--unitone--grid-gap) * (var(--unitone--grid-columns) - 1)) / var(--unitone--grid-columns) * {グリッド数} + var(--unitone--grid-gap) * {グリッド数} - 1

gap

--unitone--global--gap

主にブロックを左右、あるいはグリッド上に並べるようなブロックの gap に指定されています。

var(--unitone--s2)

--unitone--global--text-gap

主にテキストを上下、あるいは左右にならべるようなブロックの gap に指定されています。

var(--unitone--s1)

コンテナーの左右余白

--unitone--global--gutters

clamp(var(--unitone--rem1), 4vw, var(--unitone--rem2))

その他

--unitone--container-max-width

コンテナーの横幅。デフォルトは 1334px

--unitone--global--box-shadow

box-shadow の値。デフォルトは 0 5px 20px -5px rgba(0, 0, 0, .2)

目次