Webサイトで、管理画面が必要となるシステムを構築する場合、何かとレイアウトやボタンなどの装飾が面倒くさいときがあります。
その場合、CSSフレームワークを利用して、UIをお任せにすることが多々あります。大変助かってますｗ
そのCSSのフレームワークの一つ、UIKitは自分はホントに大変多く利用させてもらっていて、メニューバーやアコーディオンリスト、モーダルなど管理画面にはありがたい機能が多く用意されています。
しかし、自分としてはこのUIKitのちょっと残念なところは以下の3点。
- パーツや空白がちょっと大きめ
- カラーバリエーションが少ない
- 角々しい
CSSフレームワークで有名なBootStrapは、ボタンやバーなどはちょっと丸みがあり、ボタンの配色がUIKitよりちょっと多め。パディングなども丁度よい感じの幅でこちらもたまに利用させてもらっています。
UIKitももうちょっと優しい見栄えになればなと思っていました。そこでとうとうデフォルトの状態にオリジナルのCSSファイルで装飾するという方法から、GitHubで公開されているソースを使用してコンパイルしてカスタムCSSを作ることにしました。
その方法を忘れないようにここに記録して残します。
GithubからUIKitのソースをダウンロードし、その圧縮データを解凍する。
解凍して出来上がったフォルダ（uikit-develop）/src/scss/uikit.cssをテキストエディタで開く
以下のimport文の下に、上書きしたい情報を追記する
// uikit.cssに予め記述されている文をコメントアウトもしくは削除
//@import "components/_import.scss";
// ここから上書きしたい情報を追記
// テーマで指定されているprimaryのカラーを変更
$global-primary-background: #0000ff; // rgb指定も可
// 二つのscssファイルをインポート
@import "variables-theme.scss";
@import "mixins-theme.scss";
// 上書き、追記したいクラスを追記
// UIKitはuk-〇〇という形式でクラスが用意され、指定方法はukの部分をhookに変える
// 例：uk-buttonのCSSを編集（丸みをつけるとして）
@mixin hook-button(){
border-radius: 3px;
}
// テーマをインポート
@import "uikit-theme.scss";
後はsassコマンドで任意の場所にコンパイルし、HTMLソースのヘッダー内で出来上がったcssファイルを読み込むと、カスタムしたUIKitフレームワークのcssファイルが適用されることになります。
今回はカラー色の変更だけだったため、JSファイルは既存のものを読み込めば大丈夫なはずです。
UIKitフレームワークを自分好みの色にカスタムできるのはホントに自分としては嬉しくもあり、技術の成長を少し感じました。
ちなみに、カスタムしたCSSファイルの確認方法としては以下のような方法で行いました。
- 解凍したUIKitのフォルダ内にtestsというフォルダがあり、その中に各パーツのテスト画面用のhtmlファイルが用意されているので、このフォルダ内にcssフォルダを作成する。
- scssファイルのコンパイルで出来上がるcssファイルの出力先をcssフォルダにする
// scssフォルダ内からコマンドをする場合 sass uikit.scss:cssフォルダまでのパス/uikit.css --style expanded // インデント仕様 - index.htmlのヘッダー内にスタイルシート読み込む文を追記します。
// testsフォルダ内のindex.htmlのheadタグ内に記述 <link href="css/uikit.css" rel="stylesheet">
もし確認しても変化がない場合、コンパイルでエラーが発生しているか、出力先の指定が違うか、読み込みのファイル指定パスが違うなどの確認をしてください。