Musubii NPM | npm.io

MUSUBii

Site & Documentation

https://musubii.qranoko.jp

About

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

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

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 ファイルの容量は Bootstrap・Bulma の半分以下で、82KB 程度です。

Install

musubii - npm

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

Author: Qrac
Organization: QRANOKO

css sass scss framework japanese musubii

@everything-registry/sub-chunk-2220 @infinitebrahmanuniverse/nolb-mus precss-musubii vuepress-theme-musubii vue-bento

2 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago