musubii

7.2.0 • Public • Published


MUSUBii

Site & Documentation

About

「腹が減ってはコードが書けぬ」

Web デザインの腹ごなしに、CSS フレームワーク「MUSUBii(むすびー)」をどうぞ。MUSUBii は、日本語サイトのデザイン・コーディングを元気づける薄味のレスポンシブ対応 CSS フレームワークです。

  • OOCSS を応用したラフな設計
  • 日本語フォントの利用を想定
  • JavaScript 未使用

Detail

Markup

要素 .(xxxx) 1 つに対して、状態 .is-(xxxx) を複数追加してスタイリングするのが基本です。また、すべてのクラス名は英小文字・数字・ハイフン 1 つで構成されています。

Layers

CSS のレイヤーは大きく 4 つに分類。「下地にレイアウトを組んでボタンやテキストを置いたら調整する」使い方です。実務で固有のスタイルとなる componentspages が加わることも想定しています。

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 を採用。エレメントの大きさをフォントサイズ変更で一括調整できます。また、すべての値には 16 を割れる数値を用いているため、サイズ変更を行った場合に割り切れない端数が出づらくなっています。

File size

出力される CSS ファイル の容量は BootstrapBulma の半分以下で、82KB 程度です。

Install

npm install musubii

Support

日本で多く使われているブラウザを基準にバグフィックスを行なっています。

Chrome Firefox IE Ege Safari(Mac)
Newest Newest *11~ Newest Newest
Safari(iOS) Chrome(Android) Browser(Android)
Newest Newest *4.4~
  • *SCSS で CSS Variables を有効化した場合、 IE11・Android Browser では色プロパティが認識されなくなります。Ponyfill の導入を検討してください。
  • *PostCSS の設定によっては IE11・Android Browser が非対応となります

License

  • CC0 1.0 Public Domain

Credit

Package Sidebar

Install

npm i musubii

Weekly Downloads

9

Version

7.2.0

License

CC0-1.0

Unpacked Size

1.54 MB

Total Files

67

Last publish

Collaborators

  • qrac