Part 2のチュートリアルではBootstrapをnpmからインストールしてWebpackでビルドしました。Bootstrapは便利なのですがいつも同じデザインになって飽きてしまうのでカスタマイズしたテーマを使うと少し雰囲気が変わります。自分でデザインするのも大変なため、テイストが違うテーマがいろいろ選べるBootswatchを利用しています。
Bootswatch
BootswatchはBootstrapのデフォルトを置き換えることができるテーマをいくつか用意しています。Mithrilで使う場合も簡単です。エントリポイントでBootstrapのCSSをロードしていたところを、BootswatchのCSSに置き換えます。Part 3のリポジトリはこちらです
Yetiのテーマ
今回は一番気に入っているYetiのテーマを使います。Foundationぽいデザインになります。BootswatchのYetiのテーマに選択してメニューからbootstrap.min.cssのURLをコピーします。
プロジェクトのCSSディレクトリに移動します。ここにコピーしたbootstrap.min.cssをダウンロードします。
$ cd app/client/css
$ wget https://bootswatch.com/yeti/bootstrap.min.css
CSSのimport
Mithrilのエントリポイントのmain.js
でnpmからインストールしたBootstrapのCSSを指定している箇所を、ダウンロードしたBootswatchのCSSに変更します。
//import 'bootstrap/dist/css/bootstrap.css';
import '../css/bootstrap.min.css';
フォントのコピー
CSSファイルのimportをnode_modules
ディレクトリからプロジェクトに移動したので、フォントへの相対パスのディレクトリにフォントをコピーする必要があります。使い捨てのコンテナを起動してフォントをコンテナにマウントしているプロジェクトのディレクトリにコピーします。
$ docker-compose run --rm mithril bash
$ cp -R node_modules/bootstrap/dist/fonts/ app/client/fonts
テーマ変更の確認
前回のアラート画面だけだとBootswatchのテーマに変更した違いがよく見えません。
Homeコンポーネントの修正
Homeコンポーネントに簡単なフォームを追加してみます。BootstrapのBasic Exampleをm
関数で書き直しました。
import m from 'mithril';
export default {
controller: () => {},
view: () => {
return ('.container-fluid', [
m('.row' , [
m('.col-sm-10.col-sm-offset-1.col-md-10.col-md-offset-1', [
m('.page-header', [
m('h3', 'Bootswatch Yetiサンプル')
]),
m('.alert.alert-info[role="alert"]', [
m('span.glyphicon.glyphicon-exclamation-sign[aria-hidden="true"]'),
m('span.sr-only', 'Info:'),
' Infoのサンプルです。'
])
]),
m('.col-sm-10.col-sm-offset-1.col-md-10.col-md-offset-1', [
m('form',[
m('.form-group', [
m('label', { for: 'exampleInputEmail1' }, 'Email address'),
m('input', { type: 'email',
class: 'form-control',
id: 'exampleInputEmail1',
placeholder: 'Email'})
]),
m('.form-group', [
m('label', { for: 'exampleInputPassword1' }, 'Password'),
m('input', { type: 'password',
class: 'form-control',
id: 'exampleInputPassword1',
placeholder: 'Password'})
]),
m('button', { type: 'submit',
class: 'btn btn-warning' },
'Submit')
])
])
])
]);
}
};
Docker Composeのrun
Part 1で説明しましたが、フロントエンドのコードはwebpack-hot-middlewareとwebpack-dev-middlewareで監視しています。docker-composeから開発用サーバーを起動していると、コードを編集して保存するたびにWebpackがリビルドをしてくれます。あとはブラウザのリロードすれば最新のHTMLになります。
$ docker-compose run \
--rm \
--service-ports \
mithril \
npm run nodemon
...
webpack built b93bb3f0b430188b9606 in 312ms
webpack building...
webpack built e6788efc490b6adb668d in 231ms
少しYetiっぽいフォームの画面ができました。