Introduction
MUSUBii(むすびー)はデザイナーの クラク が作った CSS フレームワークです。マークアップを覚え始めた 2016 年初頭から自分用に開発を始めました。
ウェブ制作の下地として使うことを想定しており、大きなコンポーネントや JavaScript を含まないミニマムな構成になっています。
MUSUBii だけではサイトは完成しませんが、CSS を書く労力は減らせます。
日本のウェブデザイナーが腹ごなしに MUSUBii を使い、元気にデザインしてくれたら幸いです。
Table of Contents
Markup
MUSUBii は、要素クラス 1 つに対して、装飾クラス .is-{xxxx}
を追加して使います。すべてのクラスは英小文字・数字・ハイフンで構成されています。
Layers
CSS は大きく 4 つに分類されます。
種類 | 詳細 |
---|---|
bases | 下地となる色変数・文字変数・リセット CSS など |
layouts | セクション・グリッドシステムなど |
elements | テキスト・ボタン・フォームなど |
utilities | 調整用のユーティリティ |
Media Query
一部はメディアクエリによって 5 つの画面サイズで有効化できます。
定義 | 画面サイズ |
---|---|
mobile | 0 <= width |
fablet | 576px <= width |
tablet | 744px <= width |
desktop | 992px <= width |
wide | 1200px <= width |