radix.css で提供されるクラスと、本フレームワークで想定される基本的な設計方針について説明します。

基本のレイアウトの使い方

詳細

CSS variables

CSS3 で利用できる変数設定を利用しています。

• --fontSize
• --linkColor
• --textColor

文字設定をします。 fontSize は rem のベースとなる html 要素のフォントサイズ、 linkColor は a 要素の文字色、 textColor は全体の文字色を設定します。

• --mainColor
• --mainDarkColor
• --mainLightColor

メインの文字色を設定します。 mainColor と mainDarkColor は .rdx-btn 要素で用いる為、最低限設定してください。
その他のカラープリセットはサイトに応じて作成するといいでしょう。

• --contentWidth
• --spacing

contentWidth は .centering や .fb-brackets の中央要素の最大幅（＝ pc 時の要素幅）を設定します。
spacing は .centering の最小マージン、.fb-brackets の最小パディングを設定します。

• --gutter
• --gap

main 内の要素のマージンを設定します。 gap は section 要素のマージン、 gutter はその他の要素のマージンの基準になります。

スタイルリセット

全要素が全て border-box で設定しています。
フォントは Noto Sans JP、フォントカラーは #333、 line-height は 1.8 です。

img 要素はブロック要素に変更してあります。これはモバイル・ファーストの近年のトレンドを受けた設定です。
object-fit: coverが設定されているため、適用したくない場合、.contain クラスを付与することで contain に変更されます。

main 要素の中のコンテンツにはマージン等が設定されています。

• h1 ~ h6 には、ランクに応じて --gutter から差し引かれた下部マージン
• p, table, dl には --gutter 分の下部マージン
• ul は disc のリストスタイルと下部マージン
• ol は decimal ののリストスタイルと下部マージン

が設定されています。

特殊クラス

各々の自由なコーディングの補助が目的のフレームワークであり、このフレームワークで提供されるクラスのみで web サイトを構築することが目的ではありません。 その為、特異なクラスは最低限のみになっています。

レイアウト系

• .clearfix
• .centering
• .fb-brackets
• .full-bleed
• .fill-parent

clearfix は float レイアウトにおいて clear both をする為のクラスです（float レイアウト自体は非推奨）。
centering は radix.css によるコーディングの根幹となる、コンテンツ中央寄せの為のクラスです。
fb-brackets はフルブリードレイアウトに対応したコンテンツ中央寄せ用のクラスです。fb-brackets の中で full-bleed クラスを付けると、横幅最大まで拡張されます。
fill-parent は親要素内の空間を充填する為のクラスです。 ul li でレイアウトした a 要素を整理するために用いたりします。

表示系

• .hide
• .none
• .sp-hide
• .sp-none
• .pc-hide
• .pc-none

要素を非表示にします。.none は display: none!important で絶対非表示、 .hide は opacity と visibility を用いて行う為 transition 等による制御ができます。
sp- 接頭辞をつけるとスマホ時のみ、pc- 接頭辞をつけるとパソコン時のみになります。

• .visible
• .sp-visible
• .pc-visible

表示します（ .hide クラスを打ち消します）。 .hide.visible は表示されますが、 .none.visible は表示されません。

• .modal-visible

モーダルウィンドウでのみ表示します（他の表示系クラスと違い、指定していない状況に対して非表示として作用します）。

マージン系

• .mb
• .mb0
• .mb_
• .mb1
• .mb1_
• .mb2
• .mb2_
• .mb3

margin-bottom を設定します。 .mb は --gutter の設定値です。
それ以外は rem 単位の基準で、その数字の分の下部マージンとなります。 _ は 0.5rem 分です。

テキスト系

• .text-right
• .text-center
• .text-left

text-align を設定します。

• .text-clear

内部の要素の文字を非表示にします。

• .text-unit

span 要素等で用います。文字をひとまとめにして inline-block 要素に変換します。

装飾パーツ

.rdx-btn
初期では css のクラスで設定した --mainColor と --mainDarkColor で色が付きます。

js 機能追加系

• .rdx-drag-scroll

要素の幅がが親要素の幅を超える（スクロールが可能）なとき、ドラッグすることでマウスでスクロールできるようにするものです。詳細

• .rdx-flex-fix

flex box の折り返し時、space-between と space-around / center の合いの子で丁度いい配置になるようにできます。詳細

• .rdx-scroll-appear

要素がスクロールによって表示されるようにできます。詳細