RADIX で用意しているユーティリティクラスです。
CSSの設計は本来セマンティックであるべきで、意味を持たない修飾のみを目的としたクラス名を用いることは望ましくありません。ユーティリティクラスの多用は平文の HTML を混沌とさせ、人にとってもコンピュータにとっても可読性を低下させるでしょう。
しかしながら、ユーティリティクラスを利用することが完全な悪であるとは私は思いません。特に javascript で表示変更の操作を行う場合は、ユーティリティクラスを経由するのが最もシンプルでスマートになるでしょう。要するに用法用量を守って使用することで、主体的にはセマンティックながら、ユーティリティクラスでそれを補助するコーディングができると思います。
ここにあるクラスは使うも使わないもあなたの自由です。
マージン系
- mb
- mb0
- mb_
- mb1
- mb1_
- mb2
- mb2_
- mb3
margin-bottom を調整します。 mb クラスは –gutter の値が入ります。それ以外は mb1 は 1rem というように、rem単位で 0 ~ 3rem までのクラスがあります。 _（アンダースコア）は 0.5 を意味し、 mb2_ は2.5rem のマージンを与えるという意味です。
- mt
- mt0
- mt_
- mt1
- mt1_
- mt2
- mt2_
- mt3
同様に margin-top に対して調整をすることができます。
スタイル変化系
- img.contain
- ul.disc, ol.disc
- ul.circle, ol,circle
- ul.square, ol.suare
- ul.decimal, ol.decimal
- ul.decima-lz, ol.decimal-lz
img 要素に contain クラスをつけると、object-fit の値を contain に変更できます。flex レイアウト等で画像幅が拡縮するときに使えるかもしれません。
ul, ol はクラス名にリストスタイル名をつけることで、それぞれのスタイルに変化します。decimal-leading-zero のみ長いので decimal-lz にしてしまっています。
テキスト系
- text-left
- text-right
- text-center
- text-unit
- text-clear
text-left, right, center はそれぞれ text-align の値を変化させます。text-unit は、複数行のインライン文章を画像などと同じような inline-block として振る舞わせることができます。
text-clear を適用すると、その中の文字の表示が完全に消えます。h1 でサイトロゴを表示したいけど、h1 の中に文字を何も入れないのは意味要素的に良くない、といった問題を解決できます。
表示系
- hide
- none
- visible
要素を非表示にします。none は display: none!important で絶対非表示、hide は opacity と visibility を用いて行う為 transition 等による制御ができます。
visible は hide を打ち消して表示するためのクラスです。
radix.css 本体にはメディアクエリを搭載していないため存在していませんが、テンプレートに添付している style.css にあるクラスでは、sp- 接頭辞をつけるとスマホ時のみ、pc- 接頭辞をつけるとパソコン時のみになります。
- modal-visible
モーダルウィンドウで開いたときのみ表示するようにするためのクラスです。詳細は Modal WIndow を参照してください。
レイアウト系
- clearfix
- fill-parent
clearfix はよくある無難なものです。一応存在しますが、今どきフロートレイアウトでHTMLを構成するのは非推奨で、利用は最低限であるべきです。
fill-parent はその要素が親要素一杯に広がるようにするクラスで、ロゴの下に a タグを入れてトップページに飛ぶようにしたいときなどに利用できるかもしれません。
- centering
- fb-brackets
- full-bleed
RADIXレイアウトを構成するためのクラスです。詳しくは RADIX Layout Model を参照してください。