Introduction

MUSUBii（むすびー）はデザイナーの クラク が作った CSS フレームワークです。マークアップを覚え始めた 2016 年初頭から自分用に開発を始めました。

ウェブ制作の下地として使うことを想定しており、大きなコンポーネントや JavaScript を含まないミニマムな構成になっています。

MUSUBii だけではサイトは完成しませんが、CSS を書く労力は減らせます。

日本のウェブデザイナーが腹ごなしに MUSUBii を使い、元気にデザインしてくれたら幸いです。

Table of Contents

Markup

MUSUBii は、要素クラス 1 つに対して、装飾クラス .is-{xxxx} を追加して使います。すべてのクラスは英小文字・数字・ハイフンで構成されています。

<button class="button is-plain" type="button">ボタン A</button>
<button class="button is-plain is-primary" type="button">ボタン B</button>
<button class="button is-outline is-secondary" type="button">ボタン C</button>
<button class="button is-melt is-info" type="button">ボタン D</button>
<button class="button is-plain is-success is-floating" type="button">ボタン E</button>
<button class="button is-plain is-warning is-round is-sm" type="button">ボタン F</button>

Layers

CSS は大きく 4 つに分類されます。

種類詳細
bases下地となる色変数・文字変数・リセット CSS など
layoutsセクション・グリッドシステムなど
elementsテキスト・ボタン・フォームなど
utilities調整用のユーティリティ

Media Query

一部はメディアクエリによって 5 つの画面サイズで有効化できます。

定義画面サイズ
mobile0 <= width
fablet576px <= width
tablet768px <= width
desktop992px <= width
wide1200px <= width