Vue.js + bulma + Vue-cliでシンプルにおしゃれな静的サイトを作る

こんにちは!スギモトです!

みなさん「bulma」をご存知でしょうか。

Vue.jsは学習コストが低く、既存サイトにも比較的導入しやすいということで近年人気のJavascriptのフレームワークですが、Javascriptで便利なフレームワークを利用しだすと、じゃあcssもフレームワークが欲しくなってきませんか?

私が請負うWebの案件でいつも最後まで課題として残るのが、デザインの問題です。特にcssの細かい部分について、あーだこーだと言われ最後まで仕様が決まらない……なんてことばかりでした。

そこで、逃げ道兼言い訳として用意するのがCSSフレームワークです。

フレームワーク側で決められている色ですとか、そういうガイドラインで作られています、と。修正するには、それなりのリスクとコストがー、と。

色々な意味で便利なCSSフレームワークですが、いくつもあって選定に困りますよね。

で、困ると面倒なのでBootstrapになりがちです。情報が豊富&経験者が多いので。

ただ、いい加減飽きてきます。

なので、今回は人気だと噂の「bulma」に挑戦してみたいと思います。

ちなみに、読み方は「bulma(ブルマ)」でいいのでしょうか?

Bulma is a modern CSS framework based on Flexbox.

前提条件

  • Win10
  • VSCode
  • Vue@2.5.11
  • bulma@0.7.1
  • Webpack@3.6.1

npm導入済みという前提で進めます。

準備

いつもどおりの手順です。お試しプロジェクトのときは便利なのでvue-cliを使いましょう。

インストールしていない方は下記のコマンドを叩いて下さい。

npm i -g vue-cli

vueコマンドでプロジェクト作成

vue init webpack-simple bulma-test

色々インストール

npm i

ここまでで、Vue.jsのサンプルプロジェクトは完成のはずです。

動作確認したい方は下記のコマンドを実行してみてください。

npm run dev

Bulmaの話はここから

Bulmaをインストール

CDNでも提供されているようですし、Zipとしてダウンロードもできるようですが、今回はnpmからやってみたいと思います。

npm i bulma

その他必要な物をインストール

npm i sass-loader node-sass --save-dev

App.vueにBulmaをImport

これだけで適用できるようです。

実際に適用後の画面を見てみるとこんな感じです。

スタイルが適用されていますね。フォントが細いタイプの模様。

Bulmaのコンポーネントを使ってみる

せっかくなのでよく使うコンポーネントも確認してみます。

使い方は公式サイトで紹介されていました。(日本語未対応な模様)

サンプルフォーム

クラスを付与するだけで、シンプルなスタイルのフォームが簡単にできました。

公式サイトにもサンプルコードがいくつもありますので、よくわからなくてもなんとなく導入できそうです。

とてもお手軽ですね。

「Element」同様サクッと高品質なコンポーネントを導入することができました。

ここまで15分もかかっていません。

合わせて読みたい!

まとめ

CSSフレームワークは簡単に導入できてとても便利です。

0からベースデザインを自分で作る余裕のないとき、サクッと静的サイトを立ち上げたいときなどにはぜひ導入を検討してみてください!

他にもいっぱいCSSフレームワークはありますので、色々試してみたいと思います。

比べてみるだけでも楽しい。