Beansテーマで動くCSSフレームワークuikit ver.2 ~よく使うものメモ(その1)

uikit

このサイトはWordpressでBeansテーマをカスタマイズして使っているのですが、このテーマは一風変わっていてCSSフレームワークの一つuikit ver.2を使ってwebページをより細かくカスタマイズできるよっていうやつなのです。

本家uikitマニュアルが英語でとっても読みにくいので、このサイトでよく使うものを、よく使いたいので抜粋メモしておきます。

テキスト

テキストのスタイルと色

クラス 説明
.uk-text-small フォントサイズを小さく
.uk-text-large フォントサイズを大きく
.uk-text-muted テキスト色を「ミュート」に
.uk-text-primary テキストを「メインカラー」に(ここではオレンジ色)
.uk-text-success テキストを「成功」色に
.uk-text-warning テキストを「注意」色に
.uk-text-danger テキストを「警告」色に

テキスト水平方向の整列

クラス 説明
.uk-text-left テキストを左寄せ
.uk-text-right テキストを右寄せ
.uk-text-center テキストを中央寄せ

テキスト垂直方向の整列

クラス 説明
.uk-text-top テキストを上部に寄せる
.uk-text-middle テキストを中央に寄せる
.uk-text-bottom テキストを下部に寄せる

余白

マージン:ブロック要素に余白を追加

クラス 説明
.uk-margin 上下左右に余白を追加
.uk-margin-* top/bottom/left/right を記述することで対応する位置に余白を追加
.uk-margin-* large/small を記述することで余白サイズを調整

アイコン

アイコンのサイズ

アイコンを使う場合はクラスに.uk-icon-*を使います。「*」に何を入れるかの詳細はマニュアル参照。

  • .uk-icon-home:デフォルトサイズ。
  • .uk-icon-small:ちょっと大きい。
  • .uk-icon-medium:けっこう大きい。
  • .uk-icon-large:めっちゃ大きい。

ホバーと位置合わせ

ホバーエフェクトを付ける場合はクラスに.uk-icon-hoverを付与。
リスト表示なんかで使いたいときはクラスに.uk-icon-justifyを付与すると余白をきれいに合わせてくれます。

以上!

基本はこんな感じ。次回はグリッド/パネルがよく分からんのでその辺りをまとめてみようかなと思います。