Simple CSS Framework for JP
Clone or download
Latest commit 7c160fc Nov 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Add test Nov 7, 2018
src/scss Fix background color of alert #135 Nov 7, 2018
.gitignore Remove demo Nov 6, 2018
LICENSE First commit Feb 1, 2017
README.md Update README.md Nov 11, 2018
gulpfile.js Add test Nov 7, 2018
package.json Upgrade shitajicss #141 Nov 7, 2018
project.json Upgrade build system #139 Nov 7, 2018
yarn.lock Upgrade shitajicss #141 Nov 7, 2018

README.md

MUSUBii

Site

About

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

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

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

Detail

Markup

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

Layers

CSS のレイヤーは主に 4 つに分類されています。

  • Base … リセット CSS などの下地
  • Layout … 余白・マージン・グリッドシステム
  • Module … ボタン・テキスト・リスト・見出しなど
  • Utility … 調整用モディファイア

RWD

5 つの画面サイズで可変できるレスポンシブウェブデザインになっています。

  • Mobile … ~ 575px
  • Fablet … 576px ~ 767px
  • Tablet … 768px ~ 991px
  • Desktop … 992px ~ 1199px
  • Wide … 1200px ~

Use

Download

ファイルをダウンロード後、CSS ファイル musubii.min.css を読み込んでお使いください。

<link rel="stylesheet" href="css/musubii.min.css">

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/musubii@6.6.0/docs/css/musubii.min.css">

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~

Develop

  • MacBook Pro: 13-inch 2016 No-touchbar
  • OS: macOS High Sierra 10.13.6
  • Node.js: v10.9.0

License

  • MIT

Credit