Need help with musubii?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

qrac
143 Stars 5 Forks Creative Commons Zero v1.0 Universal 1.2K Commits 3 Opened issues

Description

Simple CSS Framework for JP

Services available

!
?

Need anything else?

Contributors list

# 332,367
vuepres...
circlec...
Sass
scss
1110 commits


MUSUBii

Simple CSS Framework for JP

MUSUBiiは日本語サイトのインブラウザデザインを想定したシンプルで薄味のレスポンシブ対応CSSフレームワークです。

Site & Documentation

  • https://musubii.qranoko.jp

About

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

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

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

Detail

Markup

要素

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

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

File size

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

Install

npm インストールからの SCSS 利用を想定しています。

npm install musubii
yarn add 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.