Basic Structure
Table of Contents
Markup
MUSUBii の CSS は、要素 .(xxxx) 1 つに対して、装飾 .is-(xxxx) を複数追加してスタイリングするのが基本です。すべての class は英小文字・数字・ハイフン 1 つで構成されています。
<button class="button is-plain" type="button">ボタン A</button>
<button class="button is-plain is-primary" type="button">ボタン B</button>
<button class="button is-plain is-info is-floating" type="button">ボタン C</button>
<button class="button is-outline is-success is-round is-sm" type="button">ボタン D</button>
<button class="button is-outline is-warning is-strong is-xs" type="button">ボタン E</button>
<button class="button is-outline is-danger is-0 is-angle-right is-lg" type="button">ボタンF</button>Layers
CSS のレイヤーは大きく 4 つに分類。「下地にレイアウトを組んでボタンやテキストを置いたら調整する」使い方です。実務で固有のスタイルとなる components や pages が加わることも想定しています。
| Layer | Detail |
|---|---|
bases | 文字色などの下地 |
layouts | セクション・グリッドシステムなど |
elements | ボタン・テキスト・フォームなど |
utilities | 調整用モディファイア |
Responsive
CSS は 5 つの画面サイズで可変できるレスポンシブウェブデザインになっています。
| Name | Value |
|---|---|
mobile | ~ 575px |
fablet | 576px ~ 767px |
tablet | 768px ~ 991px |
desktop | 992px ~ 1199px |
wide | 1200px ~ |
Unit
CSS の単位は em と px を採用。エレメントの大きさを汎用ユーティリティ「Size」によるフォントサイズ変更で一括調整できます。また、すべての値には 16 を割れる数値を用いているため、サイズ変更を行った場合に割り切れない端数が出づらくなっています。
File size
出力される CSS ファイル の容量は Bootstrap・Bulma の半分以下で、72KB 程度です。