前の記事で 、 Moff.jsフレームワークを使用して、CSSフレームワークを使用せずにMobile Firstページを簡単に作成できる方法について説明しました。
しかし今日、ほとんどのプロジェクトは何らかのCSSフレームワークを使用しており、これらのフレームワークの1つがBootstrapです。 Bootstrapが最も人気のあるMobile Firstフレームワークであると言っても安全です。
このフレームワークの最大の欠点はそのサイズです。 縮小版の重量は154.9KBであり、これらは単なるCSSおよびJSファイルです。
多くの場合、開発者は機能の一部のみを必要としますが、フレームワーク全体を全体として接続します。 そのため、モバイルデバイスユーザーは大量の過剰なトラフィックをダウンロードする必要があります。 この問題の解決策は、フレームワークを、モバイルファーストアプローチで使用するのに便利な、頻繁に使用されるモジュールとあまり使用されないモジュールのグループに分割することでした。 これらの各グループは、Moffの個別のモジュールとして提出されました。
すべてのモジュールは3つのカテゴリに分類されます。
- メイン
- 構成部品
- Javascript
メインカテゴリには、次のモジュールがあります。
- ボタン-ボタンのスタイリングを担当します
- コア-すべての基本スタイルを含む
- フォーム-フォームの責任
- グリフィコン-グリフィコンアイコンスタイル
- グリッド-グリッドシステム
- テーブル-テーブル
- タイポグラフィ-タイポグラフィ
コンポーネントカテゴリには、すべてのブートストラップコンポーネントが含まれます：アラート、バッジ、パンくずリスト、ボタングループ、ドロップダウンなど
JavaScriptsカテゴリには、すべてのBootstrap JSモジュールが含まれます：Affix、Alert、Button、Carouselなど。
Moff ページでモジュールの詳細なリストを読むことができます 。
モジュールの使用方法
Coreモジュールは基本的なものであり、他のすべてのモジュールの主な依存関係としてすべてのページに接続されています。
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css">
次のBootstrap Sassモジュールで構成されています。
@import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize'; @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print'; @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding'; @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities'; @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities'; @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations'; @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed'; @import 'node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close';
残りのモジュールは2つの方法で接続できます。
AMD（非同期モジュール定義）
Moff.amd.register({ id: 'grid', depend: { js: ['bower_components/moff/dist/bootstrap/javascripts/button.js'], css: [ 'bower_components/moff/dist/bootstrap/main/grid.css', 'bower_components/moff/dist/bootstrap/components/pagination.css', ] }, file: { js: ['modules/listing.js'], css: ['modules/listing.css'] }, loadOnScreen: ['md', 'lg'], onWindowLoad: false });
モジュールを登録したら、それをダウンロードして使用を開始する必要があります。 ダウンロードする方法は2つあります。
AMDを使用して
Moff.amd.include('grid');
またはデータイベントの使用
<a href="listing.html" data-load-target="#grid-target" data-load-module="grid">Show listing</a> <div id="grid-target"></div>
HTML
<link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/core.css"> <link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/grid.css"> <link rel="stylesheet" href="bower_components/moff/dist/bootstrap/main/typography.css">
どちらのアプローチにも欠点があります。 これは、多くのファイルがあるため、HTTP接続には長い時間がかかります。 しかし、この問題は最初のダウンロードです。将来、ファイルはキャッシュからダウンロードされます。 解決策はファイルのマージです。 現時点では、これは手動で行うことができますが、将来的に同様の問題を解決するMoff用のCLIを作成する予定です。
PS MoffのBootstrapのモジュラーバージョンは、フレームワークの必要な部分のみをロードしてページサイズを容易にするのに役立ちます。