CSS Variables

RADIX では CSS 変数によるスタイルシートの保守管理を推奨しており、radix.css 内でも値が用いられています。
RADIX で設定されている変数とその意味は以下の通りです。これらの値は、ユーザが編集するその他の CSS ファイルから上書きしてカスタマイズされることを期待しています。

変数一覧

フォント系

--fontSize: 16px;

rem の参照元となる HTML 要素のフォントサイズを設定します。デフォルトは 16px であり可変させていません。

--textColor: #333;

標準の文字色です。デフォルトは #333 であり完全な黒（#000）ではなく可読性を高めています。

--linkColor: #3562a0;

a 要素の文字色です。

余白系

--gutter: 1rem;

段落間の間隔であり、行間の大きさです。main 内部の本文領域を構成するヘディングコンテンツやフローコンテンツの margin-block-start (margin-top) にこれに基づく余白が設定されています。

before v4.1.0

--gutter: 1.3rem;

--gap: 3rem;

セクションの間隔であり、コンテンツの意味要素を区切る為の余白です。section 要素を始めとしたセクショニングコンテンツにこれに基づく余白が設定されるべきです。

--spacing: 1rem;

レイアウトを構成する上での、ラッパー要素の最小パディングまたはコンテンツ要素の最小マージンです。これについて知るには、 RADIX のレイアウトモデルに詳しく記述がありますので参照してください。

--contentWidth: 1000px;

centering クラスや fb-brackets クラスで構成する RADIX レイアウトのコンテンツ要素の最大幅を設定します。詳しくは RADIX のレイアウトモデルを参照してください。