Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

musubii

6.6.0 • Public • Published

MUSUBii

Demo & Documentation

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.5.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~

License

install

npm i musubii

Downloadsweekly downloads

31

version

6.6.0

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability