Simple CSS Framework for JP
MUSUBiiは日本語サイトのインブラウザデザインを想定したシンプルで薄味のレスポンシブ対応CSSフレームワークです。
「腹が減ってはコードが書けぬ」
Web デザインの腹ごなしに、CSS フレームワーク「MUSUBii(むすびー)」をどうぞ。MUSUBii は、日本語サイトのデザイン・コーディングを元気づけます。
要素
.(xxxx)1 つに対して、状態
.is-(xxxx)を複数追加してスタイリングするのが基本です。また、すべてのクラス名は英小文字・数字・ハイフン 1 つで構成されています。
CSS のレイヤーは大きく 4 つに分類。「下地にレイアウトを組んでボタンやテキストを置いたら調整する」使い方です。実務で固有のスタイルとなる
componentsや
pagesが加わることも想定しています。
| Layer | Detail | | ----------- | -------------------------------- | |
bases| 文字色などの下地 | |
layouts| セクション・グリッドシステムなど | |
elements| ボタン・テキスト・フォームなど | |
utilities| 調整用モディファイア |
CSS は 5 つの画面サイズで可変できるレスポンシブウェブデザインになっています。
| Name | Value | | --------- | ---------------- | |
mobile|
~ 575px| |
fablet|
576px ~ 767px| |
tablet|
768px ~ 991px| |
desktop|
992px ~ 1199px| |
wide|
1200px ~|
CSS の単位は em と px を採用。エレメントの大きさをフォントサイズ変更で一括調整できます。また、すべての値には 16 を割れる数値を用いているため、サイズ変更を行った場合に割り切れない端数が出づらくなっています。
出力される CSS ファイル の容量は Bootstrap・Bulma の半分以下で、72KB 程度です。
npm インストールからの SCSS 利用を想定しています。
npm install musubii
yarn add musubii
日本で多く使われているブラウザを基準にバグフィックスを行なっています。
| Chrome | Firefox | IE | Ege | Safari(Mac) | | ------ | ------- | ----- | ------ | ----------- | | Newest | Newest | *11~ | Newest | Newest |
| Safari(iOS) | Chrome(Android) | Browser(Android) | | ----------- | --------------- | ---------------- | | Newest | Newest | *4.4~ |