qrac/ musubii
About the developer
143 Stars 
5 Forks 
Creative Commons Zero v1.0 Universal 
1.2K Commits 
3 Opened issues 
Description
Simple CSS Framework for JP
Services available
Contributors list
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 ファイル の容量は Bootstrap・Bulma の半分以下で、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