v6.6.0 → v7.0.0

#Table of Contents

• Introduction
• Link
• Install
• Import
• Export
• Variables
• Section
• Space
• Grid
• Heading
• Text
• Button
• Table
• Form
• Icon
• Deco
• Sources

#Introduction

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

v6.6.0 のデモ・ドキュメントはアーカイブがあります。→ MUSUBii archive v6.6.0

#Link

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

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

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

#Install

インストール方法は変わっていませんが、依存ライブラリ shitajicss moftone 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

#Export

SCSS は Import するファイルを選ばず全て読み込まれる仕様となりましたが、各スタイルを出力するかどうかを変数で設定できる新たな機能が搭載されました。詳細は Option の $option-generate-style-(xxxx) と $option-add-style-(xxxx) をご確認ください。

#Variables

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

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

#Default

変数に使われている default は省略しているものとしていないものが混在していました。そのため今は全てを省略しています。プロジェクト側で書いている場合は -default を削除します。

#Disable

変数に使われている disable は disabled にリネームされています。クラス名も同様です。

#Text Color

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

#Section

#Inner

Section の .inner にはデフォルトの Padding がなくなりました。.inner.is-padding-horizontal-md のように Padding ユーティリティを追加することで対処できます。

#Inner Soft

.inner-soft が廃止となりました。.is-padding-horizontal-md への置換で対処できます。

#Inner VW

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

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

#Space

.is-space で付与される Margin は 16px 固定となりました。

Space ユーティリティはバリュエーションが増えましたが、いずれも固定幅を追加します。以下のように SCSS 変数をオーバーライドすることで、要素のサイズごとに Margin が変化させられます。

$space-size-md: 1em;

それでも違和感がある場合は次の SCSS をプロジェクト内に追記します。

.is-space {
  > .heading:not(:first-child) {
    margin-top: 1.5em;
  }
  > .groups:not(:first-child) {
    margin-top: 3em;
  }
  .heading + .field {
    margin-top: 0.5em;
  }
  .field + .texts {
    margin-top: 0.5em;
  }
  .field + .alert {
    margin-top: 0.5em;
  }
}

.wysiwyg.is-space {
  > h1,
  > h2,
  > h3,
  > h4,
  > h5,
  > h6 {
    &:not(:first-child) {
      margin-top: 1.5em;
    }
  }
}

#Grid

#Column

Grid の .col は .column にリネームされてます。HTML で class 名をリネームできればその方法で、難しければ以下のように SCSS 変数で対処します。

// セレクター名をv6状態にします
$selector-column: ".col";

// セレクター名をv6+v7状態にします
$selector-column: ".col, .column";

#Gap

.grid はデフォルトで溝が付かなくなりました。.grid.is-gap-xs で同様の状態が作れます。

#Split

$grid-split 変数が $flex-split に変更となりました。オーバーライドしている場合は修正します。

#Heading

Heading 自体が廃止となりました。問題が起きるとしても、以下の SCSS を足す程度です。

.heading {
  position: relative;
}

#Text

Line Height を大きめに取っていた .texts が廃止されました。.text.is-line-height-xl にすることで再現が可能です。

#Button

Button は .btn が .button にリネームとなりました。HTML で class 名をリネームできればその方法で、難しければ以下のように SCSS 変数で対処します。

// セレクター名をv6状態にします
$selector-button: ".btn";

// セレクター名をv6+v7状態にします
$selector-button: ".btn, .button";

#Ghost

.btn.is-ghost は廃止されました。.button.is-outline の変数をオーバーライドするか、以下の SCSS を追加します。

$btn-pattern-color-theme: (
  primary: $theme-primary,
  info: $theme-info,
  success: $theme-success,
  warning: $theme-warning,
  danger: $theme-danger
);

.btn.is-ghost {
  background-color: transparent;
  border: 1px solid $light;
  color: $light;
  &:hover {
    background-color: $light;
    color: $dark-2;
  }
  @each $key, $value in $btn-pattern-color-theme {
    &.is-#{$key} {
      border-color: lighten($value, 30%);
      color: lighten($value, 30%);
      &:hover {
        background-color: $value;
        border-color: transparent;
        color: $light;
      }
    }
  }
  &.is-disabled,
  &.is-disabled:hover,
  &[disabled],
  &[disabled]:hover {
    background-color: $light-8;
    border-color: $light-4;
    color: $light-4;
  }
}

#Buttons

Flexbox レイアウトの .buttons は廃止されましたが、.box.is-flex.is-space-row-xs.is-space-column-xs などで再現できます。

#Bar

Button などをつなげていた .is-bar は廃止されましたが、.joint という共通のレイアウト CSS が作られています。詳細は Joint をご確認ください。SCSS 変数での対応も可能です。

// セレクター名をv6状態にします
$selector-joint: ".is-bar";

// セレクター名をv6+v7状態にします
$selector-joint: ".is-bar, .joint";

#Table

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

#Form

#Radio, Checkbox

Radio・Checkbox はブラウザデフォルトではなく、CSS で描画されるようになりました。

ブラウザデフォルトのスタイルは生きているため、基本的には変更の必要はありません。新しい CSS 版を使う場合は Form をご確認ください。

#Field

Flexbox レイアウトの .field は廃止されましたが、.box.is-flex.is-space-row-xs.is-space-column-xs などで再現できます。

#Bar

Input などをつなげていた .is-bar は廃止されましたが、.joint という共通のレイアウト CSS が作られています。詳細は Joint をご確認ください。SCSS 変数での対応も可能です。

// セレクター名をv6状態にします
$selector-joint: ".is-bar";

// セレクター名をv6+v7状態にします
$selector-joint: ".is-bar, .joint";

#Icon

.icon .text の間に自動付与していた Margin は削除されました。スペースが詰まった部分は .icon.is-margin-right-xs などで対処可能です。

#Deco

#Text

.is-dark や .is-center などの適応範囲をテキストに限定したため、ざっくり当てていた部分は指定し直す必要があります。後方互換を使う場合は変数を以下のように設定。

$selector-text: ":not(.grid):not(.box)";

#Centering

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

#Scroll

.is-scroll-x は .is-overflow-scroll-x にリネームされました。HTML で class 名をリネームできればその方法で、難しければ以下のように SCSS 変数で対処します。

// セレクター名をv6状態にします
$modifier-overflow-scroll-x: ".is-scroll-x";

// セレクター名をv6+v7状態にします
$modifier-overflow-scroll-x: ".is-scroll-x, .is-overflow-scroll-x";

#Ellipsis

.is-ellipsis は .is-overflow-ellipsis にリネームされました。HTML で class 名をリネームできればその方法で、難しければ以下のように SCSS 変数で対処します。

// セレクター名をv6状態にします
$modifier-overflow-ellipsis: ".is-ellipsis";

// セレクター名をv6+v7状態にします
$modifier-overflow-ellipsis: ".is-ellipsis, .is-overflow-ellipsis";

#Sources