search

qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
149 stars 6 forks source link

Migration：v6.6.0 → v7.0.0-alpha.42 #238

Closed qrac closed 4 years ago

qrac commented 5 years ago

v6.6.0からv7.0.0への移行ガイド。一応残しておいて必要がなければ破棄。

SCSS

Import

SCSSファイルを内部でまとめ、少ないimportのみで使えるようになった。ファイルパスを以下5ファイルに修正する。移動・削除・追加されたファイルを修正しなくて済む。

// gulp-sass：普通に静的サイトを制作する場合
@import "shitajicss/src/scss/_shitaji.scss";
@import "moftone/src/scss/tone/_moftone.scss";
@import "sass-dashi/src/scss/_dashi.scss";
@import "musubii/src/scss/_configs.scss";
@import "musubii/src/scss/_components.scss";
// Vue.js：グローバル変数（各コンポーネントで読み込んでOK）
@import "~moftone/src/scss/tone/_moftone.scss";
@import "~sass-dashi/src/scss/_dashi.scss";
@import "~musubii/src/scss/_configs.scss";

// Vue.js：コンポーネント集（レイアウト層で1回のみ読み込む）
@import "~shitajicss/src/scss/_shitaji.scss";
@import "~musubii/src/scss/_components.scss";

Export

SCSSファイルは全て読み込まれる仕様となったが、各スタイルを出力するかどうかは変数で設定し直せる。 https://github.com/qrac/musubii/blob/master/src/scss/config/_use.scss

Class

カラム・ボタン名を変更しているので、古いClassを使っているプロジェクトのMUSUBiiをアップグレードする場合は、以下のSCSS変数でClass名をオーバーライドする。

$column-class: ".col";
$button-class: ".btn";

新旧のClassを同時に使えるようにもできる。

$column-class: ".column, .col";
$button-class: ".button, .btn";

Default

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

Disabled

ボタンの変数やClass名の disable を disabled に変更しているので、利用している場合は置換。

Section Inner Padding

.inner .inner-vw に付与されていたPaddingはモディファイアとして分離されたため、Paddingは必須の場所は .inner.is-padding-left.is-padding-right .inner-vw.is-padding-left.is-padding-right とする。

また、Paddingを付与するだけだった .inner-soft は廃止されたため、.box..is-padding-left.is-padding-right などに置換する。

Grid Gap

デフォルトが溝のできない .is-gap-none 状態になった。従来と同じ溝をつけるにはHTMLの class="grid を class="grid is-gap-xs に置換する。

Heading

スタイルをほとんどなかった .heading は廃止。position: relative; のみ当たっていたので、レイアウトが崩れる場合はプロジェクト側に書く。

Texts

Line Heightを大きめに取っていた .texts は廃止され、モディファイア化された。.text.is-line-height-xl に置換する。

Text Deco

.is-dark や .is-center などの適応範囲をテキストに限定したため、ざっくり当てていたスタイルを指定して当てる。後方互換を使う場合は変数を以下のように設定。

$text-class: ":not(.grid):not(.btns):not(.field)";

Button

.button.is-ghost は廃止したため、使っていた場合は .button.is-outline のSCSS変数オーバーライドなどで対応する。

Buttons, Field

.buttons .field は廃止したため、.box.is-flex.is-space-row-xs.is-space-column-xs などに置換する。

また、Button・Input・Selectを繋げていた .is-bar は .joint に変わりまとめられた。スタイルの記述は新規SCSSファイルへ移動。後方互換として変数で旧classに変換することができる。

$joint-class: ".is-bar";

Icon

.icon .text の間に自動付与していたマージンは調整可能にするため削除された。ボタン内のスペースが詰まった部分は .icon.is-margin-right-xs などで対応。

Space

.is-space のマージンが .heading .groups .field .wysiwyg h2 などを用いても一定になったため調整を行う。

qrac commented 4 years ago

内容だけここに残してクローズ。