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
UIkit3 : 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 |
指定したセルの直下の子の高さを一致させる Match only one cell
|
.uk-width-small〜xxlarge |
各サイズ、max-sizeが固定幅 Fixed width
|
.uk-width-auto |
width: auto; 内側の要素の幅に合う |
.uk-width-expand |
flex: 1 1 1px; 空いてる幅を埋める |
uikit2 : Grid
UIkit3 : Grid、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
UIkit3 : Align、Margin、Container、Height、Position、SVG、Padding、Visibility、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
UIkit3 : Flex
Icon
- javaScript化されました。
-
uikit-icons.min.js
の読み込み必須
UIKIT2 |
UIkit3 |
.uk-icon-* |
uk-icon="icon: *" |
UIkit3追加 |
|
.uk-icon-image |
画像アイコン Image modifier
|
.uk-flex-row |
flex-direction: row; |
uikit2 : Icon
UIkit3 : Icon
Text
UIkit3追加 |
|
.uk-text-lead |
リード文用 |
.uk-text-meta |
灰色文字 |
.uk-text-background |
使いみち不明 |
.uk-text-baseline |
vertical-align: baseline; |
uikit2 : Text
UIkit3 : Text
Animation
追加 |
|
.uk-animation-slide-*-small |
フェイドで動く量:小 |
.uk-animation-slide-*-medium |
フェイドで動く量:中 |
.uk-animation-fast |
アニメーション速度早い |
.uk-animation-kenburns |
ケン・バーンズのアニメーション使用できるぽい |
uikit2 : Text
UIkit3 : Text
Off-canvas
UIKIT2 |
UIkit3 |
.uk-offcanvas |
uk-offcanvas |
UIkit3追加 |
|
.uk-offcanvas-contentd |
外側にwrapするものが必要ぽい? |
uikit2 : Off-canvas
UIkit3 : Off-canvas