【CSS】「Bulma」、「Buefy」

Bulmaとは？

CSS3標準である「Flexbox」をベースにしたCSSのフレームワークのことで、BootStrap等のjQueryゴリゴリなフレームワーク等に比べると、軽量なフレームワークで、学習コストも低く導入しやすいです。

また、少ない記述量で洗練されたWebデザインを構築することができます。

Flexboxについては、下記の記事でも解説しています。

【CSS】「Flexbox」の「flexコンテナー」、「子要素」について

Bulmaの特徴

• 読み込むCSSは１つだけ
• レスポンシブに対応している。
• 全部で、39個のscssクラスを持っており、「@import」でインポートすることが可能。

「グリッドシステム」を採用している。

多くのCSSフレームワークと同様に、グリッドシステムを採用しています。

親要素のタグに、「columns」、子要素のタグに「column」を指定します。

12グリッドシステムに対応

合計12サイズ横幅に持っています。サイズを指定すれば、個々のグリッドのサイズも自由に変更することが可能です。

Buefyとは？

Bulmaフレームワーク向けに作られたVue.jsの軽量なUIコンポーネントです。

どんなパーツが揃っているか。

下記のような、一般的に必要とされるようなパーツは一通り揃っています。

• table
• タブ
• ボタン
• アラート
• モーダルウィンドウ
• フォーム周り

まずは、事前にVue CLIで、webpackテンプレートで環境を作っていることを前提とします。

まだの方は下記の記事を参考に構築されてみて下さい。

【Vue.js】「Vue CLI」を使って、webpackテンプレートからサンプルアプリを作成する。

Buefyのインストール

main.jsにインポートする。

エントリポイントとなるsrc/main.jsにBuefyをインポートします。

Vue.use

Buefy等のVue.jsプラグインは、コンストラクタを使用する前にグローバルメソッドのVue.useを使用してVue.jsに登録します。