序章

CSSフレームワークは多くの理由で優れています。 コードはより普遍的に理解され、Webアプリケーションは保守が容易になり、プロトタイピングは余分なステップが少なくなり、開発プロセスの一部になります。 一般的に、各フレームワークの統合は一般的に同じであるため、インストールプロセスは、Bootstrap、Bulma、またはFoundationのいずれかで機能します。

この投稿のコード例は、最も広く使用されているBootstrap4を使用して記述されます。 ただし、ベストプラクティスはすべてに適用されます。 これは一般的な概要を示すことを目的としており、堅牢なガイドとしてではありません。

Vue.jsへのフレームワークの追加

CSSフレームワークのダウンロードを開始する前に、必ず Vue CLI を使用して新しいプロジェクトをインストールおよび作成し、プロンプトに従ってください。

npm install vue-cli
vue init webpack project-name

Bootstrap4のインストール

新しいVueプロジェクトを初期化した後、npmを使用してBootstrap4をダウンロードします。 Bootstrap 4のJavaScriptはjQueryに依存しているため、jQueryもインストールする必要があります。

npm install bootstrap jquery --save

Vueがインポートするmain.jsファイル以下にブートストラップの依存関係を追加して、アプリケーション全体でグローバルに利用できるようにする必要があります。

main.js
import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

アプリケーションのビルドに失敗した場合は、popper.js依存関係をインストールするだけです。 その後、正しくビルドされるはずです。

npm install --save popper.js

おめでとうございます、Bootstrap 4がインストールされました! BootstrapのDocsは、列、行、ボタンなどの使用を開始するための優れたリソースです。

ブルマのインストール

Bullma は、Flexboxをベースにした軽量で柔軟なCSSフレームワークです。 Jeremy Thomas によって作成され、この記事の執筆時点でGitHubに25,000を超える星があります。

Bootstrapとは異なり、BulmaにはCSSのみが含まれているため、jQueryやJavaScriptの依存関係はありません。

Bulmaをインストールします:

npm install bulma

Bulmaをダウンロードしたら、main.jsを開いてインポートします。

main.js
import './../node_modules/bulma/css/bulma.css';

これで、BulmaをVue.jsアプリケーションで使用する準備が整いました。 Bullma Docs は、始めるのに最適なリソースです。

Foundationのインストール

Foundationは、Zurbの優秀な人々によって作成されたフレームワークです。 Foundationには2つのフレームワークがあります。 1つは電子メール用でもう1つはWebサイト用です。 WebアプリでのFoundationの使用のみに関心があるため、 FoundationSitesフレームワークが必要です。

Foundation Sitesをインストールし、main.jsファイルにインポートします。

$ npm install foundation-sites --save

main.jsファイルにインポートします。

main.js
import './../node_modules/foundation-sites/dist/css/foundation.min.css';
import './../node_modules/foundation-sites/dist/js/foundation.min.js';

Foundation Docs は、ZurbのFoundationフレームワークの詳細を学ぶための優れたリソースです。

Vueを使用したベストプラクティスの実装

コアに至るまで、これら3つのフレームワークは非常に似ています。すべて、行と列で機能します。 これらの行と列は、ユーザーインターフェイスを作成するために利用できる「グリッド」を作成します。 このグリッドを使用すると、要素に追加されるクラスを追加または変更するだけで、デバイス幅ごとに列の幅を簡単に変更できます。

注:前述のように、以下の例ではBootstrap4を使用しています。 ただし、行列ベースのフレームワークを使用したこれらのベストプラクティスは、すべてに適用されます。

可能な限り、フレームワークのクラスを使用することがベストプラクティスと見なされます。 これらの各フレームワークは、使いやすさ、スケーラビリティ、およびカスタマイズのために慎重に作成されています。 独自のクラスで独自のボタンを作成する代わりに、Bootstrap、Bulma、またはFoundationを使用してボタンを作成するだけです。

<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">I'm a large Bootstrap button</button>

<!-- Bulma -->
<button class="button is-primary is-large">I'm a large Bulma button</button>

btn-primary(Bootstrap)またはis-primary(Bulma)が、BootstrapおよびBulmaに付属しているデフォルトの青/緑の色ではなく、それぞれブランドの色を参照するように、これらをそれぞれ構成できます。

独自のブランドで独自のテーマを作成する必要がある場合は、フレームワークのグローバルスタイルをオーバーライドするグローバルスタイルシートを作成できます。 フレームワークを直接変更したくない。

独自のテーマを作成する

独自の「テーマ」を作成するには、新しいCSSファイルを作成してassetsディレクトリに配置し、App.vueファイルにインポートします。 App.vueファイルのスコープを設定しないことが重要です。

App.vue
import '@/assets/styles.css';
...

ブランドに一致するいくつかのデフォルトスタイルをいくつかのBootstrapコンポーネントにマッピングしてみてください。

styles.css
/* Buttons
--------------------------- */
.btn-primary   { background: #00462e; color: #fff; } /* dark green */
.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
.btn-tertiary  { background: #00b2e2; color: #fff; } /* blue */
.btn-cta       { background: #f7931d; color: #fff; } /* orange */

/* Forms
--------------------------- */
.form-control {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.form-control:focus,
.form-control:active {
  outline: none;
  box-shadow: none;
  background: #ccc;
  border: 1px solid #000;
}

コンポーネントの再利用性を念頭に置いて

CSSフレームワークとVue.jsを使用する場合は、コンポーネントの再利用性を念頭に置くことが重要です。 それはどういう意味ですか? さて、あなたはレイアウトCSSをコンポーネント自体と混ぜたくありません。 ある時点でコンポーネントを再利用する必要があり、その別のインスタンスでは、別のレイアウトが必要になる場合があります。

悪い例

Navigation.vue
<template>
  <div class="row">
    <div class="col">
      <nav>
        <ul>
          <li><a href="#">Navigation Item #1</a></li>
          <li><a href="#">Navigation Item #2</a></li>
          <li><a href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </div>
  </div>
</template/>
App.vue
<template>
  <div>
    ...
    <Navigation/>
  </div>
</template/>

このナビゲーションは、ヘッダーとフッターの両方で使用することを目的としている場合があります。 どちらも非常に異なって見えるはずですが、同じ情報が含まれています。 レイアウトHTMLを取り除き、それをその親/ベースコンポーネントに移動しましょう。

より良い例

Navigation.vue
<template>
  <nav>
    <ul>
      <li><a href="#">Navigation Item #1</a></li>
      <li><a href="#">Navigation Item #2</a></li>
      <li><a href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>
App.vue
<template>
  ...
  <div class="row">
    <div class="col">
      <Navigation/>
    </div>
  </div>
</template/>

結論

CSSフレームワークは、開発者としてのあなたの生活をはるかに楽にします。 これらにより、アプリケーションのテンプレートコードが広く理解され、一貫性があり、保守が容易になり、記述が容易になります。 ボタンを最初から作成するなどの一般的なタスクに集中するのではなく、アプリの機能と全体的なデザインに集中することができます。

Bootstrap、Bulma、Foundationは、現在広く使用されている3つのフレームワークにすぎません。 ただし、それらだけに限定されるわけではありません。 セマンティックUIUIキットなど、他にもたくさんのフレームワークがあり、すぐに試すことができます。