Bulmaとは?
CSS3標準である「Flexbox」をベースにしたCSSのフレームワークのことで、BootStrap等のjQueryゴリゴリなフレームワーク等に比べると、軽量なフレームワークで、学習コストも低く導入しやすいです。
また、少ない記述量で洗練されたWebデザインを構築することができます。
Flexboxについては、下記の記事でも解説しています。
Bulmaの特徴
- 読み込むCSSは1つだけ
- レスポンシブに対応している。
- 全部で、39個のscssクラスを持っており、「@import」でインポートすることが可能。
「グリッドシステム」を採用している。
多くのCSSフレームワークと同様に、グリッドシステムを採用しています。
親要素のタグに、「columns」、子要素のタグに「column」を指定します。
12グリッドシステムに対応
合計12サイズ横幅に持っています。サイズを指定すれば、個々のグリッドのサイズも自由に変更することが可能です。
Buefyとは?
Bulmaフレームワーク向けに作られたVue.jsの軽量なUIコンポーネントです。
どんなパーツが揃っているか。
下記のような、一般的に必要とされるようなパーツは一通り揃っています。
- table
- タブ
- ボタン
- アラート
- モーダルウィンドウ
- フォーム周り
まずは、事前にVue CLIで、webpackテンプレートで環境を作っていることを前提とします。
まだの方は下記の記事を参考に構築されてみて下さい。
Buefyのインストール
1 |
npm install --save buefy |
main.jsにインポートする。
エントリポイントとなるsrc/main.jsにBuefyをインポートします。
1 2 3 4 |
import Buefy from 'buefy' import 'buefy/lib/buefy.min.css' Vue.use(Buefy) |
Vue.use
Buefy等のVue.jsプラグインは、コンストラクタを使用する前にグローバルメソッドのVue.useを使用してVue.jsに登録します。
この記事へのコメントはありません。