こんにちは！スギモトです！
みなさん「bulma」をご存知でしょうか。
Vue.jsは学習コストが低く、既存サイトにも比較的導入しやすいということで近年人気のJavascriptのフレームワークですが、Javascriptで便利なフレームワークを利用しだすと、じゃあcssもフレームワークが欲しくなってきませんか？
私が請負うWebの案件でいつも最後まで課題として残るのが、デザインの問題です。特にcssの細かい部分について、あーだこーだと言われ最後まで仕様が決まらない……なんてことばかりでした。
そこで、逃げ道兼言い訳として用意するのがCSSフレームワークです。
フレームワーク側で決められている色ですとか、そういうガイドラインで作られています、と。修正するには、それなりのリスクとコストがー、と。
色々な意味で便利なCSSフレームワークですが、いくつもあって選定に困りますよね。
で、困ると面倒なのでBootstrapになりがちです。情報が豊富＆経験者が多いので。
ただ、いい加減飽きてきます。
なので、今回は人気だと噂の「bulma」に挑戦してみたいと思います。
ちなみに、読み方は「bulma（ブルマ）」でいいのでしょうか？
目次
前提条件
- 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フレームワークはありますので、色々試してみたいと思います。
比べてみるだけでも楽しい。
