このサイトは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
を付与すると余白をきれいに合わせてくれます。
以上!
基本はこんな感じ。次回はグリッド/パネルがよく分からんのでその辺りをまとめてみようかなと思います。