Semantic-UI とその他のいくつかのフロントエンド フレームワーク_html/css_WEB-ITnose

本来は Semantic-UI を紹介したかったのですが、このフレームワークだけを紹介しても内容が少ないので、フレームワーク関連の特集サイトで言及する必要もないので、簡単にいくつかのフロントエンドフレームワークを列挙します。私は通常、段階的な要約として使用します。

この記事の核心は HTML/CSS に焦点を当てたフレームワークです (マルチスクリーンなど) は議論されていませんが、すべての開発が自己適応を考慮する必要があるわけではありません。適応機能は少なくとも、このフレームワークが短期的には廃止されないことを示しているため、適応機能のないフレームワーク (flaminwork など) がオープンソースではない、市販されていない、または支払いが必要なフレームワークについては議論されません。 (easyframework など) については説明しません。

まず、Bootstrap について話しましょう。私はここ 2 年間、Bootstrap を使用し続けていますが、最近では、Bootstrap の調子が悪く、美学に少し飽きてきています。しかし、考えてみてください。Bootstrap のようなフレームワークが登場する前は、プログラマが作成したインターフェイスは本当にひどいものでした。現在では、少なくとも「可読」レベルにアップグレードされているため、「オーバーフロー」の問題は隠蔽されていません。私は通常、小さなツールを開発してそれをインターフェイスとして使用し、低レベルのスクリプトを作成してドキュメントのインターフェイスとして使用します。これは、誰もが理解でき、学習する必要はありません。料金。全体として、このフレームワークはインターネットの美化に大きく貢献しています。

Bootstrap の利点は、すぐに使用でき、時間を節約できることです。欠点は、クラスがいたるところに存在し (この記事を読んでいる時点では改善されているかもしれませんが、私の現在の不満には影響しません)、セマンティックが十分ではなく、カスタマイズには適していないことです。色を変更する (アダプティブの場合) カスタマイズが必要な場合は、代わりに Foundation の使用を検討できます。私は元々、このフレームワークを製品のプロトタイプを作成するために使用していました (現在、この目的は Bootstrap に置き換えられています)。その結果、Foundation バージョン 3.0 では、タイトルが「世界で最も先進的なレスポンシブ フロントエンド フレームワーク」に変更されました。 .world) が最も先進的かどうかは議論の余地がありますが、適応性の点でのカスタマイズは確かに Bootstrap よりも優れており、Bootstrap のすべてのコントロールが備わっています。

2012 年 6 月に Foundation をプロトタイピング ツールからフロントエンド フレームワークに変えたとき、Bootstrap はすでに非常に人気があり、プログラマーを納得させることはできませんでした。 Foundation に切り替えます。現在の 4.0 バージョンでは、jQuery が Zepto に置き換えられます。プロジェクトで Zepto が使用されている場合は、Bootstrap の代わりに Zepto を使用することを検討できます。

次のステップは、この記事の焦点です。名前はその主なセールスポイントであるセマンティクスです。 Semantic-UI は Bootstrap よりもセマンティックで、ナビゲーションは nav、メインコンテンツは main というわかりやすいタグ名が使用され、クラス名も非常に明確で、Bootstrap のように多くのレイヤーを必要としません。 Bootstrap は非常に汎用性が高く、互換性が高く、IE の下位バージョンとも互換性があります。Semantic-UI はよりマニアックで、Shape や Reveal など、非常に興味深い CSS3 機能を備えています。インターフェイスのデザイン スタイルの点では、Semantic は Bootstrap(2) よりもフラットです。

これらの機能は非常に派手ですが、私は現在、Boostrap の代わりに Semantic-UI を使用しています。これは主に、その JS プラグイン (モジュール) が操作しやすいためです。よく使用されるアニメーションがいくつかプリセットされており、ビュー内のコメントと動的な情報 (フィード) が非常に役立ちます。とにかく、必要な Bootstrap 機能がすべて備わっているので、喜んで Semantic-UI に変更しました。ほとんどのスタイル効果 Semantic-UI は、Bootstrap よりも必要なコードが少なく、同じ熟練度であれば Bootstrap よりも速く開発できます。また、さまざまなテーマが提供されるため、Bootstrap が一方的であるという問題をある程度回避できます。

欠点を探すと、最初に使い始めたとき、Semantic-UIのグリッドに騙されました。適応問題に関しては、ブートストラップは md/sm/xs を通じて異なる画面幅での表示を定義します。面倒ですが、制御は簡単です。 Semantic-UIはStackable/Doublingを使って実装されており、手動で調整できるため、気づかないうちに壊れてしまう可能性があります。このフレームワークの設計は Python よりも Ruby の哲学に近いようです。たとえば、リストを実装したい場合は、List または Items を使用できます。サイドバーでは、Rail または Grid を使用できます。選択肢が多すぎると、混乱を招くことがあります。また、Semantic-UI の完全なライブラリ ファイルは、JS+CSS ファイルのサイズが 500kb 近くあり、国内のインターネット速度を考慮すると、このサイズは少し大きく感じられます。各コンポーネントが具体的に何を行うのかを理解していれば、NodeJS を使用して自分で構築できます。

上記のフレームワークは、機能の実装 (フロントエンド JS やバックグラウンド関連のインタラクション) は得意だが、デザインが苦手なプログラマーに適しています。 上記のフレームワークを使用すると、優れた Web インターフェイスをすぐに作成できます。別のシナリオは、自分でデザインすることも、プロのデザイナーにデザインしてもらって HTML/CSS に変換することもできます。上記のフレームワークは重すぎて、多くの機能が使用できません。

この場合、通常はレイアウト用のフレーム（グリッド）のみが必要です。2010年にWebデザインで幅960ピクセルがよく使用される理由を紹介する記事を書きましたが、当時はまだ960gsが使用されていました。適応的なニーズを満たしていないため、しばらくの間、Been working on lessfreamwork を使用しました。最近、960gs の作者がアンセマンティックを開発したため、アンセマンティックに変更しました。アダプティブ Web ページを作成する場合、さまざまなデバイスに応じてさまざまな CSS ファイルをロードする必要があるため、Unsemantic によってそれらのファイルが分割され、時間と労力が節約されます。

最後に、Semantic-UI - unsemantic = Topcoat と考えることができる Topcoat について話しましょう。必要なのは 1 ページだけで、ナビゲーション バーさえ必要ない場合は、Topcoat+layout フレームワークを使用します。トップコートは、さまざまなページ要素をより美しくし、純粋な CSS で実装し、ファイル サイズを小さくし、柔軟性を高め、カスタマイズを容易にします。

この記事の目的は伝道であることをもう一度強調します。個人プロジェクトを開発するプログラマーは、フロントエンド フレームワークを置き換えるリスクは小さく、モルモットはさらに多くなります。実際のユーザーの使用後に更新されます。このフレームワークは運用環境で使用すると有益です。例が必要な場合は、Erya - SemanticUI + Django に基づくコンテンツ公開システムを参照してください。デモのアドレスは、http://bbs.dmyz.org/

http://dmyz.org/archives/ です。 548