ブートストラップによるアプリケーション開発のスピードアップ

ブートストラップは、最もよく使用されているHTML / CSS/JSフロントエンドフレームワークの1つです。 1つか2つのWebサイトを作成したほとんどすべてのWeb開発者は、この人気のあるフレームワークについて聞いたことがあるでしょう。 非常に多くの既製のコンポーネントとリソースを提供するため、Bootstrapはアプリケーション開発を大幅にスピードアップできます。

すべての優れた開発者は、開発プロセスで毎秒節約することに関心を持っています。 効率的であるということは、より迅速な展開を意味します。より早く、より頻繁に展開するほど、エンドユーザーはより良い製品をより早く入手できます。 したがって、プロセスと戦略の計画に数時間または数日を費やすと、数分だけでなく、何時間も節約できます。

私は過去4年間、プロジェクトの90％でこのフレームワークを使用してきました。 この記事では、Bootstrapの優れた機能のいくつかを見逃すことなく、アプリケーション開発をスピードアップするのに役立ついくつかのヒントを紹介します。

ブートストラップを理解する

開始するのは非常に簡単なフレームワークですが、一目でその単純さにだまされないでください。 プロジェクトに突入する前に、フレームワークで遊んで、そのインフラストラクチャとエキサイティングなコンポーネントの重要な部分の詳細を理解することに時間を費やしてください。 これは、10の最も一般的なブートストラップの間違いを回避するのに役立ちます。

Bootstrapのサイトのドキュメントを読むか、Toptalのブログのすばらしい投稿「Bootstrapとは何ですか？」から詳細を学ぶために1時間を費やしてください。 何を、なぜ、どのように行うかについての短いチュートリアル。 そして、scotch.ioであなたが知らないかもしれない素晴らしい記事Bootstrap3のヒントとコツ。

ドキュメントを読むのが退屈な作業であり、代わりにコードを読みたい場合は、BootstrapのWebサイトから始めるのが最適です。 Webインスペクターを開き、サイトのソースコードをスキャンして、すべてのコードブロックとその要素を確認します。 これはおそらく、基本を理解するための最良かつ最も迅速な方法の1つです。

ページ構造を掘り下げて、レイアウトがどのように構築されるかを学びます。

 <div class="container"> <div class="row"> ... </div> </div>

…ブラウザウィンドウのサイズを変更するか、Chromeのビューポートリサイザーを使用して、メディアクエリユーティリティの詳細を確認してください。

 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }

 @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }

…そしてそれらをいつどのように使用するか、最高のレスポンシブデザイン結果を得るために列クラスに精通してください。

 <div class="row"> <div class="col-sm-7 col-md-9 col-xs-6">Left column</div> <div class="col-sm-5 col-md-3 col-xs-6">Right column</div> </div>

W3Schoolsを見てください。ここには、すべてのCSSクラス、コンポーネント、およびJavaScriptプラグインの完全なブートストラップリファレンスがあります。すべて「TryitYourself」の例が含まれています。

• Bootstrapのグリッドシステムの説明：Bootstrapのグリッド
• 基本的なCSSクラス：タイポグラフィ、ボタン、フォームとフォーム要素、ヘルパークラス、画像、テーブル
• 個々のコンポーネント：グリフィコン、ドロップダウン、ナビゲーション。

ソースコードを調べて、できるだけ多くのクラス名に精通するようにしてください。 それらのユースケース（方法、時期、理由）について学びます。 これにより、HTMLの記述やUI要素のスタイル設定をより迅速に進めることができます。 これらのコンポーネントについて詳しく知ることで、不要な重複コードがたくさんあるスタイルシートが肥大化するのを防ぐことができます。 フレームワーク内にすでに存在するものと同じように機能する新しいコンポーネントをあまりにも多く作成するのではなく、既存のコンポーネントを使用して再利用することにより、無駄のないクリーンな状態を維持します。

これは、複数の開発者のチームで作業する場合に特に重要です。 新しいデザインをコードに変換するときに、同じケースで何度も何度も何度も何度も何度も何度も重複したコードを大量に作成してしまうことがないように注意してください。 UI開発の一貫性を保ち、UIスタイルガイドで十分に文書化することで、生産的なチームワークにいくつかの結び目を追加することもできます。 さらに、アプリケーションに新しい機能やページを追加すると、フラストレーションが少なくなります。 私は12を超える大きなプロジェクトに携わってきましたが、それに比べて、フレームワークが文字通りハッキングされ、新しいCSSコードが追加されるたびに他のページのUIが壊れてしまうケースが数多く見られました。 すべてのサイトを調べて、これらのタイプのバグを修正するのはかなり疲れます。 それだけでなく、追加の開発者時間とQAヘルプに費やされるコストとすべてのお金について考えてください。

7最も一般的な時間の無駄なスタイリングの間違い

1.テキストまたはdivを中央揃えにする場合

divやコンテンツを中央に配置する必要がある場合は、次のクラスのいずれかを使用できます。

テキストセンターを使用する

<p class="text-center">I am centered text</p>

…またはセンターブロック

<div class="center-block">I am centered text</div>

.centerまたは<center>ではありません

2.フォントサイズを変更する場合

小さいフォントまたは大きいフォントが必要な場合は、次のクラスのいずれかを使用できます。

 <p class="lead">I'm bigger paragraph text.</p>

 <p class="small">I'm smaller paragraph text.</p>

より大きなまたはより小さなヘッダーが必要な場合は、 .h1 、 .h2 、 .h3 、 .h4 、 .h5 、 .h6 、 .smallを忘れないでください。 次のように使用します。

 <h1 class="h2">Smaller Title with .h2</h1>

 <h3 class="h1">Bigger Title with .h1</h3>

 <h4 class="small">Smaller Title with .small</h4>

3.フロートをクリアするとき、または要素にその子をセルフクリアするように強制するとき

.clearのようなクラスを作成する必要はありません。代わりに、いつでもBootstrapの.clearfixを使用できます。

 <div class="clearfix">...</div>

4..rowクラスのマージンを強制終了する場合

独自のスタイルを定義する代わりに.clearfixを使用するだけです（さらに悪いことに、インラインスタイルを使用します）。

 <div class="clearfix">...</div>

5.順序付けされていないリストやその他の要素のスタイルを解除またはインライン化する場合

リストアイテムのデフォルトのリストスタイルと左マージンを削除します。 これは、直接の子リストアイテムにのみ適用されます。 ネストされたリストに同じものを適用する必要がある場合は、それらにもクラス名を追加する必要があります。

 <ul class="list-unstyled"> <li>...</li> </ul> <ul class="list-inline"> <li>...</li> </ul>

同様に、チェックボックスまたはラジオボタンには、 .checkbox-inlineと.radio-inlineがあります。

また、左揃えのインラインブロックコントロールの場合は、いつでもフォームに.form-inlineを追加できます（ <form>である必要はありません）。

6.ボタンのサイズを変更する場合

大きいまたは小さいボタンが好きですか？ サイズを追加するには、 .btn-lg 、 .btn-sm 、または.btn-xsを追加します。

7.アイテムを浮かせて、右または左に揃える場合

クラスを使用して要素を左また​​は右にフロートします。 ！importantは、特異性の問題を回避するために含まれています。 クラスは、CSSプリプロセッサとのミックスインとしても使用できます。

.right、 .left 、 .left - float 、.right-floatの代わりに、 .pull-right 、 .pull-left 、 .text-right 、 .text-leftを使用します。

 <div class="pull-left">...</div> <div class="pull-right">...</div>

テキストをテキスト配置クラスを使用してコンポーネントに簡単に再配置します。

 <p class="text-left">Left aligned text.</p> <p class="text-right">Right aligned text.</p>

フレームワークのコアファイルを直接カスタマイズしないでください

大きなプロジェクトで作業するとき、フレームワークを効果的に使用する最良の方法は、フレームワークを構築することであり、コアファイルを直接カスタマイズしないことであることがわかりました。 この概念は、プロジェクトで使用する可能性のある他のプラットフォームやライブラリに似ています。

ただし、小規模なサイトを構築していて、多くの変更や更新を必要としないデザインモックアップがある場合は、ニーズに合わせてフレームワークをカスタマイズする方が適切なオプションであることがわかります。 たとえば、フレームワークファイルで直接必要のないものをすべて削除したい場合や、Bootstrapのサイトカスタマイズセクションに移動して、すべてのコンポーネント、変数、jQueryプラグインを簡単に構成して自分の独自のバージョン。 この場合、サイト開発をスピードアップし、スタイリングやオーバーライドの処理にかかる時間を短縮できます。

ただし、複数の開発者がいる大規模なサイトを開始または作業している場合は、物事を分離して整理しておくのが最善です。 フレームワークファイルをメインのカスタムCSSフォルダーの外に移動し、非編集の非バージョンフォルダーに保持し、GruntまたはGulpプラグインgrunt-uncssまたはgulp-uncssを使用して未使用のCSSを削除します。 分離しておくためのもう1つの方法は、CDNを介して提供することです。 フレームワークのコードを分離してそのままにしておくと、最新バージョンにアップグレードするときに、より適切で高速なオプションが提供されます。 また、スケーラビリティとスタイリングの問題の数を最小限に抑えたり、UIをすばやく継続的に変更して追加するときに速度を落としたりするのにも役立ちます。

YeomanやSlushなどのスキャフォールディングツールや、Bower、Pythonのpip、NodeのNPM、Ruby Gemsなどのパッケージマネージャーを利用してください。これらは、アプリケーションのパスにファイルを追加するだけではありません。 Bowerのパワーに本当に感謝しています。ファイルを1つか2つダウンロードするだけではなく、間違いなく少しだけ多くのことができます。 プロジェクトの複雑さが増し、サードパーティのプラグインの数とそれらを維持する方法が非常識で時間がかかるため、パッケージマネージャーを使用することをお勧めします。 Bowerは、Bootstrapに関連するものを含め、各プラグインとその依存関係を追跡するのに役立ちます。

アプリケーション開発に利用可能なブートストラップリソースを利用する

Bootstrapの人気には、記事、チュートリアル、サードパーティのプラグインと拡張機能、テンプレート、テーマビルダーなどの役立つリソースが豊富に含まれています。 したがって、インスピレーションやコードスニペットを探しているかどうかにかかわらず、進行を加速するために必要なすべてのものが揃っています。

非常に多くのリソースが利用可能であると、誰もがそれを利用してプロジェクトを通じて使用すると思うでしょうが、信じられないかもしれませんが、そうではありません。 一部の開発者は、優れたコードスニペットやリソースをスキップすることで、時間を無駄にし、プロジェクトの進行を遅らせます。 盲目的にコピーして貼り付けるだけでなく、優れた部分を理解し、コーディングスタイルや技術的なニーズに合わせて採用する必要があります。 優れたリソースを見つけて整理し、それを効果的に活用できる能力もスキルであり、長年の経験と知識が必要です。

以下に、開始するのに役立つリソースのリストを示します。

テンプレート、テーマ、プラグイン

Bootstrapの作成者による公式テーマ：themes.getbootstrap.com。

プレミアムブートストラップテーマとテンプレートを備えたマーケットプレイス：wrapbootstrap.com、themeforest.net、creativemarket.com / themes/bootstrap。

無料のブートストラップテーマとテンプレート：startbootstrap.com、www.bootstrapzero.com、shapebootstrap.net/free-templates。

「ビッグバダスリスト」-319の有用なブートストラップリソースのリスト：bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources/

AngularJS

AngularUIチームによって純粋なAngularJSで記述されたBootstrapUI。

ReactJS

React-Bootstrapは、再利用可能なフロントエンドコンポーネントのライブラリです。 FacebookのReact.jsフレームワークを介して、Twitter Bootstrapのルックアンドフィールを取得できますが、コードははるかにクリーンです。

Django

Bootstrap 3とDjangoの統合：https：//github.com/dyve/django-bootstrap3

ジキル

Jekyll-Bootstrapは、Jekyllベースのブログ用の完全なブログスキャフォールドです。

WordPress

最新のフロントエンド開発ワークフローを備えたWordPressスターターテーマSage。 HTML5ボイラープレート、gulp、Bower、およびBootstrapに基づいています。

マテリアルデザイン

BootstrapのマテリアルデザインはBootstrap3のテーマであり、お気に入りのフロントエンドフレームワークで新しいGoogleマテリアルデザインを使用できます。

結論

Bootstrapは、アプリケーション開発プロセスを加速および高速化するための多くの優れたツールとリソースを提供する、利用可能な最高のフレームワークの1つです。

すばらしいUIを設計およびコーディングする際に、何時間/何日もの作業を節約できます。 すべてのコンポーネントとプラグインは、簡単に使用およびカスタマイズできるように、ライブの例とコードブロックで完全に文書化されています。 多くの開発者に強く推奨されており、プロトタイピングと本番の両方で非常に人気があります。 これは、モバイル対応のレスポンシブWebサイトを作成するための非常に優れたツールです。 Bootstrapは、多くの種類のプロジェクトの優れた出発点であり、デザイナーに渡して「これを派手に見せてください」と言うオプションを提供します。 コードをハックする必要はありません。 最も重要なことは、最初に構造を開発し、後でフォント、色、派手なスタイルに対処できるようにすることです。 時間をかけて何ができるかを研究し、それを最善の方法で使用する方法を賢く考えて、目的の場所にすばやく到達できるようにします。