Setup

MUSUBii は CDN または npm で利用できます。

Table of Contents

CDN

各バージョンを jsDelivr のリンクで使えます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/musubii@8.1.2/dist/musubii.css" />

npm

各バージョンを npm からインストールできます。

$ npm install musubii

すべての CSS を利用する場合は PostCSS の処理の中で musubii をインポート。

@import "musubii";

部分的に利用する場合は以下から必要なものを選択してください。

/* musubii.css */
@import "musubii/src/bases/theme/light.css";
@import "musubii/src/bases/theme/dark-attr.css";
@import "musubii/src/bases/typo/font.css";
@import "musubii/src/bases/base/reset.css";
@import "musubii/src/bases/base/html.css";
@import "musubii/src/layouts/section/main.css";
@import "musubii/src/layouts/box/main.css";
@import "musubii/src/layouts/card/main.css";
@import "musubii/src/layouts/grid/main.css";
@import "musubii/src/layouts/joint/main.css";
@import "musubii/src/elements/text/main.css";
@import "musubii/src/elements/text/fablet.css";
@import "musubii/src/elements/text/tablet.css";
@import "musubii/src/elements/text/desktop.css";
@import "musubii/src/elements/text/wide.css";
@import "musubii/src/elements/text/blockquote.css";
@import "musubii/src/elements/text/code.css";
@import "musubii/src/elements/icon/main.css";
@import "musubii/src/elements/button/main.css";
@import "musubii/src/elements/badge/main.css";
@import "musubii/src/elements/alert/main.css";
@import "musubii/src/elements/list/main.css";
@import "musubii/src/elements/table/main.css";
@import "musubii/src/elements/form/main.css";
@import "musubii/src/elements/form/select.css";
@import "musubii/src/elements/form/label.css";
@import "musubii/src/elements/form/radio.css";
@import "musubii/src/elements/form/checkbox.css";
@import "musubii/src/elements/iframe/main.css";
@import "musubii/src/elements/wysiwyg/main.css";
@import "musubii/src/utilities/display/main.css";
@import "musubii/src/utilities/display/fablet.css";
@import "musubii/src/utilities/display/tablet.css";
@import "musubii/src/utilities/display/desktop.css";
@import "musubii/src/utilities/display/wide.css";
@import "musubii/src/utilities/flex/main.css";
@import "musubii/src/utilities/flex/fablet.css";
@import "musubii/src/utilities/flex/tablet.css";
@import "musubii/src/utilities/flex/desktop.css";
@import "musubii/src/utilities/flex/wide.css";
@import "musubii/src/utilities/float/main.css";
@import "musubii/src/utilities/space/main.css";
@import "musubii/src/utilities/margin/main.css";
@import "musubii/src/utilities/negative/main.css";
@import "musubii/src/utilities/padding/main.css";
@import "musubii/src/utilities/radius/main.css";
@import "musubii/src/utilities/size/main.css";
@import "musubii/src/utilities/size/fablet.css";
@import "musubii/src/utilities/size/tablet.css";
@import "musubii/src/utilities/size/desktop.css";
@import "musubii/src/utilities/size/wide.css";
@import "musubii/src/utilities/overflow/main.css";