Nobody Pays (for) Magazines
    Have ideas to improve npm?Join in the discussion! »

    musubii

    7.1.0 • Public • Published


    MUSUBii

    Simple CSS Framework for JP

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

    Site & Documentation

    About

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

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

    • 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 の半分以下で、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

    Install

    npm i musubii

    DownloadsWeekly Downloads

    188

    Version

    7.1.0

    License

    CC0-1.0

    Unpacked Size

    1.65 MB

    Total Files

    297

    Last publish

    Collaborators

    • avatar