LoginSignup
6

More than 5 years have passed since last update.

UIKIT2 → UIkit3

Last updated at Posted at 2018-06-15

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

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

Base

  • htmlのfont-sizeが 14px → 16px に
  • 以下すべてのfont-sizeがrem指定に(htmlに記述されたfont-size基準)
  • line-heightの指定がpxから単位なしに
  • strongfont-weight: bolder;親要素からの相対的な指定に変更
  • 全体に要素ごとの隙間がゆったり目に取られている。だいたい+5pxくらい
  • h1h2のみメディアクエリで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 : GridWidth

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 : AlignMarginContainerHeightPositionSVGPaddingVisibilityUtility

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 ケン・バーンズのアニメーション使用できるぽい
削除
.uk-animation-15

uikit2 : Text
UIkit3 : Text

Off-canvas

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

uikit2 : Off-canvas
UIkit3 : Off-canvas

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6