多くのグリッドとフレームワークから選択できます。CSS フレームワークを Google で検索すると、多数のフレームワークから選択できる記事が多数表示されます。
1 つを選択するとなると、すべての詳細な知識がないと迷子になりがちです。
CSS フレームワークを選択する主な要因は何ですか?また、それらの選択は特定のフレームワークにどのように対応しますか?
より一般的には、CSS フレームワークをどのように選択するのでしょうか?
注 1: ここでは「グリッド」と「フレームワーク」をほぼ同じ意味で使用していますが、おそらくどちらか一方を使用する必要があります。これに関する修正は大歓迎です。
注 2: いくつかの選択は好みに依存することを十分承知しており、したがって、この質問は「最高の」コンテスト/主観的なトピックになる可能性があります。多くの人がフレームワークを選択するというこの問題/質問を抱えており、それに対する答えがコミュニティに利益をもたらすと確信しているため、私はできるだけ答えられるようにしています。そのため、この質問を閉じるだけでなく、この質問の改善を歓迎します。
フレームワークを選択するときは、次の質問を考慮してください。
言語：一部のフレームワークはSASSで記述されています。その他はLESSで書かれています。さらに、純粋なCSSで書かれているものもあります。最も使いやすい言語で書かれたフレームワークを選択してください。
機能：一部のフレームワークはグリッドのみを提供します。他の人はタイポグラフィを追加します。さらに、カスタムUI要素を多数追加するものもあります。必要な機能に最適なフレームワークを選択してください。機能が少なすぎるフレームワークや、肥大化して使用する予定のない多くの機能を含むフレームワークは必要ありません。
モジュール性：フレームワークの出力の50％を独自のカスタムコードで上書きしたくない。必要な機能よりもはるかに多くの機能を備えたフレームワークを選択する場合は、コードの膨張の多くを簡単に取り除くことができるように十分にモジュール化されていることを確認してください。
レスポンシブ：ページをレスポンシブにする場合は、レスポンシブグリッドを選択します。
クロスブラウザのサポート：プロジェクトで古いブラウザをサポートする必要がある場合は、サポートする必要のあるすべてのブラウザをサポートするフレームワークを選択してください。
私は独自のフレームワークCascadeFrameworkを構築しました。なぜなら、そこにあるフレームワークのどれも、私が望む方法でそれらの質問に答えなかったからです。お気軽にチェックしてください。
ほとんどのグリッドは 95% 同じです: 列の幅を定義し、clearfix を含めます。
必要に応じて、独自のグリッドを作成することもできます。したがって、ほとんどのグリッドが本質的に同じであると理解した場合、どのグリッドを使用するのが最適でしょうか?
1)グリッドをダウンロードするだけで Twitter Bootstrapをカスタマイズします。ほとんどの人は「span1、span2、span3」という慣例に慣れているので、これは素晴らしい選択です。また、固定幅と流体 (レスポンシブ) としても利用できます。
2) 960.gsは、おそらく最も一般的に使用される固定幅グリッドです。 Unsemanticは 960 のレスポンシブの後継です。どちらも Nathan Smith によって開発されました。
最初に、Web プロジェクトの要件と目標を設定します。
1. モバイルオーディエンスのみをターゲットにしていますか?
Web アプリが必要な場合は、特定のターゲット デバイスの UI のルック アンド フィールと Javascript を使用した機能要素を組み合わせたモバイル フレームワークである CSS フレームワーク以上のものが必要です。次の決定は、フレームワークがより小さなスマートフォン画面、タブレット画面、またはその両方をサポートするかどうかです.
より機能的な Web アプリ アプローチが必要ない場合は、レスポンシブなフレームワークを使用することをお勧めします。さまざまな画面解像度で特定のページ要素をどのように配置および順序付けするか、および小さい解像度ではどのページ要素をオフにできるかに集中する必要があります。（これは、何が（より）重要で何が重要ではないかについて、利害関係者との政治的議論につながることがあります）。
2. モバイルとデスクトップの両方のオーディエンスをターゲットにしていますか?
オーディエンス クライアントを最大限にサポートするために、レスポンシブまたは流動的なレイアウトをサポートするフレームワークが必要です。作成する必要があるグラフィック デザインがより静的である場合、ブレークポイント内のさまざまな段階で簡単に計画できるレスポンシブ ルートが適しています。ほとんどのデザイナーは現在、柔軟なアプローチ、軽量、エレガント、プレゼンテーション、それほどポータル的ではないアプローチに従っており、流動的な実装も可能です (特定またはすべてのページ要素がクライアント/ブラウザーのビューポートに応じて拡大または拡大できる場合)。
3. 従来の視聴者のみをターゲットにしていますか?
次に、最も簡単に実装できると確信しているフレームワークを選択します。デザイナーはグリッドを使用しましたか? その場合、CSS フレームワークがそれに適合する可能性があります。一部の CSS フレームワークには、Gimp、Photoshop、Illustrator などのさまざまなデザイン テンプレートが付属しているため、事前にテンプレートに基づいてデザインを作成すると、最適な実現が可能になります。
その他の 2 つの考慮事項:
A. グラフィックデザインはありません
明示的なデザイン テンプレートなしで開始する場合は、タイポグラフィを簡単に統合でき、多くの例、ユース ケース、定義済みのページ要素またはコンポーネント (ボタン、ナビゲーション、サムなど) を提供するフレームワークを選択します。
B. 時間の制約
時間がない？一部のフレームワークには、独自またはサード パーティのカスタマイズ スクリプトまたはウィザードが付属しています。必要な要素またはコンポーネントを選択し、特定の JS ライブラリをオンまたはオフにし、スタイルシートをリセットし、最終的なパッケージをダウンロードします。それでおしまい。
一部のフレームワークはかなり成熟しており、十分にテストされているため、活発なコミュニティが存在しなければ、それほど多くのことはわかりません. あなたのスキルによっては、多くのサポートが必要ない場合があります (悪い兆候でさえあります: グリッド/フレームワークはシンプルで、あなたの邪魔にならないようにする必要があります. 出てくるかもしれない質問は、かなりの一般的であり、基礎となるフレームワークの詳細がなくても回答できます)。
2 つのアプローチを示す 2 つの例 (より多くのグリッド <-> よりレスポンシブ):
ぜひご覧ください。「スライドを見る」リンクをたどると、素晴らしい背景情報を読むことができます。真のグリッドシステム。また、滑らかで伸縮性のある外観をサポートする派生物にもリンクしています。
http://twitter.github.com/bootstrap/
モダンで素敵な誇大宣伝。たくさんのコンポーネント。カスタマイズ可能。レスポンシブ。
ウェブアプリ:
http://jquerymobile.com/およびhttp://www.sencha.com/products/touch
あなたがすぐに尋ねることができる1つの質問は次のとおりです。
フレームワークをレスポンシブにしますか?
質問への答えは、あなたのリストから多くのオプションを除外します。
私が尋ねるもう 1 つの主要な質問は、プロジェクトの背後にあるコミュニティのサポートはどのようなものかということです。私の経験から言えば、特定のプロジェクトに投資したのに、それが死んでサポートが得られないのは苦痛です。重要な支持者と多くの支持者がいるものがあるのは素晴らしいことです.
Twitter の UI デザイナーが Bootstrap を作成したことを考えると、そのフレームワークをめぐる誇大宣伝とは言えません。これは優れたコードであり、最も完全なフレームワークです。960.gs は、Boostrap が scaffolding と呼んでいるグリッド システムです。Bootstrap はスマートフォンにも対応しています。したがって、誰かが jquerymobile、jquery、960.gs、および必要なすべてのプラグインを一緒にハックする必要がある場合。Bootsrap には、すぐに使い始められるように既にバンドルされており、すべてのブラウザーと電話/テーブルで動作します。