UIkitのカスタマイズ 続き
前回はUIkitをカスタマイズするための環境を構築してみました。
今回はテーマの作成を行ってみたいと思います。
前回と同様に手順については、UIkitのサイトのこちらの原文を参考にさせていただいてます。
BowerというJavaScriptのパッケージマネージャでuikitをインストールすると、LessファイルとSassファイルを含んだ配布用のファイルを入手できるようです。
前回ビルドして生成された/distディレクトリの中身とほぼ同じようなのでBowerは使わずに、次に進めてみます。
スタイルをカスタマイズするにはLessファイル、もしくはSassファイルを作成し、フック、オーバライド等で設定します。 ドキュメントではLessの方が簡単であると読み取れるのでLessを利用して行きたいと思います。
1. テーマの出力先ディレクトリの作成
初期状態では/customディレクトリはありませんので、プロジェクトのルートディレクトリに作成します。
このディレクトリは.gitignoreファイルにgitの管理対象外として設定されています。
2. テーマの追加
先ほど作成したディレクトリに更にテーマ名のディレクトリを作成します。
テーマ名はこちらの技術情報ページ用にしてみたいと思いますので、/custom/techとしてみます。
ディレクトリを作成したらuikit.lessというファイルを作成して、中身は・・・と
ドキュメントの先を読むと、既存のテーマをコピーしたほうがすぐに始められるらしい・・・
ということで、/theme/almost-flat以下を/customディレクトリにコピーすることにしました。
3. カスタマイザーとテスト
以下のタスクを実行するとカスタマイザーとテストファイルが生成されます。
$ gulp indexthemes
[20:11:37] Using gulpfile ~/work/uikit/gulpfile.js
[20:11:37] Starting 'indexthemes'...
4 themes found: Almost Flat, Default, Gradient, Tech
[20:11:37] Finished 'indexthemes' after 7.85 msはずなのですが・・・ファイルに変化はなさそうです。
とりあえず手順通り進めます。
4. テーマのビルド
以下のコマンドを実行しビルドします。
$ gulp dist -t tech
[20:22:11] Using gulpfile ~/work/uikit/gulpfile.js
[20:22:11] Starting 'dist-clean'...
[20:22:11] Finished 'dist-clean' after 399 μs
[20:22:11] Starting 'dist-core-move'...
[20:22:12] Finished 'dist-core-move' after 821 ms
[20:22:12] Starting 'dist-variables'...
[20:22:12] Finished 'dist-variables' after 95 ms
[20:22:12] Starting 'dist-themes'...
[20:22:12] Finished 'dist-themes' after 20 ms
[20:22:12] Starting 'dist-themes-core'...
[20:22:14] Finished 'dist-themes-core' after 2.32 s
[20:22:14] Starting 'dist'...
[20:22:14] Starting 'sass-copy'...
[20:22:15] Finished 'sass-copy' after 301 ms
[20:22:15] Starting 'sass-convert'...
[20:22:15] Finished 'sass-convert' after 316 ms
[20:22:15] Starting 'sass'...
[20:22:15] Finished 'sass' after 46 ms
[20:22:15] Starting 'dist-core-minify'...
[20:22:34] Finished 'dist-core-minify' after 19 s
[20:22:34] Starting 'dist-core-header'...
[20:22:35] Finished 'dist-core-header' after 1.64 s
[20:22:35] Starting 'dist-bower-file'...
[20:22:35] Finished 'dist-bower-file' after 3.21 ms
[20:22:35] Finished 'dist' after 21 sここで、Lessファイルを一部変更してみましたが、/distのなかのLessファイルは新たに生成されたものの変更が反映された形跡はありませんでした。
どうやらLessファイルはuikit.lessでインポートされている/src/less以下の
ファイルをそのまま出力しているような。
で変更したスタイルは/dist/cssの中にありました。
gulp syncでカスタマイザーのページを起動して修正したLessファイルをインポートしてみるとしっかり変更した設定が反映されました。
さて、次回はスタイルの設定を変えて遊んでみてみたいと思います。
関連記事
