v7.1.0

v7.0.0-alpha.42 → v7.0.0

Table of Contents

Introduction

この章は、MUSUBii v7.0.0-alpha.42 で制作した案件を v7.0.0 にアップデートするためのリファレンスです。ここには全体の変更点を書き連ねていますので、状況に応じて必要な内容をピックアップしてください。

v7.0.0-alpha.42 のデモは開発関係者にのみ共有しています。ドキュメントはありません。

CSS ファイルのディレクトリが docs/css から dist に変更となりましたので、パスを見直してください。

CDN リンクを引っ張っている場合は以下に変更します。

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

Install

インストール方法は変わっていませんが、依存ライブラリ shitajicss mixtone sass-dashi が不要となりました。以下コマンドで最新版がインストールされます。

npm install musubii

yarn add musubii

Import

SCSS ファイル数の増加に伴い、import するファイルは configs/_import.scss styles/_import.scss に変更となりました。

// gulp
@import "musubii/src/scss/configs/_import.scss";
@import "musubii/src/scss/styles/_import.scss";

// Next, Gatsby, Nuxt, Gridsome
@import "~musubii/src/scss/configs/_import.scss";
@import "~musubii/src/scss/styles/_import.scss";

詳細な設定方法は、各ページを参考にしてください。

例：Next・Gatsby・Nuxt・Gridsome・gulp

Variables

SCSS 全体の見直しを行った関係で、変数を利用・オーバーライドしている場合はエラーが発生します。

新しい変数名は全てこのドキュメント内で確認できます。また、各ページ下部には GitHub 上の SCSS ファイルへリンクを貼っていますので、詳細な確認はそちらでも行えます。

Use

$use-(xxxx) は 次世代 Sass の use と紛らわしいので $option-(xxxx) に変更となっています。

Text Color, Dark, Light

変数に使われている text-color は color にリネームされています。これは CSS のプロパティに合わせると共に、Text エレメントで text-text-color となってしまうのを防ぐ意味があります。

同様の理由で text-dark text-light の部分も dark light になっています。場面によっては (xxxx)-dark-dark-(xxxx) と続いている箇所もありますが、命名規則的には正しい構成です。

Section

Inner VW

Section では .inner-vw が廃止となりました。再現する CSS がないため、.inner-vw が必須の場合は次の SCSS をプロジェクト内に追記します。

.inner-vw {
  max-width: 100%;
  margin: 0 auto;
  @include fablet {
    width: 90vw;
  }
}

Grid

Column

$column-class は $selector-column に変更となりました。

Gap

is-gap-row-(xxxx) is-gap-column-(xxxx) は、命名の混乱を避けるため is-gap-vertical-(xxxx) is-gap-horizontal-(xxxx) に変更となりました。詳細・バリュエーションは Grid をご確認ください。

Split

$grid-split は $flex-split に変更となりました。

Card

Card の .card はデフォルトで overflow: hidden; するようになりました。また、Flexbox 機能は box と用途を迷うので削除となっています。

Box

Background Cover

Box の .is-bg-cover などはコンポーネント側に書いた方が良いと判断したため削除となっています。

Angle

is-angle-(xxxx) から Padding がなくなっています。使用箇所が潰れる場合は Padding ユーティリティで補填します。

Joint

Joint の $joint-class は selector-joint に変更となりました。

Text

Text の $text-class は $selector-text に変更となりました。

Button

Button の $button-class は $selector-button に変更となりました。

Table

スクロールさせるために .is-scroll-x を使っていましたが、新しい Table では .table-wrap を使います。スクロール可能な方向に影が出るなど、ユーザビリティが向上しています。

Icon

Icon の $icon-class は $selector-icon に変更となりました。

WYSIWYG

WYSIWYG で別のエレメントに依存していた変数が分離されています。反映されていない場合は新しい変数をオーバーライドしてください。

Space

Space の Row・Column は 4 方向に分割しました。

.is-space-row-(xxxx) .is-space-column-(xxxx) を使っている部分は .is-space-right-(xxxx).is-margin-right-minus-(xxxx) など、Margin のネガティブマージンを加えて修正する必要があります。

Padding

Padding の .is-padding-top-bottom-(xxxx) .is-padding-right-left-(xxxx) は、それぞれ .is-padding-vertical-(xxxx) .is-padding-horizontal-(xxxx) にリネームとなりました。

Centering

.is-centering は廃止されましたが、.is-margin-horizontal-auto で同様の効果が得られます。

Overflow

.is-scroll-x .is-scroll-y はそれぞれ .is-overflow-scroll-x .is-overflow-scroll-x に、.is-ellipsis は .is-overflow-ellipsis にリネームとなりました。

Sources