Google Bootstrapの導入してみた

皆さんWeb開発してますか？

開発者にとってデザインはいつの日も悩みの種。

そんな時に便利なのがTwitter Bootstrapですよね。何となくカッコよくしてくれるということで猫も杓子もBootstrapですよ。

っでどうなったかというと、巷にBootstrapなデザインが溢れかえるわけです。人の欲望は無尽蔵。今度はBootstrapを使ってどれだけ「Bootstrapっぽくない」デザインをするかということになるわけです。

そこで昨日、突然話題？となったGoogle Bootstrapを使ってみました。

使うのに色々と面倒な手順を踏まないといけないので、メモとして。

っで最初に躓くの何故かGoogle Bootstrapの「Download」ボタンを押すとgithubの404？？？

でソースを探すとここではないかと。

https://github.com/todc/google-bootstrap

次にZIPをダウンロードして解凍しようとすると上手く行かず。。。

っでgit cloneしてソースを持ってきます。ターミナルをたちあげて

git clone git://github.com/todc/google-bootstrap.git

次にcloneで取ってきたディレクトリに移動してmakeするも怒られます。「less」が必要なようで。

なのでまずは「less」をインストール。

gem install less

lessがインストールできたらcloneで取ってきたディレクトリに移動してmakeします。

cd google-bootstrap
make

makeが完了すると「google-bootstrap/dist/google-bootstrap.css」というファイルが出来上がるのでこれを適用したいWebサイトに配置してheadで読み込みます。

因みに、Google BootstrapはあくまでもTwitter Bootstrapの拡張というイメージなので、本家のTwitter Bootstrapが必要です。

<link href="/assets/css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/css/bootstrap-responsive.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/css/google-bootstrap.css" media="all" rel="stylesheet" type="text/css" />

これで導入完了です。思ったより導入が面倒だった。

これがGoogle Bootstrap導入前

っでこれがGoogle Bootstrap導入後

え！どこが変わったかって？ボタンのデザインがGoogleのGmailなどで使われているシンプルな感じになってます。

他にもアラートとかナビゲーションボタン周りがGoogle風になってます。

因みに今回、Google Bootstrapを導入したWebサイトは近日中に公開できると思います。

Twitter Bootstrapのデザインに飽きてきた人は是非とも試してみてください。