UIkitのカスタマイズ　導入編

昨今ではスマートフォンでのブラウジングがPCでのブラウジングを超えそうとの情報もあり、最近の学生はPCを使わないためキーボードが苦手というひともいるとか。
弊社ではホームページをリニューアルして1年ほど経過しましたが、既にその時にホームページもスマホに対応させました。

PCでもスマホでも1つのソースコードで対応できるレスポンシブデザインを取り入れましたが、このときいくつかのCSSフレームワークを検討いたしました。ほぼ個人的な好みということもありますが、カスタマイズをビジュアル的に確認しながら行える環境がある点でUIkitを採用しました。

ところが、IEの旧バージョン（9以下）ではCSSとJavaScriptの互換性がなく面倒な対応が必要となりました。1年前は互換性の低いブラウザからのアクセスが10%程度割合を占めていましたが、最近では2~3%程度の割合まで低下してきたようです。（弊社サイトへのアクセス状況に限ってとなりますが）
そろそろ旧バージョンの対応も見直す時期かなと、期待を込めて考えていたりします。

さて、本題に戻りますが、UIkitのカスタマイズの手順が1年前と現在とで変わってしまったようですので、改めてカスタマイズ手順の覚書としてまとめてみたいと思います。
また、カスタマイズと言っても主にスタイルの部分になりますのでご承知おきを。

カスタマイズ手順

手順については、UIkitのサイトのこちらの原文を参考にさせていただいてます。
ちなみに、今回の環境はCentOS 6.3となります。またgitとnpmはインストール済みの前提となっています。

ソースコードの取得

まず、ソースコードを入手します。ダウンロードか、GitHubからcloneして入手することができます。
今回、uikitをforkした後、cloneしました。

gitがインストールされていれば

$ git clone https://github.com/uikit/uikit.git

で入手できると思います。

ビルドツールの導入

確か1年前はgruntが使われていたようなのですが、今回インストールするのはgulpです。
改めて技術の変化は早い！と感じますが・・・gruntもまだまだ現役ですよね？

インストール手順はUIkitのサイトもgulpのサイトもどちらもほぼ同じ手順が記載されているようなので、UIkitのサイトの手順の通り進めてみます。

$ sudo npm install -g gulp

Nodeの依存モジュールのインストール

手順によると以下のコマンドを実行するように記載されていますので、実行します。uikitはcloneしたUIkitのディレクトリです。

$ cd uikit
$ npm install

だいぶ依存関係があるのか、少々時間がかかりました。

ビルド

準備ができましたのでビルドを実行します。以下のコマンドを実行すると/distディレクトリが生成されました。

$ gulp

オプションでテーマ名を指定できるようですが、まずはデフォルトの状態で試しました。

起動

次のコマンドでブラウザが起動します。

$ gulp sync

localhost:3001で確認できるようです。

UIkit customizer

今回はここまでとさせていただきます。
以前とだいぶ手順が変わってしまって・・・
次はカスタムテーマの作成ができればと思っています。

関連記事