UIKIT2 → UIkit3

UIKIT2を使用していた人向け、UIkit3へ移行する際のクラスの変更の覚書。
社内用にまとめたものを需要があるかわかりませんがアップしてみます。

変更追加があるもののみ。既存と変更ないものは記載していません。
クラスから属性に移行したものjavaScript用属性に関してもごちゃまぜ記述してます。
基本的にクラスに関しては先頭に「.」をいれております。

## Base

- htmlの`font-size`が 14px → 16px　に
- 以下すべての`font-size`がrem指定に（htmlに記述されたfont-size基準）
- `line-height`の指定がpxから単位なしに
- `strong`の`font-weight: bolder;`親要素からの相対的な指定に変更
- 全体に要素ごとの隙間がゆったり目に取られている。だいたい+5pxくらい
- `h1``h2`のみメディアクエリで`font-size`変更
- 全体的に 要素にmargin-bottomのみ、要素が続くときのみmargin-top付加

uikit2 : [Base](https://getuikit.com/v2/docs/base.html)
UIkit3 : [Base](https://getuikit.com/docs/base)

## Responsive

- 480pxの存在が消えた。
- 1200pxと1600pxの使い所ってどんなときにありますか？

|  UIKIT2  | | UIkit3 | |
| --- | --- | --- | --- |
| 480px  | \*-small-*  | 640px  | *@s   |
| 768px  | \*-medium-* | 960px  | *@m   |
| 960px  | \*-large-*  | 1200px | *@l   |
| 1200px | \*-xlarge-* | 1600px | *@xl  |

## Grid → Grid + Width

- グリッドがクラスから属性に変更
- グリッド内の幅の指定がすべて幅だけのクラスに変更

|  UIKIT2  | UIkit3 |
| -------- | ----- |
|  .uk-grid |  uk-grid  |
| .uk-grid-wdith-* |  .uk-child-width-*  |
| data-uk-grid-match |  uk-height-match  |


|  UIkit3追加  |  |
| -------- | ----- |
|  .uk-grid-item-match | 指定したセルの直下の子の高さを一致させる<br>[Match only one cell](https://getuikit.com/docs/grid#match-only-one-cell) |
| .uk-width-small〜xxlarge | 各サイズ、max-sizeが固定幅<br>[Fixed width](https://getuikit.com/docs/width#fixed-width) |
|  .uk-width-auto |  width: auto; 内側の要素の幅に合う  |
| .uk-width-expand |  flex: 1 1 1px; 空いてる幅を埋める |

uikit2 : [Grid](https://getuikit.com/v2/docs/grid.html)
UIkit3 : [Grid](https://getuikit.com/docs/grid)、[Width](https://getuikit.com/docs/width)

## Utility → Align + Margin + Container + Height + Position + SVG + Padding + Visibility + Utility

- UIKIT2のUtilityにて記述されていたものが細分化してページ化され、クラスも増えている。
- UIkit3のUtilityはもっと別のものが記載されている（リサイズ、boxshadow etc..）
- 追加分に関して2に関連したところのみ記載

|  UIKIT2  | UIkit3 |
| -------- | ----- |
| .uk-container.uk-container-center | .uk-container |
| .uk-conatainer-center | .uk-align-center(2からあり)、.uk-margin-auto |
| .uk-nbfc | .uk-overflow-hidden |
| data-uk-svg | uk-svg |
| .uk-margin-top-remove | .uk-margin-remove-top |
| .uk-margin-bottom-remove | .uk-margin-remove-bottom |
| data-uk-margin | uk-margin |
| .uk-padding-top-remove | .uk-padding-remove-top |
| .uk-padding-bottom-remove | .uk-padding-remove-bottom |
| .uk-padding-vertical-remove | .uk-padding-remove-vertical |
| .uk-scrollable-box | .uk-panel-scrollable |
| .uk-overflow-container | .uk-overflow-auto（Firefoxバグあり） |

|  UIkit3追加  |  |
| -------- | ----- |
| .uk-margin-remove-left | 左側のmargin 削除 |
| .uk-margin-remove-right | 右側のmargin 削除 |
| .uk-margin-remove-vertical | 上下のmargin 削除 |
| .uk-margin-remove-adjacent | クラスを付与した次の要素のmargin-top 削除 |
| .uk-margin-auto*（各方向） | それぞれの方向に margin: auto;を付与 |
| .uk-padding-remove-left | 左側のpadding 削除 |
| .uk-padding-remove-right | 右側のpadding 削除 |
| .uk-padding-remove-horizontal | 左右のpadding 削除 |
| .uk-visible-toggle | 非表示にする要素の親要素にこのクラスを追加 |
| .uk-hidden-hover | 子要素に追加して、コンテンツを非表示にして、削除 |
| .uk-invisible-hover | 子要素に追加して、場所を残したままコンテンツを非表示 |


| 削除 |
| --- |
| .uk-nbfc-alt |
| .uk-conatainer-center |
| .uk-vertical-align |
| .uk-vertical-align-middle |
| .uk-vertical-align-bottom |
| .uk-heading-large |
| .uk-scrollable-text |
| .uk-visible-hover |
| .uk-visible-hover-inline |

uikit2 : [Utility](https://getuikit.com/v2/docs/utility.html)
UIkit3 : [Align](https://getuikit.com/docs/align)、[Margin](https://getuikit.com/docs/margin)、[Container](https://getuikit.com/docs/container)、[Height](https://getuikit.com/docs/height)、[Position](https://getuikit.com/docs/container)、[SVG](https://getuikit.com/docs/svg)、[Padding](https://getuikit.com/docs/padding)、[Visibility](https://getuikit.com/docs/visibility)、[Utility](https://getuikit.com/docs/utility)

## Flex

- 2は使いみちでクラス命名、3はCSSプロパティや値でクラス命名
- 位置指定するクラスにレスポンシブが追加

|  UIKIT2  | UIkit3 |
| -------- | ----- |
| .uk-flex-space-between | .uk-flex-between |
| .uk-flex-space-around | .uk-flex-around  |
| .uk-flex-wrap-space-between | .uk-flex-wrap-between |
| .uk-flex-wrap-space-around | .uk-flex-wrap-around |
| .uk-flex-item-none | .uk-flex-none |
| .uk-flex-item-auto | .uk-flex-auto |
| .uk-flex-item-1 | .uk-flex-1 |


|  UIkit3追加  |  |
| -------- | ----- |
| .uk-flex-inline | フレックスを作成し、インライン要素のように動作 |
| .uk-flex-row | flex-direction: row; |

uikit2 : [Flex](https://getuikit.com/v2/docs/flex.html)
UIkit3 : [Flex](https://getuikit.com/docs/flex)

## Icon

- javaScript化されました。
- `uikit-icons.min.js`の読み込み必須

|  UIKIT2  | UIkit3 |
| -------- | ----- |
| .uk-icon-* | uk-icon="icon: *" |

|  UIkit3追加  |  |
| -------- | ----- |
| .uk-icon-image | 画像アイコン [Image modifier](https://getuikit.com/docs/icon#image-modifier) |
| .uk-flex-row | flex-direction: row; |

uikit2 : [Icon](https://getuikit.com/v2/docs/icon.html)
UIkit3 : [Icon](https://getuikit.com/docs/icon)

## Text

|  UIkit3追加  |  |
| -------- | ----- |
| .uk-text-lead | リード文用 |
| .uk-text-meta | 灰色文字 |
| .uk-text-background | 使いみち不明 |
| .uk-text-baseline | vertical-align: baseline; |

uikit2 : [Text](https://getuikit.com/v2/docs/text.html)
UIkit3 : [Text](https://getuikit.com/docs/text)

## Animation

|  追加  |  |
| -------- | ----- |
| .uk-animation-slide-*-small | フェイドで動く量：小 |
| .uk-animation-slide-*-medium | フェイドで動く量：中 |
| .uk-animation-fast | アニメーション速度早い |
| .uk-animation-kenburns | ケン・バーンズのアニメーション使用できるぽい |

|  削除  |
| -------- |
| .uk-animation-15 |

uikit2 : [Text](https://getuikit.com/v2/docs/animation.html)
UIkit3 : [Text](https://getuikit.com/docs/animation)

## Off-canvas

|  UIKIT2  | UIkit3 |
| -------- | ----- |
| .uk-offcanvas | uk-offcanvas |

|  UIkit3追加  |  |
| -------- | ----- |
| .uk-offcanvas-contentd | 外側にwrapするものが必要ぽい？ |

uikit2 : [Off-canvas](https://getuikit.com/v2/docs/offcanvas.html)
UIkit3 : [Off-canvas](https://getuikit.com/docs/offcanvas)