読者です 読者をやめる 読者になる 読者になる

まるまるこふこふ

数々の次元が崩壊し、全ての生命が塵と化すのを見てきた。私ほどの闇の心の持ち主でも、そこには何の喜びも無かった。

【前編】Bootstrap テーマ Honoka を fork してみる

この記事は Bootstrap Advent Calendar 2015 の6日目の記事です。

Bootstrap テーマ「Honoka」

Bootstrap テーマに Honoka というのがあります。
「日本語も美しく表示できる」という謳い文句に加え、
アニメキャラにインスパイアされた配色設定が好みで、
社内ツールや個人のWebサイトなどでよく使わせて頂いてます。

そんな Honoka ですが、色違いのForkテーマとして
UmiNico などが存在します。

これは僕も Honoka を fork するしかないですね!

準備

Honoka をイジるにあたって、必要な技術知識は下記です。
ふわっとだけ調べて、概要を把握しておきます。

Node.js
Grunt
Bower
Ruby
Bundler
Sass

Build してみる

Honoka は Sass を使って書かれています。
build することで、 Sass -> cssコンパイルされるわけですね。

まずは Build を試してみます。

Build 方法は公式のWikiに既にまとまってます。

Wikiのとおりに各種 npm モジュールや bundle モジュールを入れましたら、
build を実行します。build手順はgruntによって定義されているので、私がしなくちゃいけないのは下記コマンド一発です。

$ grunt build

build された cssdist/css/ 以下に保存されます。git clone した段階で
既に build された css が存在します。build されたことを確認したいので、
一旦削除します。

$ rm ./dist/css/bootstrap.css
$ rm ./dist/css/bootstrap.min.css

dist/bootstrap-ja.html を表示してみましょう。bootstrap.css を削除しちゃったので、
見るに耐えないページが表示されたことだと思います。では build します。

$ grunt build
Running "clean:build" (clean) task
>> 7 paths cleaned.

Running "bower:install" (bower) task
>> Installed bower packages
>> Copied packages to /Users/hogehoge/Desktop/Honoka/dist

Running "setAutoPrefixerConfig" task

Running "scsslint:bootstrap" (scsslint) task
Running scss-lint on bootstrap
>> 5 files are lint free

Running "scsslint:assets" (scsslint) task
Running scss-lint on assets
>> 1 file is lint free

Running "sass:bootstrap" (sass) task

Running "sass:assets" (sass) task

Running "autoprefixer:bootstrap" (autoprefixer) task
>> 1 autoprefixed stylesheet created.

Running "autoprefixer:assets" (autoprefixer) task
>> 1 autoprefixed stylesheet created.

Running "csscomb:bootstrap" (csscomb) task
>> Using custom config file "bower_components/bootstrap/less/.csscomb.json"...
>> Sorting file "dist/css/bootstrap.css"...

Running "csscomb:assets" (csscomb) task
>> Using custom config file "bower_components/bootstrap/less/.csscomb.json"...
>> Sorting file "dist/assets/css/example.css"...

Running "cssmin:minify" (cssmin) task
>> 1 file created. 165.35 kB → 134.81 kB

Running "replace:banner" (replace) task

Done, without errors.

成功しました。./dist/cssbootstrap.cssbootstrap.min.css ができていることだと思います。
先ほど開いた dist/bootstrap-ja.html をリロードするとキレイなページに戻りましたね。

ちょっと加工してみる

honoka の背景色は灰色っぽい色ですが、これを白 #fff に変更したいと思います。

build される前の scss は ./scss にあります。

背景色が定義されているのは ./scss/honoka/_variables.scss です。
35行目付近に下記の記述があるので #f9f9f9 -> #fff に書き換えます。

//** Background color for `<body>`.
$body-bg:               #f9f9f9 !default;

再度 build

$ grunt build

dist/bootstrap-ja.html をリロードすると、背景が白くなりました!

次回

長くなったので後編に続きます。

【後編】Bootstrap テーマ Honoka を fork してみる - まるまるこふこふ