【前編】Bootstrap テーマ Honoka を fork してみる
この記事は Bootstrap Advent Calendar 2015 の6日目の記事です。
Bootstrap テーマ「Honoka」
Bootstrap テーマに Honoka というのがあります。
「日本語も美しく表示できる」という謳い文句に加え、
アニメキャラにインスパイアされた配色設定が好みで、
社内ツールや個人のWebサイトなどでよく使わせて頂いてます。
そんな Honoka ですが、色違いのForkテーマとして
Umi や Nico などが存在します。
これは僕も 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 された css は dist/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/css
に bootstrap.css
と bootstrap.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
をリロードすると、背景が白くなりました!
次回
長くなったので後編に続きます。