Bootstrap 3がどんな感じになりそうかを見てみた

みんな大好きBootstrapですが、次のバージョンである3、こんなサイトができて、夏にはでるんじゃないかという話も聞いたので、その前にどんなのか見てみようかと。

まずはbootstrapのgithubから入手。3っぽいbranchは3.0.0-wipなので、それを。

入手したらそのディレクトリへ移動し、npm intallを実行すると、必要なものをごっそり取ってきてくれます。npmなんじゃらほいな人はnodeをインストールするとnpmが入ります。ちなみに最近はインストールパッケージもあるみたいですねnode。途中-gがどうとかWARNが出ましたが、とりあえずの確認にはスルーして問題ありませんでした。

npm installでごっそり導入し終わったら、そのままmakeを実行すると、JSHintやらLESSやらが実行されて、ビルド完了！

サンプルとかが見られるドキュメントはdocs/index.htmlとかなのですが、開いてみるとヘッダとかがない。調べてみたところ、これはJekyllのテンプレートのようです。２まではMustache使ってたのがJekyllに変わるようですね。Jekyllについては30分のチュートリアルでJekyllを理解するが参考になりました。

Jekyllを導入。gem install jekyllでOK。

インストール後はファイルを変換してもよいのですが、めんどくさかったのでサーバで起動しました。jekyll --serverで起動して http://localhost:9001 にアクセスすると、見えました！

まだ作り途中なので変なところもあるのですが、ちゃんと見ることができました。見た目の印象だけだと、グラデーションなくなりましたね。例えばボタンはこんな感じ。

Bootstrapもいわゆるフラットデザインでしょうか。すっきりしてていいですね。

他にも色々と変わってそうなので、夏がたのしみです！